PRO-15160 feat: add test options viewportHeight and viewportWidth

fix: action `resizeWindow`

Author: uid11

autotests/tests/e2edReportExample/browserData.ts

@@ -10,50 +10,56 @@ import {
   waitForInterfaceStabilization,
 } from 'e2ed/actions';
 
-test('correctly read data from browser', {meta: {testId: '14'}}, async () => {
-  await navigateToPage(E2edReportExample);
-
-  await createClientFunction(() => {
-    console.error('error');
-    console.info('info');
-    console.log('log');
-    console.warn('warning');
-
-    setTimeout(() => {
-      throw new Error('foo');
-    }, 100);
-  })();
-
-  const consoleMessages = getBrowserConsoleMessages();
-  const columnNumber = 12;
-  const url = '';
-
-  const consoleMessagesWithoutDate = consoleMessages.map(
-    ({dateTimeInIso: _, ...messageWithoutDate}) => messageWithoutDate,
-  );
-
-  await expect(consoleMessagesWithoutDate, 'getBrowserConsoleMessages read all of messages').eql([
-    {args: ['error'], location: {columnNumber, lineNumber: 3, url}, text: 'error', type: 'error'},
-    {args: ['info'], location: {columnNumber, lineNumber: 4, url}, text: 'info', type: 'info'},
-    {args: ['log'], location: {columnNumber, lineNumber: 5, url}, text: 'log', type: 'log'},
-    {
-      args: ['warning'],
-      location: {columnNumber, lineNumber: 6, url},
-      text: 'warning',
-      type: 'warning',
-    },
-  ]);
-
-  const jsErrors = getBrowserJsErrors();
-
-  await expect(
-    jsErrors.length,
-    'getBrowserJsErrors read zero JS errors when there are no errors',
-  ).eql(0);
-
-  await waitForInterfaceStabilization(100);
-
-  await expect(jsErrors.length, 'getBrowserJsErrors read all JS errors').eql(1);
-
-  await expect(String(jsErrors[0]?.error), 'getBrowserJsErrors read all JS errors').contains('foo');
-});
+test(
+  'correctly read data from browser',
+  {meta: {testId: '14'}, viewportHeight: 1200, viewportWidth: 1600},
+  async () => {
+    await navigateToPage(E2edReportExample);
+
+    await createClientFunction(() => {
+      console.error('error');
+      console.info('info');
+      console.log('log');
+      console.warn('warning');
+
+      setTimeout(() => {
+        throw new Error('foo');
+      }, 100);
+    })();
+
+    const consoleMessages = getBrowserConsoleMessages();
+    const columnNumber = 12;
+    const url = '';
+
+    const consoleMessagesWithoutDate = consoleMessages.map(
+      ({dateTimeInIso: _, ...messageWithoutDate}) => messageWithoutDate,
+    );
+
+    await expect(consoleMessagesWithoutDate, 'getBrowserConsoleMessages read all of messages').eql([
+      {args: ['error'], location: {columnNumber, lineNumber: 3, url}, text: 'error', type: 'error'},
+      {args: ['info'], location: {columnNumber, lineNumber: 4, url}, text: 'info', type: 'info'},
+      {args: ['log'], location: {columnNumber, lineNumber: 5, url}, text: 'log', type: 'log'},
+      {
+        args: ['warning'],
+        location: {columnNumber, lineNumber: 6, url},
+        text: 'warning',
+        type: 'warning',
+      },
+    ]);
+
+    const jsErrors = getBrowserJsErrors();
+
+    await expect(
+      jsErrors.length,
+      'getBrowserJsErrors read zero JS errors when there are no errors',
+    ).eql(0);
+
+    await waitForInterfaceStabilization(100);
+
+    await expect(jsErrors.length, 'getBrowserJsErrors read all JS errors').eql(1);
+
+    await expect(String(jsErrors[0]?.error), 'getBrowserJsErrors read all JS errors').contains(
+      'foo',
+    );
+  },
+);

src/actions/resizeWindow.ts

@@ -1,15 +1,17 @@
 import {LogEventType} from '../constants/internal';
+import {getPlaywrightPage} from '../useContext';
 import {log} from '../utils/log';
 
 /**
  * Set the browser window size.
  */
-export const resizeWindow = (width: number, height: number): Promise<void> => {
+export const resizeWindow = async (width: number, height: number): Promise<void> => {
   log(
     `Set the browser window size to width ${width} and height ${height}`,
     LogEventType.InternalAction,
   );
 
-  // TODO
-  return Promise.resolve();
+  const page = getPlaywrightPage();
+
+  await page.setViewportSize({height, width});
 };

src/test.ts

@@ -32,5 +32,11 @@ export const test: TestFunction = (name, options, testFn) => {
     playwrightTest.use({bypassCSP: !options.enableCsp});
   }
 
+  if (options.viewportHeight !== undefined && options.viewportWidth !== undefined) {
+    playwrightTest.use({
+      viewport: {height: options.viewportHeight, width: options.viewportWidth},
+    });
+  }
+
   playwrightTest(playwrightTestName, runTest);
 };

src/types/testRun.ts

@@ -69,14 +69,19 @@ export type TestFn = (testController: PlaywrightTestArgs) => Promise<void>;
 /**
  * Test options with userland metadata.
  */
-export type TestOptions<TestMeta = TestMetaPlaceholder> = DeepReadonly<{
-  enableCsp?: boolean;
-  meta: TestMeta;
-  takeFullPageScreenshotOnError?: boolean;
-  takeViewportScreenshotOnError?: boolean;
-  testIdleTimeout?: number;
-  testTimeout?: number;
-}>;
+export type TestOptions<TestMeta = TestMetaPlaceholder> = DeepReadonly<
+  {
+    enableCsp?: boolean;
+    meta: TestMeta;
+    takeFullPageScreenshotOnError?: boolean;
+    takeViewportScreenshotOnError?: boolean;
+    testIdleTimeout?: number;
+    testTimeout?: number;
+  } & (
+    | {viewportHeight: number; viewportWidth: number}
+    | {viewportHeight?: undefined; viewportWidth?: undefined}
+  )
+>;
 
 /**
  * The complete static test options, that is, the options