FI-1011 fix: error in interface stabilization mechanism

feat: add `getBrowserJsErrors` action
tests: add tests on `getBrowserJsErrors` action
feat: add `setPageElementsIgnoredOnInterfaceStabilization` action
tests: add tests on `setPageElementsIgnoredOnInterfaceStabilization` action

README.md

@@ -323,8 +323,6 @@ If `null`, the report will not be saved.
 `skipTests: SkipTests`: this setting allows you to describe a set of skipped tests in a custom form.
 You can define the `SkipTests` type and `skipTests` processing rules in the hook `autotests/hooks/isTestSkipped.ts`.
 
-`stabilizationInterval: number`: default stabilization interval for `waitForInterfaceStabilization` action.
-
 `takeFullPageScreenshotOnError: boolean`: if `true`, then takes a screenshot of the full page
 (not just the viewport) at the time of the test error, for display in the HTML report.
 
@@ -352,6 +350,12 @@ returned by the `waitForAllRequestsComplete` function will be successfully resol
 If the wait is longer than this timeout, then the promise
 returned by the `waitForAllRequestsComplete` function will be rejected.
 
+`waitForInterfaceStabilization.stabilizationInterval: number`: default stabilization interval for `waitForInterfaceStabilization` function.
+
+`waitForInterfaceStabilization.timeout: number`: default timeout (in milliseconds) for `waitForInterfaceStabilization` function.
+If the wait is longer than this timeout, then the promise
+returned by the `waitForInterfaceStabilization` function will be rejected.
+
 `waitForRequestTimeout: number`: default timeout (in milliseconds) for `waitForRequest` function.
 If the wait is longer than this timeout, then the promise returned by the `waitForRequest` function will be rejected.
 

autotests/configurator/skipTests.ts

@@ -5,7 +5,7 @@ import type {SkipTests} from 'autotests/types/skipTests';
  */
 export const skipTests: SkipTests = [
   {
-    reason: 'Skip for testing skipping mechanism (with link [Google](https://google.com))',
+    reason: 'Skip for testing skipping mechanism (with link to [Google](https://google.com))',
     testIds: ['4'],
     unskipTaskUrl: 'https://tasktracker.com/3',
   },

autotests/packs/allTests.ts

@@ -48,7 +48,6 @@ export const pack: Pack = {
   reportFileName: 'report.html',
   selectorTimeout: 10_000,
   skipTests,
-  stabilizationInterval: 500,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
   testFileGlobs: ['./autotests/tests/**/*.ts', '!**/*.skip.ts'],
@@ -58,6 +57,10 @@ export const pack: Pack = {
     maxIntervalBetweenRequestsInMs: 500,
     timeout: 30_000,
   },
+  waitForInterfaceStabilization: {
+    stabilizationInterval: 500,
+    timeout: 30_000,
+  },
   waitForRequestTimeout: 30_000,
   waitForResponseTimeout: 30_000,
 };

autotests/packs/local.example.ts

@@ -8,4 +8,5 @@ import type {Pack} from 'autotests/types/pack';
 export const pack: Pack = {
   ...allTestsPack,
   browserInitTimeout: 40_000,
+  dockerImage: 'e2edhub/e2ed',
 };

autotests/pageObjects/pages/Main.ts

@@ -52,7 +52,7 @@ export class Main extends Page<CustomPageParams> {
   /**
    * Header selector.
    */
-  readonly headerSelector = mainPageLocator.header();
+  readonly header = mainPageLocator.header();
 
   /**
    * Search input.

autotests/tests/e2edReportExample/browserData.ts

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+
+import {it} from 'autotests';
+import {E2edReportExample} from 'autotests/pageObjects/pages';
+import {createClientFunction, expect} from 'e2ed';
+import {
+  getBrowserConsoleMessages,
+  getBrowserJsErrors,
+  navigateToPage,
+  setPageElementsIgnoredOnInterfaceStabilization,
+  waitForInterfaceStabilization,
+} from 'e2ed/actions';
+
+it('correctly read data from browser', {meta: {testId: '14'}}, async () => {
+  await navigateToPage(E2edReportExample);
+
+  await setPageElementsIgnoredOnInterfaceStabilization(['.retry']);
+
+  await waitForInterfaceStabilization(100);
+
+  await createClientFunction(() => {
+    console.error('error');
+    console.info('info');
+    console.log('log');
+    console.warn('warn');
+
+    const key = Symbol.for('e2ed:PageElementsIgnoredOnInterfaceStabilization');
+    const global = globalThis as {[key]?: readonly string[] | undefined};
+
+    console.log(global[key]);
+
+    setTimeout(() => {
+      throw new Error('foo');
+    }, 8);
+    setTimeout(() => {
+      throw new Error('bar');
+    }, 32);
+  })();
+
+  const {error, info, log, warn} = await getBrowserConsoleMessages();
+
+  await expect(
+    error[0] === 'error' && info[0] === 'info' && log[0] === 'log' && warn[0] === 'warn',
+    '`getBrowserConsoleMessages` read all of messages',
+  ).eql(true);
+
+  await expect(log[1], '`setPageElementsIgnoredOnInterfaceStabilization` works correct').eql(
+    '.retry',
+  );
+
+  const jsErrors = await getBrowserJsErrors();
+
+  await expect(
+    jsErrors.length === 2 && jsErrors[0]?.message === 'foo' && jsErrors[1]?.message === 'bar',
+    '`getBrowserJsErrors` read JS errors',
+  ).eql(true);
+});

autotests/tests/main/exists.ts

@@ -38,7 +38,9 @@ it('exists', {meta: {testId: '1'}, testIdleTimeout: 35_000, testTimeout: 90_000}
 
   const mainPage = await navigateToPage(Main, {language});
 
-  await expect(mainPage.pageParams, 'pageParams is correct after navigateToPage').eql({language});
+  await expect(mainPage.pageParams, '`pageParams` is correct after `navigateToPage`').eql({
+    language,
+  });
 
   await expect(mainPage.searchString, 'search string is empty').eql('');
 
@@ -67,7 +69,9 @@ it('exists', {meta: {testId: '1'}, testIdleTimeout: 35_000, testTimeout: 90_000}
    * Do not use the following pageParams and url (by getParamsFromUrl) checks in your code.
    * These are e2ed internal checks. Use `assertPage` instead.
    */
-  await expect(searchPage.pageParams, 'pageParams is correct after assertPage').eql({searchQuery});
+  await expect(searchPage.pageParams, '`pageParams` is correct after `assertPage`').eql({
+    searchQuery,
+  });
 
   const url = await getDocumentUrl();
 

src/actions/getBrowserConsoleMessages.ts

@@ -2,11 +2,9 @@ import {LogEventType} from '../constants/internal';
 import {testController} from '../testController';
 import {log} from '../utils/log';
 
-type ConsoleMessages = ReturnType<typeof testController.getBrowserConsoleMessages> extends Promise<
-  infer Type
->
-  ? Type
-  : never;
+import type {UnwrapPromise} from '../types/internal';
+
+type ConsoleMessages = UnwrapPromise<ReturnType<typeof testController.getBrowserConsoleMessages>>;
 
 /**
  * Returns an object that contains messages output to the browser console.

src/actions/getBrowserJsErrors.ts

@@ -0,0 +1,29 @@
+import {LogEventType} from '../constants/internal';
+import {createClientFunction} from '../createClientFunction';
+import {log} from '../utils/log';
+
+import type {BrowserJsError} from '../types/internal';
+
+const clientGetBrowserJsErrors = createClientFunction(
+  (): readonly BrowserJsError[] => {
+    const key = Symbol.for('e2ed:JsErrors');
+    const global = window as {[key]?: BrowserJsError[]};
+    // eslint-disable-next-line no-multi-assign
+    const errors = (global[key] ??= []);
+    const copyOfErrors = [...errors];
+
+    errors.length = 0;
+
+    return copyOfErrors;
+  },
+  {name: 'getBrowserJsErrors'},
+);
+
+/**
+ * Get browser JS errors.
+ */
+export const getBrowserJsErrors = (): Promise<readonly BrowserJsError[]> => {
+  log('Get browser JS errors', LogEventType.InternalAction);
+
+  return clientGetBrowserJsErrors();
+};

src/actions/index.ts

@@ -15,6 +15,7 @@ export {doubleClick} from './doubleClick';
 export {drag} from './drag';
 export {dragToElement} from './dragToElement';
 export {getBrowserConsoleMessages} from './getBrowserConsoleMessages';
+export {getBrowserJsErrors} from './getBrowserJsErrors';
 export {getCookies} from './getCookies';
 export {hover} from './hover';
 export {mockApiRoute, unmockApiRoute} from './mock';
@@ -38,6 +39,7 @@ export {setCookies} from './setCookies';
 export {setFilesToUpload} from './setFilesToUpload';
 export {setHeadersAndNavigateToUrl} from './setHeadersAndNavigateToUrl';
 export {setNativeDialogHandler} from './setNativeDialogHandler';
+export {setPageElementsIgnoredOnInterfaceStabilization} from './setPageElementsIgnoredOnInterfaceStabilization';
 export {switchToIframe} from './switchToIframe';
 export {takeElementScreenshot} from './takeElementScreenshot';
 export {takeScreenshot} from './takeScreenshot';

src/actions/setPageElementsIgnoredOnInterfaceStabilization.ts

@@ -0,0 +1,29 @@
+import {LogEventType} from '../constants/internal';
+import {createClientFunction} from '../createClientFunction';
+import {log} from '../utils/log';
+
+const clientSetPageElementsIgnoredOnInterfaceStabilization = createClientFunction(
+  (elementsCssSelectors: readonly string[]) => {
+    const key = Symbol.for('e2ed:PageElementsIgnoredOnInterfaceStabilization');
+    const global = globalThis as {[key]?: readonly string[] | undefined};
+
+    global[key] = elementsCssSelectors;
+  },
+  {name: 'setPageElementsIgnoredOnInterfaceStabilization'},
+);
+
+/**
+ * Set an array of elements (by their string CSS selectors) that will be ignored
+ * when determining the end of interface stabilization (these are usually animated elements).
+ */
+export const setPageElementsIgnoredOnInterfaceStabilization = (
+  elementsCssSelectors: readonly string[],
+): Promise<void> => {
+  log(
+    'Set page element that will be ignored when determining the end of interface stabilization',
+    {elementsCssSelectors},
+    LogEventType.InternalAction,
+  );
+
+  return clientSetPageElementsIgnoredOnInterfaceStabilization(elementsCssSelectors);
+};