PRO-10170 fix: add switchPlaywrightPage internal switcher

Author: uid11

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

@@ -1,43 +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 {navigateToPage, waitForRequestToRoute, waitForTimeout} from 'e2ed/actions';
+import {
+  click,
+  navigateToPage,
+  switchToTab,
+  waitForNewTab,
+  waitForRequestToRoute,
+  waitForTimeout,
+} from 'e2ed/actions';
 import {log} from 'e2ed/utils';
 
-const maxNumberOfRequests = 10;
+const maxNumberOfRequests = 15;
+
+const timeout = (maxNumberOfRequests + 5) * 1_000;
+
+test(
+  'support switching of pages and tabs',
+  {meta: {testId: '21'}, testTimeout: timeout + 1_000},
+  async () => {
+    let numberOfCaughtRequests = 0;
+    let numberOfSentRequests = 0;
+
+    setInterval(() => {
+      if (numberOfSentRequests < maxNumberOfRequests) {
+        numberOfSentRequests += 1;
 
-const timeout = (maxNumberOfRequests + 2) * 1_000;
+        void getUsers({retries: 1});
+      }
+    }, 1_000);
 
-test('support switching of pages and tabs', {meta: {testId: '21'}}, async () => {
-  let numberOfCaughtRequests = 0;
-  let numberOfSentRequests = 0;
+    void waitForRequestToRoute(GetUsers, {
+      predicate: (routeParams, request) => {
+        numberOfCaughtRequests += 1;
 
-  setInterval(() => {
-    if (numberOfSentRequests < maxNumberOfRequests) {
-      numberOfSentRequests += 1;
+        log(`Caught request number ${numberOfCaughtRequests}`, {request, routeParams});
 
-      void getUsers({retries: 1});
-    }
-  }, 1_000);
+        return false;
+      },
+      timeout,
+    });
 
-  void waitForRequestToRoute(GetUsers, {
-    predicate: (routeParams, request) => {
-      numberOfCaughtRequests += 1;
+    await waitForTimeout(maxNumberOfRequests * 333);
 
-      log(`Caught request number ${numberOfCaughtRequests}`, {routeParams, request});
+    const reportPage = await navigateToPage(E2edReportExample);
 
-      return false;
-    },
-    timeout,
-  });
+    await waitForTimeout(maxNumberOfRequests * 333);
 
-  await waitForTimeout(maxNumberOfRequests * 500);
+    const npmPageTab = await waitForNewTab(async () => {
+      await click(reportPage.header);
+    });
 
-  await navigateToPage(E2edReportExample);
+    switchToTab(npmPageTab);
 
-  await waitForTimeout(maxNumberOfRequests * 500 + 1_000);
+    await waitForTimeout(maxNumberOfRequests * 333 + 1_000);
 
-  await expect(numberOfSentRequests, 'all requests were caught').eql(numberOfCaughtRequests);
-});
+    await expect(numberOfSentRequests, 'all requests were caught').eql(numberOfCaughtRequests);
+  },
+);

src/actions/switchToMainTab.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/switchToTab.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/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 {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/types/report.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;

src/utils/generalLog/logFile.ts

@@ -11,19 +11,11 @@ import {getFullPackConfig} from '../config';
  */
 const logs: string[] = [];
 
-/**
- * Adds log message to pack logs (for later saving to the pack logs file).
- * @internal
- */
-export const addLogToLogFile = (logMessage: string): void => {
-  logs.push(logMessage);
-};
-
 /**
  * Writes pack logs to logs file (if the pack config requires it and there are unwritten logs).
  * @internal
  */
-export const writeLogsToFile = async (): Promise<void> => {
+const writeLogsToFile = async (): Promise<void> => {
   if (logs.length === 0) {
     return;
   }
@@ -41,3 +33,24 @@ export const writeLogsToFile = async (): Promise<void> => {
 
   await appendFile(logsFilePath, logsText);
 };
+
+const baseWritingInternal = 4_000;
+const deltaWritingInterval = 4_000;
+
+setInterval(
+  () => {
+    void writeLogsToFile();
+  },
+  baseWritingInternal + Math.random() * deltaWritingInterval,
+);
+
+/**
+ * Adds log message to pack logs (for later saving to the pack logs file).
+ * @internal
+ */
+export const addLogToLogFile = (logMessage: string): void => {
+  logs.push(logMessage);
+};
+
+/** @internal */
+export {writeLogsToFile};

src/utils/getGlobalErrorHandler.ts

@@ -1,5 +1,6 @@
 import {E2edError} from './error';
 import {writeGlobalError} from './fs';
+import {writeLogsToFile} from './generalLog';
 
 import type {GlobalErrorType} from '../types/internal';
 
@@ -12,5 +13,6 @@ export const getGlobalErrorHandler =
   (cause: unknown): void => {
     const error = new E2edError(`Caught ${type}`, {cause});
 
-    void writeGlobalError(error.toString());
+    void writeGlobalError(error.toString()).catch(() => {});
+    void writeLogsToFile().catch(() => {});
   };

src/utils/playwrightPage/index.ts

@@ -0,0 +1,4 @@
+/** @internal */
+export {switchPlaywrightPage} from './switchPlaywrightPage';
+/** @internal */
+export {pageWaitForRequest} from './waitForRequest';

src/utils/playwrightPage/switchPlaywrightPage.ts

@@ -0,0 +1,20 @@
+import {pageWaitForRequest, waitForRequestCalls} from './waitForRequest';
+
+import type {Page} from '@playwright/test';
+
+/**
+ * Switches internal Playwright page from old to new.
+ * Removes all event handlers from the old page and moves them to the new one.
+ * @internal
+ */
+export const switchPlaywrightPage = (newPage: Page): void => {
+  const oldCalls = [...waitForRequestCalls];
+
+  waitForRequestCalls.length = 0;
+
+  for (const {disablePredicate, options, predicate, reject, resolve} of oldCalls) {
+    disablePredicate();
+
+    pageWaitForRequest(newPage, predicate, options).then(resolve, reject);
+  }
+};