fix tests

packages/playwright/src/isomorphic/testServerInterface.ts

@@ -16,6 +16,8 @@
 
 import type * as reporterTypes from '../../types/testReporter';
 import type { Event } from './events';
+import type { BrowserContextOptions } from 'playwright-core';
+import type { BrowserTypeLaunchOptions } from '@protocol/channels';
 
 export interface TestServerInterface {
   ping(): Promise<void>;
@@ -40,7 +42,16 @@ export interface TestServerInterface {
     projects: {
       name: string;
       testDir: string;
-      use: { testIdAttribute?: string };
+      use: {
+        testIdAttribute?: string;
+        browserName?: string;
+        // User facing options which might relevant for codegen in VSCode:
+        contextOptions: Pick<BrowserContextOptions, 'viewport'
+          | 'ignoreHTTPSErrors' | 'javaScriptEnabled' | 'bypassCSP'
+          | 'userAgent' | 'locale' | 'timezoneId' | 'geolocation' | 'permissions'
+          | 'offline' | 'storageState' | 'extraHTTPHeaders'>;
+        launchOptions: Pick<BrowserTypeLaunchOptions, 'args' | 'channel'>
+       };
       files: string[];
     }[];
     cliEntryPoint?: string;

packages/playwright/src/runner/runner.ts

@@ -33,7 +33,7 @@ import type { Suite } from '../common/test';
 import { wrapReporterAsV2 } from '../reporters/reporterV2';
 import { affectedTestFiles } from '../transform/compilationCache';
 import { installRootRedirect, openTraceInBrowser, openTraceViewerApp } from 'playwright-core/lib/server';
-import type { BrowserContextOptions } from 'playwright-core/lib/client/types';
+import type { BrowserContextOptions } from 'playwright-core';
 import type { BrowserTypeLaunchOptions } from '@protocol/channels';
 
 type ProjectConfigWithFiles = {

tests/library/debug-controller.spec.ts

@@ -18,10 +18,10 @@ import { expect, playwrightTest as baseTest } from '../config/browserTest';
 import { PlaywrightServer } from '../../packages/playwright-core/lib/remote/playwrightServer';
 import { createGuid } from '../../packages/playwright-core/lib/utils/crypto';
 import { Backend } from '../config/debugControllerBackend';
-import type { Browser, BrowserContext } from '@playwright/test';
+import type { Browser, BrowserContext, BrowserContextOptions } from '@playwright/test';
 import type * as channels from '@protocol/channels';
 
-type BrowserWithReuse = Browser & { _newContextForReuse: () => Promise<BrowserContext> };
+type BrowserWithReuse = Browser & { _newContextForReuse: (options?: BrowserContextOptions) => Promise<BrowserContext> };
 type Fixtures = {
   wsEndpoint: string;
   backend: channels.DebugControllerChannel;
@@ -238,10 +238,6 @@ test('test', async ({ page }) => {
   });
 });
 
-// Some test cases to think about:
-// - Record in Chromium, stop recording, record in Firefox. Make sure that Firefox got launched and Chromium got closed.
-// - Record in Chromium with some context options, stop recording. Record in Chromium with different context options. Make sure that Chromium got reused and context got re-applied.
-
 test('should record with a new browser if triggered with different browserName', async ({ wsEndpoint, playwright, backend }) => {
   // This test emulates when the user records a test, stops recording, and then records another test with a different browserName
 
@@ -280,9 +276,9 @@ test('should record with a new browser if triggered with different browserName',
         'x-playwright-reuse-context': '1',
       }
     }) as BrowserWithReuse;
+    expect(browser.browserType().name()).toBe('firefox');
     const context = await browser._newContextForReuse();
     const page = context.pages()[0];
-    console.log(await page.evaluate(() => navigator.userAgent))
     await page.setContent('<button>Submit</button>');
     await page.getByRole('button').click();
   }
@@ -306,23 +302,79 @@ test('test', async ({ page }) => {
   });
 });
 
+test('should record with same browser but re-applied context options if triggered with different contextOptions', async ({ playwright, wsEndpoint, backend,  }) => {
+  // This test emulates when the user records a test, stops recording, and then records another test with different contextOptions
+
+  const events = [];
+  backend.on('sourceChanged', event => events.push(event));
+
+  // 1. Start Recording
+  await backend.setRecorderMode({ mode: 'recording' });
+  const browser = await playwright.chromium.connect(wsEndpoint, {
+    headers: {
+      'x-playwright-reuse-context': '1',
+    }
+  }) as BrowserWithReuse;
+  const context = await browser._newContextForReuse({ userAgent: 'hello 123', viewport: { width: 1111, height: 1111 } });
+  expect(context.pages().length).toBe(1);
+
+  // 2. Record a click action.
+  const page = context.pages()[0];
+  await page.setContent('<button>Submit</button>');
+  await page.getByRole('button').click();
+  expect(await page.evaluate(() => window.innerWidth)).toBe(1111);
+  expect(await page.evaluate(() => window.innerHeight)).toBe(1111);
+  expect(await page.evaluate(() => navigator.userAgent)).toBe('hello 123');
+
+  // 3. Stop recording.
+  await backend.setRecorderMode({ mode: 'none' });
+
+  // 4. Start recording again with different contextOptions.
+  await backend.setRecorderMode({ mode: 'recording', contextOptions: { userAgent: 'hello 345', viewport: { width: 500, height: 500 } } });
+  expect(context.pages().length).toBe(1);
+  expect(await page.evaluate(() => window.innerWidth)).toBe(500);
+  expect(await page.evaluate(() => window.innerHeight)).toBe(500);
+  expect(await page.evaluate(() => navigator.userAgent)).toBe('hello 345');
+
+  // 5. Record another click action.
+  await page.getByRole('button').click();
+
+  // 6. Expect the click action to be recorded.
+  await expect.poll(() => events[events.length - 1]).toEqual({
+    header: `import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {`,
+    footer: `});`,
+    actions: [
+      `  await page.getByRole('button', { name: 'Submit' }).click();`,
+    ],
+    text: `import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.getByRole('button', { name: 'Submit' }).click();
+});`
+  });
+});
+
 test('should record custom data-testid', async ({ backend, connectedBrowser }) => {
   // This test emulates "record at cursor" functionality
   // with custom test id attribute in the config.
 
   const events = [];
   backend.on('sourceChanged', event => events.push(event));
-
   // 1. "Show browser" (or "run test").
-  const context = await connectedBrowser._newContextForReuse();
-  const page = await context.newPage();
-  await page.setContent(`<div data-custom-id='one'>One</div>`);
-
+  {
+    const page = await connectedBrowser._newContextForReuse().then(context => context.newPage());
+    await page.setContent(`<div data-custom-id='one'>One</div>`);
+  }
   // 2. "Record at cursor".
   await backend.setRecorderMode({ mode: 'recording', testIdAttributeName: 'data-custom-id' });
 
   // 3. Record a click action.
-  await page.locator('div').click();
+  {
+    const page = (connectedBrowser.contexts())[0].pages()[0];
+    await page.locator('div').click();
+  }
 
   // 4. Expect "getByTestId" locator.
   await expect.poll(() => events[events.length - 1]).toEqual({