Incorrect Resolution when Opening a New Tab in Chrome v128 (Taiko 1.4.1 release)

[winst0niuss]

Describe the bug

UPD: The problem is not that screenshots are taken in a different resolution, but that the resolution of the new tab window becomes different from the main one

I often use await screenshot() (it is necessary for my mechanism that compares screenshots using the PixelMatch).
In Chrome v.128, there is an issue:
if screenshots are taken in the main tab with the resolution specified in the setViewPort, then when opening a new tab, screenshots are taken with the browser display resolution. This issue occurs regardless of whether the headless parameter is set to true or false.
In Chrome v.126 and earlyer, this issue was not found.

To Reproduce

await openBrowser({
headless: false,
args: [ "--window-size=1600,900", "--disable-gpu", "--disable-renderer-backgrounding",
"--disable-extensions", "--no-first-run", "--no-sandbox", "--disable-background-networking",
"--disable-sync", "--disable-popup-blocking"] });
await setViewPort({ width: 1600, height: 900 });
await goto('https://the-internet.herokuapp.com/tables');
await screenshot();
await openTab('https://the-internet.herokuapp.com/checkboxes');
await screenshot();
await closeBrowser();

Expected behavior
I expect that screenshots will be taken with the resolution specified in the viewPort, regardless of which tab they are taken in.

Screenshots

If necessary, I can provide the original screenshots

Versions:

• Taiko: 1.4.1
• OS Windows10
• Node.js v18.18.2

[winst0niuss]

await openBrowser({
headless: false,
args: [ "--window-size=1600,900"] });
await setViewPort({ width: 1600, height: 900 });
await goto('https://the-internet.herokuapp.com/windows');
await screenshot();
await click(''Click Here)
await screenshot();
await closeBrowser();

It seems this issue is inherent to all "Chrome for testing" versions.
check it

[zabil]

This might be a windows only issue I don't this locally on the mac machines for example

const { openBrowser, setViewPort, goto, screenshot, click, closeBrowser } =
    require('taiko');

(async () => {
    try {
        await openBrowser({
            headless: false, args: ["--window-size=1600,900"]
        });
        await setViewPort({ width: 800, height: 600 });
        await goto('https://the-internet.herokuapp.com/windows');
        await screenshot();
        await click('Click Here');
        await screenshot();
    } catch (error) {
        console.error(error);
    } finally {
        await closeBrowser();
    }
})();

$ sips -g pixelWidth -g pixelHeight Screenshot-1721641283456.png                                                                                      10:43:24
/Users/zabilcm/projects/earthinitiative/Screenshot-1721641283456.png
  pixelWidth: 800
  pixelHeight: 600

Notice it takes the viewport size.

[winst0niuss]

step("test", async function () {
    await openBrowser({ headless: true, args: ["--window-size=1600,900"] });
    await setViewPort({ width: 800, height: 600 });
    await goto("https://the-internet.herokuapp.com/windows");
    await screenshot(); // screenshot resolution = 800x600
    await click("Click Here");
    await screenshot(); // screenshot resolution = 3074x1404
});

It might be a problem only on Windows and only on the latest versions of Chrome, but I am looking for a solution to this issue because I am testing a product that is primarily deployed and run on Windows.
If you have any thoughts on solving this problem, I would be glad to hear them and am willing to cooperate to resolve this issue.

[zabil]

In the sample you posted

    await screenshot(); // screenshot resolution = 800x600
    await click("Click Here");
    await screenshot(); // screenshot resolution = 3074x1404

The Click here opens a new window. Which I suspect resets the viewport size. Can check the resolution by modifying the script to

step("test", async function () {
    await openBrowser({ headless: true, args: ["--window-size=1600,900"] });
    await setViewPort({ width: 800, height: 600 });
    await goto("https://the-internet.herokuapp.com/windows");
    await screenshot(); // screenshot resolution = 800x600
    await click("Click Here");
    await setViewPort({ width: 800, height: 600 });
    await screenshot(); 
});

[winst0niuss]

Yes, that's correct. When opening a new window (or a new tab), the resolution resets.
If you run your script (with the repeated setViewPort), there is no problem.

I am currently using Taiko + Gauge with a separate version of Chromium (v. 120.xxxx) and there is no such problem.

I want to switch to the current version of Taiko with "Chrome for testing v.128.xxxx", but the volume of tests is too large to redo all the tests in this way.

[zabil]

We'll need to look into this. But it will probably only be fixed if Chrome for Testing releases a new version with a fix.