PRO-10170 fix: add switchPlaywrightPage internal switcher

Author: uid11

autotests/entities/product.ts

@@ -15,7 +15,7 @@ export const addProduct: ClientFunction<[Product], Promise<ApiProduct>> = create
         model: product.model,
         version: product.version,
       }),
-      headers: {'Content-Type': 'application/json; charset=UTF-8'},
+      headers: {'Content-Type': 'application/json; charset=UTF-8', 'x-api-key': 'reqres-free-v1'},
       method: 'POST',
     }).then((res) => res.json() as Promise<ApiProduct>),
   {name: 'addProduct', timeout: 2_000},

autotests/entities/worker.ts

@@ -16,7 +16,7 @@ export const addUser: ClientFunction<[UserWorker, number?], Promise<object>> = c
   (user: UserWorker, delay?: number) =>
     fetch(`https://reqres.in/api/users${delay !== undefined ? `?delay=${delay}` : ''}`, {
       body: JSON.stringify(user),
-      headers: {'Content-Type': 'application/json; charset=UTF-8'},
+      headers: {'Content-Type': 'application/json; charset=UTF-8', 'x-api-key': 'reqres-free-v1'},
       method: 'POST',
     }),
   {name: 'addUser', timeout: 3_000},
@@ -33,9 +33,10 @@ export const getUsers = ({delay = 0, retries = 0}: GetUsersOptions = {}): Promis
 
     clientGetUsers = createClientFunction(
       (clientDelay: number) =>
-        fetch(`https://reqres.in/api/users?delay=${clientDelay}`, {method: 'GET'}).then(
-          (res) => res.json() as unknown,
-        ),
+        fetch(`https://reqres.in/api/users?delay=${clientDelay}`, {
+          headers: {'x-api-key': 'reqres-free-v1'},
+          method: 'GET',
+        }).then((res) => res.json() as unknown),
       {name: 'getUsers', retries, timeout: 6_000},
     );
   }

autotests/packs/allTests.ts

@@ -80,7 +80,7 @@ export const pack: Pack = {
   skipTests,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
-  testFileGlobs: ['**/autotests/tests/**/switchingPages.ts'],
+  testFileGlobs: ['**/autotests/tests/**/*.ts'],
   testIdleTimeout: 8_000,
   testTimeout: 15_000,
   userAgent,

autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts

@@ -4,7 +4,7 @@ import {
 } from 'autotests/actions';
 import {setPageCookies, setPageRequestHeaders} from 'autotests/context';
 import {E2edReportExample as E2edReportExampleRoute} from 'autotests/routes/pageRoutes';
-import {createSelector, locator} from 'autotests/selectors';
+import {locator} from 'autotests/selectors';
 import {Page} from 'e2ed';
 import {setReadonlyProperty} from 'e2ed/utils';
 
@@ -23,7 +23,7 @@ export class E2edReportExample extends Page<CustomPageParams> {
   /**
    * Page header.
    */
-  readonly header: Selector = createSelector('.header');
+  readonly header: Selector = locator('header');
 
   /**
    * Navigation bar with test retries.

autotests/tests/request.ts

@@ -9,7 +9,10 @@ test(
   async () => {
     const {
       responseBody: {data},
-    } = await request(GetUsers, {routeParams: {delay: 3}});
+    } = await request(GetUsers, {
+      requestHeaders: {'x-api-key': 'reqres-free-v1'},
+      routeParams: {delay: 3},
+    });
 
     await expect(data.length, 'request returns some users').gt(0);
 

autotests/tests/switchingPages.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import {test} from 'autotests';
+import {getUsers} from 'autotests/entities';
+import {E2edReportExample} from 'autotests/pageObjects/pages';
+import {GetUsers} from 'autotests/routes/apiRoutes';
+import {expect} from 'e2ed';
+import {
+  click,
+  navigateToPage,
+  switchToTab,
+  waitForNewTab,
+  waitForRequestToRoute,
+  waitForTimeout,
+} from 'e2ed/actions';
+import {log} from 'e2ed/utils';
+
+const maxNumberOfRequests = 15;
+
+const timeout = (maxNumberOfRequests + 10) * 1_000;
+
+test(
+  'support switching of tabs for waitForRequest',
+  {meta: {testId: '21'}, testTimeout: timeout + 1_000},
+  async () => {
+    let numberOfCaughtRequests = 0;
+    let numberOfSentRequests = 0;
+
+    setInterval(() => {
+      if (numberOfSentRequests < maxNumberOfRequests) {
+        numberOfSentRequests += 1;
+
+        log(`Sent request number ${numberOfSentRequests}`);
+
+        void getUsers({retries: 1});
+      }
+    }, 1_000);
+
+    void waitForRequestToRoute(GetUsers, {
+      predicate: (routeParams, request) => {
+        numberOfCaughtRequests += 1;
+
+        log(`Caught request number ${numberOfCaughtRequests}`, {request, routeParams});
+
+        return false;
+      },
+      timeout,
+    });
+
+    await waitForTimeout(maxNumberOfRequests * 333);
+
+    const reportPage = await navigateToPage(E2edReportExample);
+
+    await waitForTimeout(maxNumberOfRequests * 333);
+
+    const npmPageTab = await waitForNewTab(async () => {
+      await click(reportPage.header);
+    });
+
+    switchToTab(npmPageTab);
+
+    await waitForTimeout(maxNumberOfRequests * 333 + 1_000);
+
+    await expect(
+      numberOfSentRequests === numberOfCaughtRequests ||
+        numberOfSentRequests === numberOfCaughtRequests + 1,
+      `almost all responses were caught (${numberOfCaughtRequests} of ${numberOfSentRequests})`,
+    ).ok();
+  },
+);

autotests/tests/switchingPagesForRequests.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import {test} from 'autotests';
+import {getUsers} from 'autotests/entities';
+import {E2edReportExample} from 'autotests/pageObjects/pages';
+import {GetUsers} from 'autotests/routes/apiRoutes';
+import {expect} from 'e2ed';
+import {
+  click,
+  navigateToPage,
+  switchToTab,
+  waitForNewTab,
+  waitForResponseToRoute,
+  waitForTimeout,
+} from 'e2ed/actions';
+import {log} from 'e2ed/utils';
+
+const maxNumberOfRequests = 15;
+
+const timeout = (maxNumberOfRequests + 10) * 1_000;
+
+test(
+  'support switching of tabs for waitForResponse',
+  {meta: {testId: '22'}, testTimeout: timeout + 1_000},
+  async () => {
+    let numberOfCaughtResponses = 0;
+    let numberOfSentRequests = 0;
+
+    setInterval(() => {
+      if (numberOfSentRequests < maxNumberOfRequests) {
+        numberOfSentRequests += 1;
+
+        log(`Sent request number ${numberOfSentRequests}`);
+
+        void getUsers({retries: 1});
+      }
+    }, 1_000);
+
+    void waitForResponseToRoute(GetUsers, {
+      predicate: (routeParams, response) => {
+        numberOfCaughtResponses += 1;
+
+        log(`Caught response number ${numberOfCaughtResponses}`, {response, routeParams});
+
+        return false;
+      },
+      timeout,
+    });
+
+    await waitForTimeout(maxNumberOfRequests * 333);
+
+    const reportPage = await navigateToPage(E2edReportExample);
+
+    await waitForTimeout(maxNumberOfRequests * 333);
+
+    const npmPageTab = await waitForNewTab(async () => {
+      await click(reportPage.header);
+    });
+
+    switchToTab(npmPageTab);
+
+    await waitForTimeout(maxNumberOfRequests * 333 + 1_000);
+
+    await expect(
+      numberOfSentRequests === numberOfCaughtResponses ||
+        numberOfSentRequests === numberOfCaughtResponses + 1,
+      `almost all responses were caught (${numberOfCaughtResponses} of ${numberOfSentRequests})`,
+    ).ok();
+  },
+);

autotests/tests/switchingPagesForResponses.ts

@@ -2,15 +2,18 @@ import {LogEventType} from '../constants/internal';
 import {clearTab} from '../context/tab';
 import {getPlaywrightPage} from '../useContext';
 import {log} from '../utils/log';
+import {switchPlaywrightPage} from '../utils/playwrightPage';
 
 /**
  * Switches page context to the specified tab.
  */
 export const switchToMainTab = (): void => {
+  clearTab();
+
   const page = getPlaywrightPage();
   const url = page.url();
 
   log(`Switch page context to the main tab at ${url}`, LogEventType.InternalAction);
 
-  clearTab();
+  switchPlaywrightPage(page);
 };

src/actions/switchToMainTab.ts

@@ -1,6 +1,7 @@
 import {LogEventType} from '../constants/internal';
 import {setTab} from '../context/tab';
 import {log} from '../utils/log';
+import {switchPlaywrightPage} from '../utils/playwrightPage';
 
 import type {InternalTab, Tab} from '../types/internal';
 
@@ -14,4 +15,6 @@ export const switchToTab = (tab: Tab): void => {
   log(`Switch page context to the specified tab at ${url}`, LogEventType.InternalAction);
 
   setTab(tab);
+
+  switchPlaywrightPage(page);
 };