Fix viewport settings not persisting when opening new tabs (#2759)

Fixes #2733

  ## Problem
When setViewPort() was called and then a new tab was opened with
openTab(), the viewport settings were not preserved in the new tab. The
viewport would reset to the browser's default resolution, breaking
automated visual testing tools that rely on consistent viewport
dimensions.

  ## Solution
This PR introduces comprehensive viewport state management:

1. **Viewport persistence across sessions** - Store and automatically
reapply viewport settings when opening new tabs
2. **Race condition fix** - Added `handlerActingOnNewSession`
synchronization to ensure viewport is fully applied before continuing
(fixes Windows CI flakiness)
3. **State cleanup** - Reset viewport settings on browser close to
prevent leakage between test runs
4. **Test coverage** - Added unit tests for viewport persistence and
proper mocking

## Changes
- `lib/handlers/emulationHandler.js`: Store/reapply viewport settings
with synchronization, add `resetViewportSettings()`
- `lib/taiko.js`: Call `emulationHandler.resetViewportSettings()` on
browser close
- `test/unit-tests/handlers/emulationHandler.test.js`: Add tests for
viewport persistence and state reset.

---------

Signed-off-by: winst0niuss <chumachenko.vadym@gmail.com>

Author: winst0niuss

lib/handlers/emulationHandler.js

@@ -1,12 +1,36 @@
 const { eventHandler } = require("../eventBus");
 const networkHandler = require("./networkHandler");
 let emulation;
+let currentViewportSettings = null;
+
+const createdSessionListener = async (client) => {
+  let resolve;
+  eventHandler.emit(
+    "handlerActingOnNewSession",
+    new Promise((r) => {
+      resolve = r;
+    }),
+  );
 
-const createdSessionListener = (client) => {
   emulation = client.Emulation;
+
+  // Reapply viewport settings if they were previously set
+  if (currentViewportSettings) {
+    await applyViewportSettings(currentViewportSettings);
+  }
+
+  resolve();
 };
 eventHandler.on("createdSession", createdSessionListener);
 
+const applyViewportSettings = async (options) => {
+  const hasTouch = options.hasTouch || false;
+  await Promise.all([
+    emulation.setDeviceMetricsOverride(options),
+    emulation.setTouchEmulationEnabled({ enabled: hasTouch }),
+  ]);
+};
+
 const setViewport = async (options) => {
   if (options.height === undefined || options.width === undefined) {
     throw new Error("No height and width provided");
@@ -17,11 +41,11 @@ const setViewport = async (options) => {
     options.screenOrientation || options.isLandscape
       ? { angle: 90, type: "landscapePrimary" }
       : { angle: 0, type: "portraitPrimary" };
-  const hasTouch = options.hasTouch || false;
-  await Promise.all([
-    emulation.setDeviceMetricsOverride(options),
-    emulation.setTouchEmulationEnabled({ enabled: hasTouch }),
-  ]);
+
+  // Store viewport settings for reapplication when new tabs are created
+  currentViewportSettings = options;
+
+  await applyViewportSettings(options);
 };
 
 const setTimeZone = async (timezone) => {
@@ -74,4 +98,14 @@ const emulateDevice = async (deviceModel) => {
   ]);
 };
 
-module.exports = { setLocation, setViewport, setTimeZone, emulateDevice };
+const resetViewportSettings = () => {
+  currentViewportSettings = null;
+};
+
+module.exports = {
+  setLocation,
+  setViewport,
+  setTimeZone,
+  emulateDevice,
+  resetViewportSettings,
+};

lib/taiko.js

@@ -147,6 +147,7 @@ module.exports.closeBrowser = async () => {
 
 const _closeBrowser = async () => {
   fetchHandler.resetInterceptors();
+  emulationHandler.resetViewportSettings();
   await closeConnection(promisesToBeResolvedBeforeCloseBrowser);
 };
 

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package",
   "name": "taiko",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "Taiko is a Node.js library for automating Chromium based browsers",
   "main": "bin/taiko.js",
   "bin": {

test/unit-tests/handlers/emulationHandler.test.js

@@ -107,4 +107,102 @@ describe("emulationHandler", () => {
       deviceScaleFactor: 1,
     });
   });
+
+  it(".setViewport should reapply viewport settings when createdSession event is emitted", async () => {
+    // Set viewport first
+    await emulationHandler.setViewport({ height: 720, width: 1280 });
+
+    // Reset calledWith to verify reapplication
+    calledWith = {};
+    calledWithTouch = {};
+
+    // Create a new mock emulation for the new session
+    const newCalledWith = {};
+    const newCalledWithTouch = {};
+    const newMockEmulation = {
+      setDeviceMetricsOverride: async (param) => {
+        Object.assign(newCalledWith, param);
+      },
+      setTouchEmulationEnabled: async (param) => {
+        Object.assign(newCalledWithTouch, param);
+      },
+    };
+
+    // Mock Network to prevent errors from networkHandler
+    const newMockNetwork = {
+      requestWillBeSent: () => {},
+      loadingFinished: () => {},
+      loadingFailed: () => {},
+      responseReceived: () => {},
+      setCacheDisabled: async () => {},
+    };
+
+    const mockClient = {
+      Emulation: newMockEmulation,
+      Network: newMockNetwork,
+    };
+
+    // Emit createdSession event (simulating opening a new tab)
+    const eventHandler = emulationHandler.__get__("eventHandler");
+    await eventHandler.emit("createdSession", mockClient);
+
+    // Wait for async event handler to complete
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Verify viewport settings were reapplied
+    expect(newCalledWith).to.be.eql({
+      height: 720,
+      width: 1280,
+      mobile: false,
+      screenOrientation: { angle: 0, type: "portraitPrimary" },
+      deviceScaleFactor: 1,
+    });
+    expect(newCalledWithTouch).to.be.eql({ enabled: false });
+  });
+
+  it("should not reapply viewport if setViewport was never called", async () => {
+    // Remove old listener before reloading
+    const oldEventHandler = emulationHandler.__get__("eventHandler");
+    const oldListener = emulationHandler.__get__("createdSessionListener");
+    oldEventHandler.removeListener("createdSession", oldListener);
+
+    // Reload the module to reset state
+    emulationHandler = rewire("../../../lib/handlers/emulationHandler");
+
+    const newCalledWith = {};
+    const newCalledWithTouch = {};
+    const newMockEmulation = {
+      setDeviceMetricsOverride: async (param) => {
+        Object.assign(newCalledWith, param);
+      },
+      setTouchEmulationEnabled: async (param) => {
+        Object.assign(newCalledWithTouch, param);
+      },
+    };
+
+    // Mock Network to prevent errors from networkHandler
+    const newMockNetwork = {
+      requestWillBeSent: () => {},
+      loadingFinished: () => {},
+      loadingFailed: () => {},
+      responseReceived: () => {},
+      setCacheDisabled: async () => {},
+    };
+
+    const mockClient = {
+      Emulation: newMockEmulation,
+      Network: newMockNetwork,
+    };
+
+    // Emit createdSession without setting viewport first
+    const eventHandler = emulationHandler.__get__("eventHandler");
+    await eventHandler.emit("createdSession", mockClient);
+
+    // Wait for async event handler to complete
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Verify viewport settings were NOT applied
+    expect(Object.keys(newCalledWith).length).to.equal(0);
+    expect(Object.keys(newCalledWithTouch).length).to.equal(0);
+  });
 });