PRO-10170 fix: add switchPlaywrightPage internal switcher

Author: uid11

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/**/switchingPages*.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/switchingPages.ts

@@ -0,0 +1,64 @@
+/* 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;
+
+        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, 'all requests were caught').eql(numberOfCaughtRequests);
+  },
+);

autotests/tests/switchingPagesForRequests.ts

@@ -0,0 +1,64 @@
+/* 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 maxNumberOfResponses = 15;
+
+const timeout = (maxNumberOfResponses + 10) * 1_000;
+
+test(
+  'support switching of tabs for waitForResponse',
+  {meta: {testId: '22'}, testTimeout: timeout + 1_000},
+  async () => {
+    let numberOfCaughtResponses = 0;
+    let numberOfSentResponses = 0;
+
+    setInterval(() => {
+      if (numberOfSentResponses < maxNumberOfResponses) {
+        numberOfSentResponses += 1;
+
+        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(maxNumberOfResponses * 333);
+
+    const reportPage = await navigateToPage(E2edReportExample);
+
+    await waitForTimeout(maxNumberOfResponses * 333);
+
+    const npmPageTab = await waitForNewTab(async () => {
+      await click(reportPage.header);
+    });
+
+    switchToTab(npmPageTab);
+
+    await waitForTimeout(maxNumberOfResponses * 333 + 1_000);
+
+    await expect(numberOfSentResponses, 'all responses were caught').eql(numberOfCaughtResponses);
+  },
+);

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);
 };

src/actions/switchToTab.ts

@@ -8,6 +8,7 @@ import {E2edError} from '../../utils/error';
 import {setCustomInspectOnFunction} from '../../utils/fn';
 import {getDurationWithUnits} from '../../utils/getDurationWithUnits';
 import {log} from '../../utils/log';
+import {pageWaitForRequest} from '../../utils/playwrightPage';
 import {addTimeoutToPromise} from '../../utils/promise';
 import {getRequestFromPlaywrightRequest} from '../../utils/requestHooks';
 
@@ -68,7 +69,8 @@ export const waitForRequest = (async <SomeRequest extends Request>(
   const timeoutWithUnits = getDurationWithUnits(timeout);
 
   const promise = addTimeoutToPromise(
-    page.waitForRequest(
+    pageWaitForRequest(
+      page,
       AsyncLocalStorage.bind(async (playwrightRequest: PlaywrightRequest) => {
         try {
           const request = getRequestFromPlaywrightRequest(playwrightRequest);

src/actions/waitFor/waitForRequest.ts

@@ -8,6 +8,7 @@ import {E2edError} from '../../utils/error';
 import {setCustomInspectOnFunction} from '../../utils/fn';
 import {getDurationWithUnits} from '../../utils/getDurationWithUnits';
 import {log} from '../../utils/log';
+import {pageWaitForResponse} from '../../utils/playwrightPage';
 import {addTimeoutToPromise} from '../../utils/promise';
 import {getResponseFromPlaywrightResponse} from '../../utils/requestHooks';
 import {getWaitForResponsePredicate} from '../../utils/waitForEvents';
@@ -71,7 +72,8 @@ export const waitForResponse = (async <
   const timeoutWithUnits = getDurationWithUnits(timeout);
 
   const promise = addTimeoutToPromise(
-    page.waitForResponse(
+    pageWaitForResponse(
+      page,
       AsyncLocalStorage.bind(
         getWaitForResponsePredicate(
           predicate as ResponsePredicate,

src/actions/waitFor/waitForResponse.ts

@@ -93,7 +93,7 @@ export type ReportClientData = Readonly<{
 export type ReportClientState = {
   clickListeners?: Record<string, (event: HTMLElement) => void>;
   readonly createLocatorOptions: CreateLocatorOptions;
-  readonly e2edRightColumnContainer: HTMLElement;
+  readonly e2edRightColumnContainer: HTMLElement | undefined;
   readonly fullTestRuns: readonly FullTestRun[];
   readonly internalDirectoryName: string;
   lengthOfReadedJsonReportDataParts: number;