Merge branch 'main' into feat-extend-custom-asymmetric-matchers

2024-09-23 08:43:28 +02:00 · 2024-09-23 08:43:28 +02:00 · 4fc4b76b6c
parent 4d44faf911 b3a82bef46
commit 4fc4b76b6c
45 changed files with 4427 additions and 345 deletions
--- a/.github/workflows/tests_bidi.yml
+++ b/.github/workflows/tests_bidi.yml
@ -26,7 +26,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        channel: [bidi-chromium, bidi-firefox-beta]
+        channel: [bidi-chromium, bidi-firefox-nightly]
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
@ -38,8 +38,8 @@ jobs:
    - run: npm run build
    - run: npx playwright install --with-deps chromium
      if: matrix.channel == 'bidi-chromium'
-    - run: npx -y @puppeteer/browsers install firefox@beta
-      if: matrix.channel == 'bidi-firefox-beta'
+    - run: npx -y @puppeteer/browsers install firefox@nightly
+      if: matrix.channel == 'bidi-firefox-nightly'
    - name: Run tests
      run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run biditest -- --project=${{ matrix.channel }}*
      env:
--- a/packages/playwright-core/src/cli/program.ts
+++ b/packages/playwright-core/src/cli/program.ts
@ -397,7 +397,7 @@ async function launchContext(options: Options, extraOptions: LaunchOptions): Pro
      process.stdout.write('\n-------------8<-------------\n');
      const autoExitCondition = process.env.PWTEST_CLI_AUTO_EXIT_WHEN;
      if (autoExitCondition && text.includes(autoExitCondition))
-        Promise.all(context.pages().map(async p => p.close()));
+        closeBrowser();
    };
    // Make sure we exit abnormally when browser crashes.
    const logs: string[] = [];
@ -504,7 +504,7 @@ async function launchContext(options: Options, extraOptions: LaunchOptions): Pro
      if (hasPage)
        return;
      // Avoid the error when the last page is closed because the browser has been closed.
-      closeBrowser().catch(e => null);
+      closeBrowser().catch(() => {});
    });
  });
  process.on('SIGINT', async () => {
@ -560,7 +560,7 @@ async function open(options: Options, url: string | undefined, language: string)

 async function codegen(options: Options & { target: string, output?: string, testIdAttribute?: string }, url: string | undefined) {
  const { target: language, output: outputFile, testIdAttribute: testIdAttributeName } = options;
-  const tracesDir = path.join(os.tmpdir(), `recorder-trace-${Date.now()}`);
+  const tracesDir = path.join(os.tmpdir(), `playwright-recorder-trace-${Date.now()}`);
  const { context, launchOptions, contextOptions } = await launchContext(options, {
    headless: !!process.env.PWTEST_CLI_HEADLESS,
    executablePath: process.env.PWTEST_CLI_EXECUTABLE_PATH,
@ -574,6 +574,7 @@ async function codegen(options: Options & { target: string, output?: string, tes
    device: options.device,
    saveStorage: options.saveStorage,
    mode: 'recording',
+    codegenMode: process.env.PW_RECORDER_IS_TRACE_VIEWER ? 'trace-events' : 'actions',
    testIdAttributeName,
    outputFile: outputFile ? path.resolve(outputFile) : undefined,
  });
--- a/packages/playwright-core/src/client/browserContext.ts
+++ b/packages/playwright-core/src/client/browserContext.ts
@ -220,7 +220,7 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
    }
    // If the page is closed or unrouteAll() was called without waiting and interception disabled,
    // the method will throw an error - silence it.
-    await route._innerContinue(true).catch(() => {});
+    await route._innerContinue(true /* isFallback */).catch(() => {});
  }

  async _onWebSocketRoute(webSocketRoute: network.WebSocketRoute) {
@ -492,17 +492,8 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
    await this._closedPromise;
  }

-  async _enableRecorder(params: {
-      language: string,
-      launchOptions?: LaunchOptions,
-      contextOptions?: BrowserContextOptions,
-      device?: string,
-      saveStorage?: string,
-      mode?: 'recording' | 'inspecting',
-      testIdAttributeName?: string,
-      outputFile?: string,
-  }) {
-    await this._channel.recorderSupplementEnable(params);
+  async _enableRecorder(params: channels.BrowserContextEnableRecorderParams) {
+    await this._channel.enableRecorder(params);
  }
 }

--- a/packages/playwright-core/src/client/channelOwner.ts
+++ b/packages/playwright-core/src/client/channelOwner.ts
@ -40,6 +40,7 @@ export abstract class ChannelOwner<T extends channels.Channel = channels.Channel
  _logger: Logger | undefined;
  readonly _instrumentation: ClientInstrumentation;
  private _eventToSubscriptionMapping: Map<string, string> = new Map();
+  private _isInternalType = false;
  _wasCollected: boolean = false;

  constructor(parent: ChannelOwner | Connection, type: string, guid: string, initializer: channels.InitializerTraits<T>) {
@ -61,6 +62,10 @@ export abstract class ChannelOwner<T extends channels.Channel = channels.Channel
    this._initializer = initializer;
  }

+  protected markAsInternalType() {
+    this._isInternalType = true;
+  }
+
  _setEventToSubscriptionMapping(mapping: Map<string, string>) {
    this._eventToSubscriptionMapping = mapping;
  }
@ -173,7 +178,7 @@ export abstract class ChannelOwner<T extends channels.Channel = channels.Channel
    let apiName: string | undefined = stackTrace.apiName;
    const frames: channels.StackFrame[] = stackTrace.frames;

-    isInternal = isInternal || this._type === 'LocalUtils';
+    isInternal = isInternal || this._isInternalType;
    if (isInternal)
      apiName = undefined;

--- a/packages/playwright-core/src/client/localUtils.ts
+++ b/packages/playwright-core/src/client/localUtils.ts
@ -33,6 +33,7 @@ export class LocalUtils extends ChannelOwner<channels.LocalUtilsChannel> {

  constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.LocalUtilsInitializer) {
    super(parent, type, guid, initializer);
+    this.markAsInternalType();
    this.devices = {};
    for (const { name, descriptor } of initializer.deviceDescriptors)
      this.devices[name] = descriptor;
--- a/packages/playwright-core/src/client/network.ts
+++ b/packages/playwright-core/src/client/network.ts
@ -299,6 +299,7 @@ export class Route extends ChannelOwner<channels.RouteChannel> implements api.Ro

  constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.RouteInitializer) {
    super(parent, type, guid, initializer);
+    this.markAsInternalType();
  }

  request(): Request {
@ -325,7 +326,7 @@ export class Route extends ChannelOwner<channels.RouteChannel> implements api.Ro

  async abort(errorCode?: string) {
    await this._handleRoute(async () => {
-      await this._raceWithTargetClose(this._channel.abort({ requestUrl: this.request()._initializer.url, errorCode }));
+      await this._raceWithTargetClose(this._channel.abort({ errorCode }));
    });
  }

@ -409,7 +410,6 @@ export class Route extends ChannelOwner<channels.RouteChannel> implements api.Ro
      headers['content-length'] = String(length);

    await this._raceWithTargetClose(this._channel.fulfill({
-      requestUrl: this.request()._initializer.url,
      status: statusOption || 200,
      headers: headersObjectToArray(headers),
      body,
@ -421,7 +421,7 @@ export class Route extends ChannelOwner<channels.RouteChannel> implements api.Ro
  async continue(options: FallbackOverrides = {}) {
    await this._handleRoute(async () => {
      this.request()._applyFallbackOverrides(options);
-      await this._innerContinue();
+      await this._innerContinue(false /* isFallback */);
    });
  }

@ -436,18 +436,15 @@ export class Route extends ChannelOwner<channels.RouteChannel> implements api.Ro
    chain.resolve(done);
  }

-  async _innerContinue(internal = false) {
+  async _innerContinue(isFallback: boolean) {
    const options = this.request()._fallbackOverridesForContinue();
-    return await this._wrapApiCall(async () => {
-      await this._raceWithTargetClose(this._channel.continue({
-        requestUrl: this.request()._initializer.url,
+    return await this._raceWithTargetClose(this._channel.continue({
      url: options.url,
      method: options.method,
      headers: options.headers ? headersObjectToArray(options.headers) : undefined,
      postData: options.postDataBuffer,
-        isFallback: internal,
+      isFallback,
    }));
-    }, !!internal);
  }
 }

--- a/packages/playwright-core/src/client/tracing.ts
+++ b/packages/playwright-core/src/client/tracing.ts
@ -31,20 +31,18 @@ export class Tracing extends ChannelOwner<channels.TracingChannel> implements ap

  constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.TracingInitializer) {
    super(parent, type, guid, initializer);
+    this.markAsInternalType();
  }

  async start(options: { name?: string, title?: string, snapshots?: boolean, screenshots?: boolean, sources?: boolean, _live?: boolean } = {}) {
    this._includeSources = !!options.sources;
-    const traceName = await this._wrapApiCall(async () => {
    await this._channel.tracingStart({
      name: options.name,
      snapshots: options.snapshots,
      screenshots: options.screenshots,
      live: options._live,
    });
-      const response = await this._channel.tracingStartChunk({ name: options.name, title: options.title });
-      return response.traceName;
-    }, true);
+    const { traceName } = await this._channel.tracingStartChunk({ name: options.name, title: options.title });
    await this._startCollectingStacks(traceName);
  }

@ -63,16 +61,12 @@ export class Tracing extends ChannelOwner<channels.TracingChannel> implements ap
  }

  async stopChunk(options: { path?: string } = {}) {
-    await this._wrapApiCall(async () => {
    await this._doStopChunk(options.path);
-    }, true);
  }

  async stop(options: { path?: string } = {}) {
-    await this._wrapApiCall(async () => {
    await this._doStopChunk(options.path);
    await this._channel.tracingStop();
-    }, true);
  }

  private async _doStopChunk(filePath: string | undefined) {
--- a/packages/playwright-core/src/protocol/validator.ts
+++ b/packages/playwright-core/src/protocol/validator.ts
@ -965,9 +965,10 @@ scheme.BrowserContextStorageStateResult = tObject({
 });
 scheme.BrowserContextPauseParams = tOptional(tObject({}));
 scheme.BrowserContextPauseResult = tOptional(tObject({}));
-scheme.BrowserContextRecorderSupplementEnableParams = tObject({
+scheme.BrowserContextEnableRecorderParams = tObject({
  language: tOptional(tString),
  mode: tOptional(tEnum(['inspecting', 'recording'])),
+  codegenMode: tOptional(tEnum(['actions', 'trace-events'])),
  pauseOnNextStatement: tOptional(tBoolean),
  testIdAttributeName: tOptional(tString),
  launchOptions: tOptional(tAny),
@ -977,7 +978,7 @@ scheme.BrowserContextRecorderSupplementEnableParams = tObject({
  outputFile: tOptional(tString),
  omitCallTracking: tOptional(tBoolean),
 });
-scheme.BrowserContextRecorderSupplementEnableResult = tOptional(tObject({}));
+scheme.BrowserContextEnableRecorderResult = tOptional(tObject({}));
 scheme.BrowserContextNewCDPSessionParams = tObject({
  page: tOptional(tChannel(['Page'])),
  frame: tOptional(tChannel(['Frame'])),
@ -2115,7 +2116,6 @@ scheme.RouteRedirectNavigationRequestParams = tObject({
 scheme.RouteRedirectNavigationRequestResult = tOptional(tObject({}));
 scheme.RouteAbortParams = tObject({
  errorCode: tOptional(tString),
-  requestUrl: tString,
 });
 scheme.RouteAbortResult = tOptional(tObject({}));
 scheme.RouteContinueParams = tObject({
@ -2123,7 +2123,6 @@ scheme.RouteContinueParams = tObject({
  method: tOptional(tString),
  headers: tOptional(tArray(tType('NameValue'))),
  postData: tOptional(tBinary),
-  requestUrl: tString,
  isFallback: tBoolean,
 });
 scheme.RouteContinueResult = tOptional(tObject({}));
@ -2133,7 +2132,6 @@ scheme.RouteFulfillParams = tObject({
  body: tOptional(tString),
  isBase64: tOptional(tBoolean),
  fetchResponseUid: tOptional(tString),
-  requestUrl: tString,
 });
 scheme.RouteFulfillResult = tOptional(tObject({}));
 scheme.WebSocketRouteInitializer = tObject({
--- a/packages/playwright-core/src/server/browserContext.ts
+++ b/packages/playwright-core/src/server/browserContext.ts
@ -131,15 +131,15 @@ export abstract class BrowserContext extends SdkObject {

    // When PWDEBUG=1, show inspector for each context.
    if (debugMode() === 'inspector')
-      await Recorder.show(this, RecorderApp.factory(this), { pauseOnNextStatement: true });
+      await Recorder.show('actions', this, RecorderApp.factory(this), { pauseOnNextStatement: true });

    // When paused, show inspector.
    if (this._debugger.isPaused())
-      Recorder.showInspector(this, RecorderApp.factory(this));
+      Recorder.showInspectorNoReply(this, RecorderApp.factory(this));

    this._debugger.on(Debugger.Events.PausedStateChanged, () => {
      if (this._debugger.isPaused())
-        Recorder.showInspector(this, RecorderApp.factory(this));
+        Recorder.showInspectorNoReply(this, RecorderApp.factory(this));
    });

    if (debugMode() === 'console')
@ -525,7 +525,7 @@ export abstract class BrowserContext extends SdkObject {
      const internalMetadata = serverSideCallMetadata();
      const page = await this.newPage(internalMetadata);
      await page._setServerRequestInterceptor(handler => {
-        handler.fulfill({ body: '<html></html>', requestUrl: handler.request().url() }).catch(() => {});
+        handler.fulfill({ body: '<html></html>' }).catch(() => {});
        return true;
      });
      for (const origin of originsToSave) {
@ -559,7 +559,7 @@ export abstract class BrowserContext extends SdkObject {
      isServerSide: false,
    });
    await page._setServerRequestInterceptor(handler => {
-      handler.fulfill({ body: '<html></html>', requestUrl: handler.request().url() }).catch(() => {});
+      handler.fulfill({ body: '<html></html>' }).catch(() => {});
      return true;
    });

@ -594,7 +594,7 @@ export abstract class BrowserContext extends SdkObject {
        const internalMetadata = serverSideCallMetadata();
        const page = await this.newPage(internalMetadata);
        await page._setServerRequestInterceptor(handler => {
-          handler.fulfill({ body: '<html></html>', requestUrl: handler.request().url() }).catch(() => {});
+          handler.fulfill({ body: '<html></html>' }).catch(() => {});
          return true;
        });
        for (const originState of state.origins) {
--- a/packages/playwright-core/src/server/debugController.ts
+++ b/packages/playwright-core/src/server/debugController.ts
@ -197,7 +197,7 @@ export class DebugController extends SdkObject {
    const contexts = new Set<BrowserContext>();
    for (const page of this._playwright.allPages())
      contexts.add(page.context());
-    const result = await Promise.all([...contexts].map(c => Recorder.show(c, () => Promise.resolve(new InspectingRecorderApp(this)), { omitCallTracking: true })));
+    const result = await Promise.all([...contexts].map(c => Recorder.showInspector(c, { omitCallTracking: true }, () => Promise.resolve(new InspectingRecorderApp(this)))));
    return result.filter(Boolean) as Recorder[];
  }

--- a/packages/playwright-core/src/server/dialog.ts
+++ b/packages/playwright-core/src/server/dialog.ts
@ -39,6 +39,7 @@ export class Dialog extends SdkObject {
    this._onHandle = onHandle;
    this._defaultValue = defaultValue || '';
    this._page._frameManager.dialogDidOpen(this);
+    this.instrumentation.onDialog(this);
  }

  page() {
--- a/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts
@ -41,7 +41,6 @@ import { serializeError } from '../errors';
 import { ElementHandleDispatcher } from './elementHandlerDispatcher';
 import { RecorderInTraceViewer } from '../recorder/recorderInTraceViewer';
 import { RecorderApp } from '../recorder/recorderApp';
-import type { IRecorderAppFactory } from '../recorder/recorderFrontend';
 import { WebSocketRouteDispatcher } from './webSocketRouteDispatcher';

 export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channels.BrowserContextChannel, DispatcherScope> implements channels.BrowserContextChannel {
@ -301,21 +300,18 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
    await this._context.close(params);
  }

-  async recorderSupplementEnable(params: channels.BrowserContextRecorderSupplementEnableParams): Promise<void> {
-    let factory: IRecorderAppFactory;
-    if (process.env.PW_RECORDER_IS_TRACE_VIEWER) {
-      factory = RecorderInTraceViewer.factory(this._context);
+  async enableRecorder(params: channels.BrowserContextEnableRecorderParams): Promise<void> {
+    if (params.codegenMode === 'trace-events') {
      await this._context.tracing.start({
        name: 'trace',
        snapshots: true,
-        screenshots: false,
+        screenshots: true,
        live: true,
      });
-      await this._context.tracing.startChunk({ name: 'trace', title: 'trace' });
+      await Recorder.show('trace-events', this._context, RecorderInTraceViewer.factory(this._context), params);
    } else {
-      factory = RecorderApp.factory(this._context);
+      await Recorder.show('actions', this._context, RecorderApp.factory(this._context), params);
    }
-    await Recorder.show(this._context, factory, params);
  }

  async pause(params: channels.BrowserContextPauseParams, metadata: CallMetadata) {
--- a/packages/playwright-core/src/server/download.ts
+++ b/packages/playwright-core/src/server/download.ts
@ -35,16 +35,25 @@ export class Download {
    this._suggestedFilename = suggestedFilename;
    page._browserContext._downloads.add(this);
    if (suggestedFilename !== undefined)
-      this._page.emit(Page.Events.Download, this);
+      this._fireDownloadEvent();
+  }
+
+  page(): Page {
+    return this._page;
  }

  _filenameSuggested(suggestedFilename: string) {
    assert(this._suggestedFilename === undefined);
    this._suggestedFilename = suggestedFilename;
-    this._page.emit(Page.Events.Download, this);
+    this._fireDownloadEvent();
  }

  suggestedFilename(): string {
    return this._suggestedFilename!;
  }
+
+  private _fireDownloadEvent() {
+    this._page.instrumentation.onDownload(this._page, this);
+    this._page.emit(Page.Events.Download, this);
+  }
 }
--- a/packages/playwright-core/src/server/instrumentation.ts
+++ b/packages/playwright-core/src/server/instrumentation.ts
@ -35,6 +35,8 @@ export type Attribution = {
 };

 import type { CallMetadata } from '@protocol/callMetadata';
+import type { Dialog } from './dialog';
+import type { Download } from './download';
 export type { CallMetadata } from '@protocol/callMetadata';

 export class SdkObject extends EventEmitter {
@ -62,6 +64,8 @@ export interface Instrumentation {
  onPageClose(page: Page): void;
  onBrowserOpen(browser: Browser): void;
  onBrowserClose(browser: Browser): void;
+  onDialog(dialog: Dialog): void;
+  onDownload(page: Page, download: Download): void;
 }

 export interface InstrumentationListener {
@ -73,6 +77,8 @@ export interface InstrumentationListener {
  onPageClose?(page: Page): void;
  onBrowserOpen?(browser: Browser): void;
  onBrowserClose?(browser: Browser): void;
+  onDialog?(dialog: Dialog): void;
+  onDownload?(page: Page, download: Download): void;
 }

 export function createInstrumentation(): Instrumentation {
--- a/packages/playwright-core/src/server/recorder.ts
+++ b/packages/playwright-core/src/server/recorder.ts
@ -45,32 +45,35 @@ export class Recorder implements InstrumentationListener, IRecorder {
  private _omitCallTracking = false;
  private _currentLanguage: Language;

-  static showInspector(context: BrowserContext, recorderAppFactory: IRecorderAppFactory) {
-    const params: channels.BrowserContextRecorderSupplementEnableParams = {};
+  static async showInspector(context: BrowserContext, params: channels.BrowserContextEnableRecorderParams, recorderAppFactory: IRecorderAppFactory) {
    if (isUnderTest())
      params.language = process.env.TEST_INSPECTOR_LANGUAGE;
-    Recorder.show(context, recorderAppFactory, params).catch(() => {});
+    return await Recorder.show('actions', context, recorderAppFactory, params);
  }

-  static show(context: BrowserContext, recorderAppFactory: IRecorderAppFactory, params: channels.BrowserContextRecorderSupplementEnableParams = {}): Promise<Recorder> {
+  static showInspectorNoReply(context: BrowserContext, recorderAppFactory: IRecorderAppFactory) {
+    Recorder.showInspector(context, {}, recorderAppFactory).catch(() => {});
+  }
+
+  static show(codegenMode: 'actions' | 'trace-events', context: BrowserContext, recorderAppFactory: IRecorderAppFactory, params: channels.BrowserContextEnableRecorderParams): Promise<Recorder> {
    let recorderPromise = (context as any)[recorderSymbol] as Promise<Recorder>;
    if (!recorderPromise) {
-      recorderPromise = Recorder._create(context, recorderAppFactory, params);
+      recorderPromise = Recorder._create(codegenMode, context, recorderAppFactory, params);
      (context as any)[recorderSymbol] = recorderPromise;
    }
    return recorderPromise;
  }

-  private static async _create(context: BrowserContext, recorderAppFactory: IRecorderAppFactory, params: channels.BrowserContextRecorderSupplementEnableParams = {}): Promise<Recorder> {
-    const recorder = new Recorder(context, params);
+  private static async _create(codegenMode: 'actions' | 'trace-events', context: BrowserContext, recorderAppFactory: IRecorderAppFactory, params: channels.BrowserContextEnableRecorderParams = {}): Promise<Recorder> {
+    const recorder = new Recorder(codegenMode, context, params);
    const recorderApp = await recorderAppFactory(recorder);
    await recorder._install(recorderApp);
    return recorder;
  }

-  constructor(context: BrowserContext, params: channels.BrowserContextRecorderSupplementEnableParams) {
+  constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, params: channels.BrowserContextEnableRecorderParams) {
    this._mode = params.mode || 'none';
-    this._contextRecorder = new ContextRecorder(context, params, {});
+    this._contextRecorder = new ContextRecorder(codegenMode, context, params, {});
    this._context = context;
    this._omitCallTracking = !!params.omitCallTracking;
    this._debugger = context.debugger();
--- a/packages/playwright-core/src/server/recorder/contextRecorder.ts
+++ b/packages/playwright-core/src/server/recorder/contextRecorder.ts
@ -48,14 +48,14 @@ export class ContextRecorder extends EventEmitter {
  private _lastDialogOrdinal = -1;
  private _lastDownloadOrdinal = -1;
  private _context: BrowserContext;
-  private _params: channels.BrowserContextRecorderSupplementEnableParams;
+  private _params: channels.BrowserContextEnableRecorderParams;
  private _delegate: ContextRecorderDelegate;
  private _recorderSources: Source[];
  private _throttledOutputFile: ThrottledFile | null = null;
  private _orderedLanguages: LanguageGenerator[] = [];
  private _listeners: RegisteredListener[] = [];

-  constructor(context: BrowserContext, params: channels.BrowserContextRecorderSupplementEnableParams, delegate: ContextRecorderDelegate) {
+  constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, params: channels.BrowserContextEnableRecorderParams, delegate: ContextRecorderDelegate) {
    super();
    this._context = context;
    this._params = params;
@ -73,8 +73,8 @@ export class ContextRecorder extends EventEmitter {
      saveStorage: params.saveStorage,
    };

-    const collection = new RecorderCollection(context, this._pageAliases, params.mode === 'recording');
-    collection.on('change', (actions: ActionInContext[]) => {
+    this._collection = new RecorderCollection(codegenMode, context, this._pageAliases);
+    this._collection.on('change', (actions: ActionInContext[]) => {
      this._recorderSources = [];
      for (const languageGenerator of this._orderedLanguages) {
        const { header, footer, actionTexts, text } = generateCode(actions, languageGenerator, languageGeneratorOptions);
@ -103,7 +103,7 @@ export class ContextRecorder extends EventEmitter {
    this._listeners.push(eventsHelper.addEventListener(process, 'exit', () => {
      this._throttledOutputFile?.flush();
    }));
-    this._collection = collection;
+    this.setEnabled(true);
  }

  setOutput(codegenId: string, outputFile?: string) {
@ -145,6 +145,10 @@ export class ContextRecorder extends EventEmitter {

  setEnabled(enabled: boolean) {
    this._collection.setEnabled(enabled);
+    if (enabled)
+      this._context.tracing.startChunk({ name: 'trace', title: 'trace' }).catch(() => {});
+    else
+      this._context.tracing.stopChunk({ mode: 'discard' }).catch(() => {});
  }

  dispose() {
--- a/packages/playwright-core/src/server/recorder/recorderApp.ts
+++ b/packages/playwright-core/src/server/recorder/recorderApp.ts
@ -81,7 +81,6 @@ export class RecorderApp extends EventEmitter implements IRecorderApp {
      const file = require.resolve('../../vite/recorder/' + uri);
      fs.promises.readFile(file).then(buffer => {
        route.fulfill({
-          requestUrl: route.request().url(),
          status: 200,
          headers: [
            { name: 'Content-Type', value: mime.getType(path.extname(file)) || 'application/octet-stream' }
@ -162,8 +161,10 @@ export class RecorderApp extends EventEmitter implements IRecorderApp {
    }).toString(), { isFunction: true }, sources).catch(() => {});

    // Testing harness for runCLI mode.
-    if (process.env.PWTEST_CLI_IS_UNDER_TEST && sources.length)
-      (process as any)._didSetSourcesForTest(sources[0].text);
+    if (process.env.PWTEST_CLI_IS_UNDER_TEST && sources.length) {
+      if ((process as any)._didSetSourcesForTest(sources[0].text))
+        this.close();
+    }
  }

  async setSelector(selector: string, userGesture?: boolean): Promise<void> {
--- a/packages/playwright-core/src/server/recorder/recorderCollection.ts
+++ b/packages/playwright-core/src/server/recorder/recorderCollection.ts
@ -29,17 +29,16 @@ import type { BrowserContext } from '../browserContext';

 export class RecorderCollection extends EventEmitter {
  private _actions: ActionInContext[] = [];
-  private _enabled: boolean;
+  private _enabled = false;
  private _pageAliases: Map<Page, string>;
  private _context: BrowserContext;

-  constructor(context: BrowserContext, pageAliases: Map<Page, string>, enabled: boolean) {
+  constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, pageAliases: Map<Page, string>) {
    super();
    this._context = context;
-    this._enabled = enabled;
    this._pageAliases = pageAliases;

-    if (process.env.PW_RECORDER_IS_TRACE_VIEWER) {
+    if (codegenMode === 'trace-events') {
      this._context.tracing.onMemoryEvents(events => {
        this._actions = traceEventsToAction(events);
        this._fireChange();
--- a/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
+++ b/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
@ -21,77 +21,97 @@ import type { IRecorder, IRecorderApp, IRecorderAppFactory } from './recorderFro
 import { installRootRedirect, openTraceViewerApp, startTraceViewerServer } from '../trace/viewer/traceViewer';
 import type { TraceViewerServerOptions } from '../trace/viewer/traceViewer';
 import type { BrowserContext } from '../browserContext';
-import { gracefullyProcessExitDoNotHang } from '../../utils/processLauncher';
-import type { Transport } from '../../utils/httpServer';
+import type { HttpServer, Transport } from '../../utils/httpServer';
+import type { Page } from '../page';
+import { ManualPromise } from '../../utils/manualPromise';

 export class RecorderInTraceViewer extends EventEmitter implements IRecorderApp {
  readonly wsEndpointForTest: string | undefined;
-  private _recorder: IRecorder;
-  private _transport: Transport;
+  private _transport: RecorderTransport;
+  private _tracePage: Page;
+  private _traceServer: HttpServer;

  static factory(context: BrowserContext): IRecorderAppFactory {
    return async (recorder: IRecorder) => {
      const transport = new RecorderTransport();
      const trace = path.join(context._browser.options.tracesDir, 'trace');
-      const wsEndpointForTest = await openApp(trace, { transport, headless: !context._browser.options.headful });
-      return new RecorderInTraceViewer(context, recorder, transport, wsEndpointForTest);
+      const { wsEndpointForTest, tracePage, traceServer } = await openApp(trace, { transport, headless: !context._browser.options.headful });
+      return new RecorderInTraceViewer(transport, tracePage, traceServer, wsEndpointForTest);
    };
  }

-  constructor(context: BrowserContext, recorder: IRecorder, transport: Transport, wsEndpointForTest: string | undefined) {
+  constructor(transport: RecorderTransport, tracePage: Page, traceServer: HttpServer, wsEndpointForTest: string | undefined) {
    super();
-    this._recorder = recorder;
    this._transport = transport;
+    this._tracePage = tracePage;
+    this._traceServer = traceServer;
    this.wsEndpointForTest = wsEndpointForTest;
+    this._tracePage.once('close', () => {
+      this.close();
+    });
  }

  async close(): Promise<void> {
-    this._transport.sendEvent?.('close', {});
+    await this._tracePage.context().close({ reason: 'Recorder window closed' });
+    await this._traceServer.stop();
  }

  async setPaused(paused: boolean): Promise<void> {
-    this._transport.sendEvent?.('setPaused', { paused });
+    this._transport.deliverEvent('setPaused', { paused });
  }

  async setMode(mode: Mode): Promise<void> {
-    this._transport.sendEvent?.('setMode', { mode });
+    this._transport.deliverEvent('setMode', { mode });
  }

  async setFile(file: string): Promise<void> {
-    this._transport.sendEvent?.('setFileIfNeeded', { file });
+    this._transport.deliverEvent('setFileIfNeeded', { file });
  }

  async setSelector(selector: string, userGesture?: boolean): Promise<void> {
-    this._transport.sendEvent?.('setSelector', { selector, userGesture });
+    this._transport.deliverEvent('setSelector', { selector, userGesture });
  }

  async updateCallLogs(callLogs: CallLog[]): Promise<void> {
-    this._transport.sendEvent?.('updateCallLogs', { callLogs });
+    this._transport.deliverEvent('updateCallLogs', { callLogs });
  }

  async setSources(sources: Source[]): Promise<void> {
-    this._transport.sendEvent?.('setSources', { sources });
+    this._transport.deliverEvent('setSources', { sources });
+    if (process.env.PWTEST_CLI_IS_UNDER_TEST && sources.length) {
+      if ((process as any)._didSetSourcesForTest(sources[0].text))
+        this.close();
+    }
  }
 }

-async function openApp(trace: string, options?: TraceViewerServerOptions & { headless?: boolean }): Promise<string | undefined> {
-  const server = await startTraceViewerServer(options);
-  await installRootRedirect(server, [trace], { ...options, webApp: 'recorder.html' });
-  const page = await openTraceViewerApp(server.urlPrefix('precise'), 'chromium', options);
-  page.on('close', () => gracefullyProcessExitDoNotHang(0));
-  return page.context()._browser.options.wsEndpoint;
+async function openApp(trace: string, options?: TraceViewerServerOptions & { headless?: boolean }): Promise<{ wsEndpointForTest: string | undefined, tracePage: Page, traceServer: HttpServer }> {
+  const traceServer = await startTraceViewerServer(options);
+  await installRootRedirect(traceServer, [trace], { ...options, webApp: 'recorder.html' });
+  const page = await openTraceViewerApp(traceServer.urlPrefix('precise'), 'chromium', options);
+  return { wsEndpointForTest: page.context()._browser.options.wsEndpoint, tracePage: page, traceServer };
 }

 class RecorderTransport implements Transport {
+  private _connected = new ManualPromise<void>();
+
  constructor() {
  }

-  async dispatch(method: string, params: any) {
+  onconnect() {
+    this._connected.resolve();
+  }
+
+  async dispatch(method: string, params: any): Promise<any> {
  }

  onclose() {
  }

+  deliverEvent(method: string, params: any) {
+    this._connected.then(() => this.sendEvent?.(method, params));
+  }
+
  sendEvent?: (method: string, params: any) => void;
  close?: () => void;
 }
--- a/packages/playwright-core/src/server/recorder/recorderUtils.ts
+++ b/packages/playwright-core/src/server/recorder/recorderUtils.ts
@ -25,7 +25,7 @@ import type * as trace from '@trace/trace';
 import { fromKeyboardModifiers, toKeyboardModifiers } from '../codegen/language';
 import { serializeExpectedTextValues } from '../../utils/expectUtils';
 import { createGuid, monotonicTime } from '../../utils';
-import { serializeValue } from '../../protocol/serializers';
+import { parseSerializedValue, serializeValue } from '../../protocol/serializers';
 import type { SmartKeyboardModifier } from '../types';

 export function metadataToCallLog(metadata: CallMetadata, status: CallLogStatus): CallLog {
@ -158,7 +158,7 @@ export function traceParamsForAction(actionInContext: ActionInContext): { method
      const params: channels.FrameExpectParams = {
        selector: action.selector,
        expression: 'to.be.checked',
-        isNot: action.checked,
+        isNot: !action.checked,
      };
      return { method: 'expect', params };
    }
@ -166,7 +166,7 @@ export function traceParamsForAction(actionInContext: ActionInContext): { method
      const params: channels.FrameExpectParams = {
        selector,
        expression: 'to.have.text',
-        expectedText: serializeExpectedTextValues([action.text], { matchSubstring: true, normalizeWhiteSpace: true }),
+        expectedText: serializeExpectedTextValues([action.text], { matchSubstring: action.substring, normalizeWhiteSpace: true }),
        isNot: false,
      };
      return { method: 'expect', params };
@ -193,12 +193,12 @@ export function traceParamsForAction(actionInContext: ActionInContext): { method

 export function callMetadataForAction(pageAliases: Map<Page, string>, actionInContext: ActionInContext): { callMetadata: CallMetadata, mainFrame: Frame } {
  const mainFrame = mainFrameForAction(pageAliases, actionInContext);
-  const { action } = actionInContext;
  const { method, params } = traceParamsForAction(actionInContext);
+
  const callMetadata: CallMetadata = {
    id: `call@${createGuid()}`,
    stepId: `recorder@${createGuid()}`,
-    apiName: 'frame.' + action.name,
+    apiName: 'page.' + method,
    objectId: mainFrame.guid,
    pageId: mainFrame._page.guid,
    frameId: mainFrame.guid,
@ -215,13 +215,23 @@ export function callMetadataForAction(pageAliases: Map<Page, string>, actionInCo
 export function traceEventsToAction(events: trace.TraceEvent[]): ActionInContext[] {
  const result: ActionInContext[] = [];
  const pageAliases = new Map<string, string>();
+  let lastDownloadOrdinal = 0;
+  let lastDialogOrdinal = 0;
+
+  const addSignal = (signal: actions.Signal) => {
+    const lastAction = result[result.length - 1];
+    if (!lastAction)
+      return;
+    lastAction.action.signals.push(signal);
+  };

  for (const event of events) {
-    if (event.type === 'event' && event.class === 'BrowserContext' && event.method === 'page') {
-      const pageAlias = 'page' + pageAliases.size;
-      pageAliases.set(event.params.pageId, pageAlias);
-      const lastAction = result[result.length - 1];
-      lastAction.action.signals.push({
+    if (event.type === 'event' && event.class === 'BrowserContext') {
+      const { method, params } = event;
+      if (method === 'page') {
+        const pageAlias = 'page' + (pageAliases.size || '');
+        pageAliases.set(params.pageId, pageAlias);
+        addSignal({
          name: 'popup',
          popupAlias: pageAlias,
        });
@ -237,7 +247,7 @@ export function traceEventsToAction(events: trace.TraceEvent[]): ActionInContext
        continue;
      }

-    if (event.type === 'event' && event.class === 'BrowserContext' && event.method === 'pageClosed') {
+      if (method === 'pageClosed') {
        const pageAlias = pageAliases.get(event.params.pageId) || 'page';
        result.push({
          frame: { pageAlias, framePath: [] },
@ -250,6 +260,28 @@ export function traceEventsToAction(events: trace.TraceEvent[]): ActionInContext
        continue;
      }

+      if (method === 'download') {
+        const downloadAlias = lastDownloadOrdinal ? String(lastDownloadOrdinal) : '';
+        ++lastDownloadOrdinal;
+        addSignal({
+          name: 'download',
+          downloadAlias,
+        });
+        continue;
+      }
+
+      if (method === 'dialog') {
+        const dialogAlias = lastDialogOrdinal ? String(lastDialogOrdinal) : '';
+        ++lastDialogOrdinal;
+        addSignal({
+          name: 'dialog',
+          dialogAlias,
+        });
+        continue;
+      }
+      continue;
+    }
+
    if (event.type !== 'before' || !event.pageId)
      continue;
    if (!event.stepId?.startsWith('recorder@'))
@ -389,6 +421,67 @@ export function traceEventsToAction(events: trace.TraceEvent[]): ActionInContext
      });
      continue;
    }
+    if (method === 'expect') {
+      const params = untypedParams as channels.FrameExpectParams;
+      if (params.expression === 'to.have.text') {
+        const entry = params.expectedText?.[0];
+        result.push({
+          frame: { pageAlias, framePath: [] },
+          action: {
+            name: 'assertText',
+            selector: params.selector,
+            signals: [],
+            text: entry?.string!,
+            substring: !!entry?.matchSubstring,
+          },
+          timestamp: event.startTime
+        });
+        continue;
+      }
+
+      if (params.expression === 'to.have.value') {
+        result.push({
+          frame: { pageAlias, framePath: [] },
+          action: {
+            name: 'assertValue',
+            selector: params.selector,
+            signals: [],
+            value: parseSerializedValue(params.expectedValue!.value, params.expectedValue!.handles),
+          },
+          timestamp: event.startTime
+        });
+        continue;
+      }
+
+      if (params.expression === 'to.be.checked') {
+        result.push({
+          frame: { pageAlias, framePath: [] },
+          action: {
+            name: 'assertChecked',
+            selector: params.selector,
+            signals: [],
+            checked: !params.isNot,
+          },
+          timestamp: event.startTime
+        });
+        continue;
+      }
+
+      if (params.expression === 'to.be.visible') {
+        result.push({
+          frame: { pageAlias, framePath: [] },
+          action: {
+            name: 'assertVisible',
+            selector: params.selector,
+            signals: [],
+          },
+          timestamp: event.startTime
+        });
+        continue;
+      }
+
+      continue;
+    }
  }

  return result;
--- a/packages/playwright-core/src/server/trace/recorder/tracing.ts
+++ b/packages/playwright-core/src/server/trace/recorder/tracing.ts
@ -38,6 +38,8 @@ import { Snapshotter } from './snapshotter';
 import type { ConsoleMessage } from '../../console';
 import { Dispatcher } from '../../dispatchers/dispatcher';
 import { serializeError } from '../../errors';
+import type { Dialog } from '../../dialog';
+import type { Download } from '../../download';

 const version: trace.VERSION = 7;

@ -454,6 +456,28 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
    this._appendTraceEvent(event);
  }

+  onDialog(dialog: Dialog) {
+    const event: trace.EventTraceEvent = {
+      type: 'event',
+      time: monotonicTime(),
+      class: 'BrowserContext',
+      method: 'dialog',
+      params: { pageId: dialog.page().guid, type: dialog.type(), message: dialog.message(), defaultValue: dialog.defaultValue() },
+    };
+    this._appendTraceEvent(event);
+  }
+
+  onDownload(page: Page, download: Download) {
+    const event: trace.EventTraceEvent = {
+      type: 'event',
+      time: monotonicTime(),
+      class: 'BrowserContext',
+      method: 'download',
+      params: { pageId: page.guid, url: download.url, suggestedFilename: download.suggestedFilename() },
+    };
+    this._appendTraceEvent(event);
+  }
+
  onPageOpen(page: Page) {
    const event: trace.EventTraceEvent = {
      type: 'event',
--- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
+++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@ -223,6 +223,9 @@ class StdinServer implements Transport {
    process.stdin.on('close', () => gracefullyProcessExitDoNotHang(0));
  }

+  onconnect() {
+  }
+
  async dispatch(method: string, params: any) {
    if (method === 'initialize') {
      if (this._traceUrl)
--- a/packages/playwright-core/src/utils/httpServer.ts
+++ b/packages/playwright-core/src/utils/httpServer.ts
@ -27,8 +27,9 @@ export type ServerRouteHandler = (request: http.IncomingMessage, response: http.

 export type Transport = {
  sendEvent?: (method: string, params: any) => void;
-  dispatch: (method: string, params: any) => Promise<any>;
  close?: () => void;
+  onconnect: () => void;
+  dispatch: (method: string, params: any) => Promise<any>;
  onclose: () => void;
 };

@ -82,6 +83,7 @@ export class HttpServer {
    this._wsGuid = guid || createGuid();
    const wss = new wsServer({ server: this._server, path: '/' + this._wsGuid });
    wss.on('connection', ws => {
+      transport.onconnect();
      transport.sendEvent = (method, params)  => ws.send(JSON.stringify({ method, params }));
      transport.close = () => ws.close();
      ws.on('message', async message => {
--- a/packages/playwright/src/runner/testServer.ts
+++ b/packages/playwright/src/runner/testServer.ts
@ -84,6 +84,7 @@ export class TestServerDispatcher implements TestServerInterface {
  constructor(configLocation: ConfigLocation) {
    this._configLocation = configLocation;
    this.transport = {
+      onconnect: () => {},
      dispatch: (method, params) => (this as any)[method](params),
      onclose: () => {
        if (this._closeOnDisconnect)
--- a/packages/protocol/src/channels.ts
+++ b/packages/protocol/src/channels.ts
@ -1526,7 +1526,7 @@ export interface BrowserContextChannel extends BrowserContextEventTarget, EventT
  setOffline(params: BrowserContextSetOfflineParams, metadata?: CallMetadata): Promise<BrowserContextSetOfflineResult>;
  storageState(params?: BrowserContextStorageStateParams, metadata?: CallMetadata): Promise<BrowserContextStorageStateResult>;
  pause(params?: BrowserContextPauseParams, metadata?: CallMetadata): Promise<BrowserContextPauseResult>;
-  recorderSupplementEnable(params: BrowserContextRecorderSupplementEnableParams, metadata?: CallMetadata): Promise<BrowserContextRecorderSupplementEnableResult>;
+  enableRecorder(params: BrowserContextEnableRecorderParams, metadata?: CallMetadata): Promise<BrowserContextEnableRecorderResult>;
  newCDPSession(params: BrowserContextNewCDPSessionParams, metadata?: CallMetadata): Promise<BrowserContextNewCDPSessionResult>;
  harStart(params: BrowserContextHarStartParams, metadata?: CallMetadata): Promise<BrowserContextHarStartResult>;
  harExport(params: BrowserContextHarExportParams, metadata?: CallMetadata): Promise<BrowserContextHarExportResult>;
@ -1766,9 +1766,10 @@ export type BrowserContextStorageStateResult = {
 export type BrowserContextPauseParams = {};
 export type BrowserContextPauseOptions = {};
 export type BrowserContextPauseResult = void;
-export type BrowserContextRecorderSupplementEnableParams = {
+export type BrowserContextEnableRecorderParams = {
  language?: string,
  mode?: 'inspecting' | 'recording',
+  codegenMode?: 'actions' | 'trace-events',
  pauseOnNextStatement?: boolean,
  testIdAttributeName?: string,
  launchOptions?: any,
@ -1778,9 +1779,10 @@ export type BrowserContextRecorderSupplementEnableParams = {
  outputFile?: string,
  omitCallTracking?: boolean,
 };
-export type BrowserContextRecorderSupplementEnableOptions = {
+export type BrowserContextEnableRecorderOptions = {
  language?: string,
  mode?: 'inspecting' | 'recording',
+  codegenMode?: 'actions' | 'trace-events',
  pauseOnNextStatement?: boolean,
  testIdAttributeName?: string,
  launchOptions?: any,
@ -1790,7 +1792,7 @@ export type BrowserContextRecorderSupplementEnableOptions = {
  outputFile?: string,
  omitCallTracking?: boolean,
 };
-export type BrowserContextRecorderSupplementEnableResult = void;
+export type BrowserContextEnableRecorderResult = void;
 export type BrowserContextNewCDPSessionParams = {
  page?: PageChannel,
  frame?: FrameChannel,
@ -3769,7 +3771,6 @@ export type RouteRedirectNavigationRequestOptions = {
 export type RouteRedirectNavigationRequestResult = void;
 export type RouteAbortParams = {
  errorCode?: string,
-  requestUrl: string,
 };
 export type RouteAbortOptions = {
  errorCode?: string,
@ -3780,7 +3781,6 @@ export type RouteContinueParams = {
  method?: string,
  headers?: NameValue[],
  postData?: Binary,
-  requestUrl: string,
  isFallback: boolean,
 };
 export type RouteContinueOptions = {
@ -3796,7 +3796,6 @@ export type RouteFulfillParams = {
  body?: string,
  isBase64?: boolean,
  fetchResponseUid?: string,
-  requestUrl: string,
 };
 export type RouteFulfillOptions = {
  status?: number,
--- a/packages/protocol/src/protocol.yml
+++ b/packages/protocol/src/protocol.yml
@ -1187,7 +1187,7 @@ BrowserContext:
    pause:
      experimental: True

-    recorderSupplementEnable:
+    enableRecorder:
      experimental: True
      parameters:
        language: string?
@ -1196,6 +1196,11 @@ BrowserContext:
          literals:
          - inspecting
          - recording
+        codegenMode:
+          type: enum?
+          literals:
+          - actions
+          - trace-events
        pauseOnNextStatement: boolean?
        testIdAttributeName: string?
        launchOptions: json?
@ -2941,7 +2946,6 @@ Route:
    abort:
      parameters:
        errorCode: string?
-        requestUrl: string

    continue:
      parameters:
@ -2951,7 +2955,6 @@ Route:
          type: array?
          items: NameValue
        postData: binary?
-        requestUrl: string
        isFallback: boolean

    fulfill:
@ -2964,7 +2967,6 @@ Route:
        body: string?
        isBase64: boolean?
        fetchResponseUid: string?
-        requestUrl: string


 WebSocketRoute:
--- a/packages/trace-viewer/src/sw.ts
+++ b/packages/trace-viewer/src/sw.ts
@ -47,12 +47,14 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
  }
  set.add(traceUrl);

+  const isRecorderMode = traceUrl.includes('/playwright-recorder-trace-');
+
  const traceModel = new TraceModel();
  try {
    // Allow 10% to hop from sw to page.
    const [fetchProgress, unzipProgress] = splitProgress(progress, [0.5, 0.4, 0.1]);
    const backend = traceUrl.endsWith('json') ? new FetchTraceModelBackend(traceUrl) : new ZipTraceModelBackend(traceUrl, fetchProgress);
-    await traceModel.load(backend, unzipProgress);
+    await traceModel.load(backend, isRecorderMode, unzipProgress);
  } catch (error: any) {
    // eslint-disable-next-line no-console
    console.error(error);
--- a/packages/trace-viewer/src/traceModel.ts
+++ b/packages/trace-viewer/src/traceModel.ts
@ -15,7 +15,7 @@
 */

 import { parseClientSideCallMetadata } from '../../../packages/playwright-core/src/utils/isomorphic/traceUtils';
-import type { ContextEntry } from './entries';
+import type { ActionEntry, ContextEntry } from './entries';
 import { createEmptyContext } from './entries';
 import { SnapshotStorage } from './snapshotStorage';
 import { TraceModernizer } from './traceModernizer';
@ -38,7 +38,7 @@ export class TraceModel {
  constructor() {
  }

-  async load(backend: TraceModelBackend, unzipProgress: (done: number, total: number) => void) {
+  async load(backend: TraceModelBackend, isRecorderMode: boolean, unzipProgress: (done: number, total: number) => void) {
    this._backend = backend;

    const ordinals: string[] = [];
@ -72,7 +72,8 @@ export class TraceModel {
      modernizer.appendTrace(network);
      unzipProgress(++done, total);

-      contextEntry.actions = modernizer.actions().sort((a1, a2) => a1.startTime - a2.startTime);
+      const actions = modernizer.actions().sort((a1, a2) => a1.startTime - a2.startTime);
+      contextEntry.actions = isRecorderMode ? collapseActionsForRecorder(actions) : actions;

      if (!backend.isLive()) {
        // Terminate actions w/o after event gracefully.
@ -133,3 +134,19 @@ function stripEncodingFromContentType(contentType: string) {
    return charset[1];
  return contentType;
 }
+
+function collapseActionsForRecorder(actions: ActionEntry[]): ActionEntry[] {
+  const result: ActionEntry[] = [];
+  for (const action of actions) {
+    const lastAction = result[result.length - 1];
+    const isSameAction = lastAction && lastAction.method === action.method && lastAction.pageId === action.pageId;
+    const isSameSelector = lastAction && 'selector' in lastAction.params && 'selector' in action.params && action.params.selector === lastAction.params.selector;
+    const shouldMerge = isSameAction && (action.method === 'goto' || (action.method === 'fill' && isSameSelector));
+    if (!shouldMerge) {
+      result.push(action);
+      continue;
+    }
+    result[result.length - 1] = action;
+  }
+  return result;
+}
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/packages/trace-viewer/src/ui/callTab.css
@ -36,6 +36,8 @@

 .call-section {
  padding-left: 6px;
+  padding-top: 2px;
+  margin-top: 2px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
@ -53,9 +55,8 @@
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
-  line-height: 18px;
+  line-height: 20px;
  white-space: nowrap;
-  max-height: 18px;
 }

 .call-line:not(:hover) .toolbar-button.copy {
@ -64,7 +65,8 @@

 .call-line .toolbar-button.copy {
  margin-left: 5px;
-  transform: scale(0.8);
+  margin-top: -2px;
+  margin-bottom: -2px;
 }

 .call-value {
--- a/packages/trace-viewer/src/ui/recorderView.tsx
+++ b/packages/trace-viewer/src/ui/recorderView.tsx
@ -45,8 +45,6 @@ export const RecorderView: React.FunctionComponent = () => {
    connection.setMode('recording');
  }, [connection]);

-  window.playwrightSourcesEchoForTest = sources;
-
  return <div className='vbox workbench-loader'>
    <TraceView
      traceLocation={trace}
@ -104,6 +102,7 @@ export const TraceView: React.FC<{
    showSourcesFirst={true}
    fallbackLocation={fallbackLocation}
    isLive={true}
+    hideTimeline={true}
  />;
 };

@ -165,6 +164,7 @@ class Connection {
    if (method === 'setSources') {
      const { sources } = params as { sources: Source[] };
      this._options.setSources(sources);
+      window.playwrightSourcesEchoForTest = sources;
    }
  }
 }
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@ -105,7 +105,6 @@ export const UIModeView: React.FC<{}> = ({
  const [singleWorker, setSingleWorker] = React.useState(queryParams.workers === '1');
  const [showBrowser, setShowBrowser] = React.useState(queryParams.headed);
  const [updateSnapshots, setUpdateSnapshots] = React.useState(queryParams.updateSnapshots === 'all');
-  const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
  const [darkMode, setDarkMode] = useDarkModeSetting();
  const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);

@ -526,7 +525,6 @@ export const UIModeView: React.FC<{}> = ({
        </Toolbar>
        {settingsVisible && <SettingsView settings={[
          { value: darkMode, set: setDarkMode, title: 'Dark mode' },
-          { value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' },
          { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' },
        ]} />}
      </div>
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@ -24,7 +24,6 @@ import type { ErrorDescription } from './errorsTab';
 import type { ConsoleEntry } from './consoleTab';
 import { ConsoleTab, useConsoleTabModel } from './consoleTab';
 import type * as modelUtil from './modelUtil';
-import { isRouteAction } from './modelUtil';
 import { NetworkTab, useNetworkTabModel } from './networkTab';
 import { SnapshotTab } from './snapshotTab';
 import { SourceTab } from './sourceTab';
@ -50,6 +49,7 @@ export const Workbench: React.FunctionComponent<{
  rootDir?: string,
  fallbackLocation?: modelUtil.SourceLocation,
  isLive?: boolean,
+  hideTimeline?: boolean,
  status?: UITestStatus,
  annotations?: { type: string; description?: string; }[];
  inert?: boolean,
@ -57,7 +57,7 @@ export const Workbench: React.FunctionComponent<{
  onOpenExternally?: (location: modelUtil.SourceLocation) => void,
  revealSource?: boolean,
  showSettings?: boolean,
-}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
+}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
  const [selectedCallId, setSelectedCallId] = React.useState<string | undefined>(undefined);
  const [revealedError, setRevealedError] = React.useState<ErrorDescription | undefined>(undefined);

@ -70,13 +70,8 @@ export const Workbench: React.FunctionComponent<{
  const [highlightedLocator, setHighlightedLocator] = React.useState<string>('');
  const [selectedTime, setSelectedTime] = React.useState<Boundaries | undefined>();
  const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom');
-  const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
  const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);

-  const filteredActions = React.useMemo(() => {
-    return (model?.actions || []).filter(action => showRouteActions || !isRouteAction(action));
-  }, [model, showRouteActions]);
-
  const setSelectedAction = React.useCallback((action: modelUtil.ActionTraceEventInContext | undefined) => {
    setSelectedCallId(action?.callId);
    setRevealedError(undefined);
@ -291,7 +286,7 @@ export const Workbench: React.FunctionComponent<{
      </div>}
      <ActionList
        sdkLanguage={sdkLanguage}
-        actions={filteredActions}
+        actions={model?.actions || []}
        selectedAction={model ? selectedAction : undefined}
        selectedTime={selectedTime}
        setSelectedTime={setSelectedTime}
@ -311,13 +306,12 @@ export const Workbench: React.FunctionComponent<{
    id: 'settings',
    title: 'Settings',
    component: <SettingsView settings={[
-      { value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' },
      { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' }
    ]}/>,
  };

  return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
-    <Timeline
+    {!hideTimeline && <Timeline
      model={model}
      consoleEntries={consoleModel.entries}
      boundaries={boundaries}
@ -328,7 +322,7 @@ export const Workbench: React.FunctionComponent<{
      sdkLanguage={sdkLanguage}
      selectedTime={selectedTime}
      setSelectedTime={setSelectedTime}
-    />
+    />}
    <SplitView
      sidebarSize={250}
      orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'
--- a/tests/bidi/expectations/bidi-firefox-nightly-library.txt
+++ b/tests/bidi/expectations/bidi-firefox-nightly-library.txt
--- a/tests/bidi/expectations/bidi-firefox-nightly-page.txt
+++ b/tests/bidi/expectations/bidi-firefox-nightly-page.txt
--- a/tests/config/testModeFixtures.ts
+++ b/tests/config/testModeFixtures.ts
@ -21,6 +21,7 @@ import * as playwrightLibrary from 'playwright-core';

 export type TestModeWorkerOptions = {
  mode: TestModeName;
+  codegenMode: 'trace-events' | 'actions';
 };

 export type TestModeTestFixtures = {
@ -48,6 +49,7 @@ export const testModeTest = test.extend<TestModeTestFixtures, TestModeWorkerOpti
    await run(playwright);
    await testMode.teardown();
  }, { scope: 'worker' }],
+  codegenMode: ['actions', { scope: 'worker', option: true }],

  toImplInWorkerScope: [async ({ playwright }, use) => {
    await use((playwright as any)._toImpl);
--- a/tests/config/traceViewerFixtures.ts
+++ b/tests/config/traceViewerFixtures.ts
@ -71,10 +71,12 @@ class TraceViewerPage {
    return await this.page.waitForSelector(`.list-view-entry:has-text("${action}") .action-icons`);
  }

+  @step
  async selectAction(title: string, ordinal: number = 0) {
    await this.page.locator(`.action-title:has-text("${title}")`).nth(ordinal).click();
  }

+  @step
  async selectSnapshot(name: string) {
    await this.page.click(`.snapshot-tab .tabbed-pane-tab-label:has-text("${name}")`);
  }
--- a/tests/config/utils.ts
+++ b/tests/config/utils.ts
@ -160,7 +160,7 @@ export async function parseTraceRaw(file: string): Promise<{ events: any[], reso
 export async function parseTrace(file: string): Promise<{ resources: Map<string, Buffer>, events: (EventTraceEvent | ConsoleMessageTraceEvent)[], actions: ActionTraceEvent[], apiNames: string[], traceModel: TraceModel, model: MultiTraceModel, actionTree: string[], errors: string[] }> {
  const backend = new TraceBackend(file);
  const traceModel = new TraceModel();
-  await traceModel.load(backend, () => {});
+  await traceModel.load(backend, false, () => {});
  const model = new MultiTraceModel(traceModel.contextEntries);
  const { rootItem } = buildActionTree(model.actions);
  const actionTree: string[] = [];
--- a/tests/library/inspector/cli-codegen-2.spec.ts
+++ b/tests/library/inspector/cli-codegen-2.spec.ts
@ -337,7 +337,8 @@ await page.GetByRole(AriaRole.Button, new() { Name = "click me" }).ClickAsync();
    }
  });

-  test('should record open in a new tab with url', async ({ openRecorder, browserName }) => {
+  test('should record open in a new tab with url', async ({ openRecorder, browserName, codegenMode }) => {
+    test.skip(codegenMode === 'trace-events');
    const { page, recorder } = await openRecorder();
    await recorder.setContentAndWait(`<a href="about:blank?foo">link</a>`);

@ -490,7 +491,8 @@ await page1.GotoAsync("about:blank?foo");`);
    await recorder.waitForOutput('JavaScript', `await page.goto('${server.PREFIX}/page2.html');`);
  });

-  test('should --save-trace', async ({ runCLI }, testInfo) => {
+  test('should --save-trace', async ({ runCLI, codegenMode }, testInfo) => {
+    test.skip(codegenMode === 'trace-events');
    const traceFileName = testInfo.outputPath('trace.zip');
    const cli = runCLI([`--save-trace=${traceFileName}`], {
      autoExitWhen: ' ',
@ -499,7 +501,8 @@ await page1.GotoAsync("about:blank?foo");`);
    expect(fs.existsSync(traceFileName)).toBeTruthy();
  });

-  test('should save assets via SIGINT', async ({ runCLI, platform }, testInfo) => {
+  test('should save assets via SIGINT', async ({ runCLI, platform, codegenMode }, testInfo) => {
+    test.skip(codegenMode === 'trace-events');
    test.skip(platform === 'win32', 'SIGINT not supported on Windows');

    const traceFileName = testInfo.outputPath('trace.zip');
--- a/tests/library/inspector/inspectorTest.ts
+++ b/tests/library/inspector/inspectorTest.ts
@ -67,17 +67,30 @@ export const test = contextTest.extend<CLITestArgs>({
    });
  },

-  runCLI: async ({ childProcess, browserName, channel, headless, mode, launchOptions }, run, testInfo) => {
+  runCLI: async ({ childProcess, browserName, channel, headless, mode, launchOptions, codegenMode }, run, testInfo) => {
    testInfo.skip(mode.startsWith('service'));

    await run((cliArgs, { autoExitWhen } = {}) => {
-      return new CLIMock(childProcess, browserName, channel, headless, cliArgs, launchOptions.executablePath, autoExitWhen);
+      return new CLIMock(childProcess, {
+        browserName,
+        channel,
+        headless,
+        args: cliArgs,
+        executablePath: launchOptions.executablePath,
+        autoExitWhen,
+        codegenMode
+      });
    });
  },

-  openRecorder: async ({ context, recorderPageGetter }, run) => {
+  openRecorder: async ({ context, recorderPageGetter, codegenMode }, run) => {
    await run(async (options?: { testIdAttributeName?: string }) => {
-      await (context as any)._enableRecorder({ language: 'javascript', mode: 'recording', ...options });
+      await (context as any)._enableRecorder({
+        language: 'javascript',
+        mode: 'recording',
+        codegenMode,
+        ...options
+      });
      const page = await context.newPage();
      return { page, recorder: new Recorder(page, await recorderPageGetter()) };
    });
@ -205,23 +218,24 @@ class Recorder {
 class CLIMock {
  process: TestChildProcess;

-  constructor(childProcess: CommonFixtures['childProcess'], browserName: string, channel: string | undefined, headless: boolean | undefined, args: string[], executablePath: string | undefined, autoExitWhen: string | undefined) {
+  constructor(childProcess: CommonFixtures['childProcess'], options: { browserName: string, channel: string | undefined, headless: boolean | undefined, args: string[], executablePath: string | undefined, autoExitWhen: string | undefined, codegenMode?: 'trace-events' | 'actions'}) {
    const nodeArgs = [
      'node',
      path.join(__dirname, '..', '..', '..', 'packages', 'playwright-core', 'cli.js'),
      'codegen',
-      ...args,
-      `--browser=${browserName}`,
+      ...options.args,
+      `--browser=${options.browserName}`,
    ];
-    if (channel)
-      nodeArgs.push(`--channel=${channel}`);
+    if (options.channel)
+      nodeArgs.push(`--channel=${options.channel}`);
    this.process = childProcess({
      command: nodeArgs,
      env: {
-        PWTEST_CLI_AUTO_EXIT_WHEN: autoExitWhen,
+        PW_RECORDER_IS_TRACE_VIEWER: options.codegenMode === 'trace-events' ? '1' : undefined,
+        PWTEST_CLI_AUTO_EXIT_WHEN: options.autoExitWhen,
        PWTEST_CLI_IS_UNDER_TEST: '1',
-        PWTEST_CLI_HEADLESS: headless ? '1' : undefined,
-        PWTEST_CLI_EXECUTABLE_PATH: executablePath,
+        PWTEST_CLI_HEADLESS: options.headless ? '1' : undefined,
+        PWTEST_CLI_EXECUTABLE_PATH: options.executablePath,
        DEBUG: (process.env.DEBUG ?? '') + ',pw:browser*',
      },
    });
--- a/tests/library/playwright.config.ts
+++ b/tests/library/playwright.config.ts
@ -107,10 +107,8 @@ for (const browserName of browserNames) {
    console.error(`Using executable at ${executablePath}`);
  const devtools = process.env.DEVTOOLS === '1';
  const testIgnore: RegExp[] = browserNames.filter(b => b !== browserName).map(b => new RegExp(b));
-  for (const folder of ['library', 'page']) {
-    config.projects.push({
-      name: `${browserName}-${folder}`,
-      testDir: path.join(testDir, folder),
+
+  const projectTemplate: typeof config.projects[0] = {
    testIgnore,
    snapshotPathTemplate: `{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-${browserName}{ext}`,
    use: {
@ -141,9 +139,31 @@ for (const browserName of browserNames) {
      video: !!video,
      trace: !!trace,
      clock: process.env.PW_CLOCK ? 'clock-' + process.env.PW_CLOCK : undefined,
-      },
-    });
    }
+  };
+
+  config.projects.push({
+    name: `${browserName}-library`,
+    testDir: path.join(testDir, 'library'),
+    ...projectTemplate,
+  });
+
+  config.projects.push({
+    name: `${browserName}-page`,
+    testDir: path.join(testDir, 'page'),
+    ...projectTemplate,
+  });
+
+  config.projects.push({
+    name: `${browserName}-codegen-mode-trace`,
+    testDir: path.join(testDir, 'library'),
+    testMatch: '**/cli-codegen-*.spec.ts',
+    ...projectTemplate,
+    use: {
+      ...projectTemplate.use,
+      codegenMode: 'trace-events',
+    }
+  });
 }

 export default config;
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@ -130,7 +130,9 @@ test('should complain about newer version of trace in old viewer', async ({ show
 test('should properly synchronize local and remote time', async ({ showTraceViewer, asset }, testInfo) => {
  const traceViewer = await showTraceViewer([asset('trace-remote-time-diff.zip')]);
  // The total duration should be sub 10s, rather than 16h.
-  await expect(traceViewer.page.locator('.timeline-time').last()).toHaveText('8.5s');
+  await expect.poll(async () =>
+    parseInt(await traceViewer.page.locator('.timeline-time').last().innerText(), 10)
+  ).toBeLessThan(10);
 });

 test('should contain action info', async ({ showTraceViewer }) => {
@ -964,28 +966,6 @@ test('should open two trace files of the same test', async ({ context, page, req
  ]);
 });

-test('should include requestUrl in route.fulfill', async ({ page, runAndTrace, browserName }) => {
-  await page.route('**/*', route => {
-    void route.fulfill({
-      status: 200,
-      headers: {
-        'content-type': 'text/html'
-      },
-      body: 'Hello there!'
-    });
-  });
-  const traceViewer = await runAndTrace(async () => {
-    await page.goto('http://test.com');
-  });
-
-  // Render snapshot, check expectations.
-  await traceViewer.selectAction('route.fulfill');
-  await traceViewer.page.locator('.tabbed-pane-tab-label', { hasText: 'Call' }).click();
-  const callLine = traceViewer.page.locator('.call-line');
-  await expect(callLine.getByText('status')).toContainText('200');
-  await expect(callLine.getByText('requestUrl')).toContainText('http://test.com');
-});
-
 test('should not crash with broken locator', async ({ page, runAndTrace, server }) => {
  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/21832' });
  const traceViewer = await runAndTrace(async () => {
@ -999,37 +979,6 @@ test('should not crash with broken locator', async ({ page, runAndTrace, server
  await expect(header).toBeVisible();
 });

-test('should include requestUrl in route.continue', async ({ page, runAndTrace, server }) => {
-  await page.route('**/*', route => {
-    void route.continue({ url: server.EMPTY_PAGE });
-  });
-  const traceViewer = await runAndTrace(async () => {
-    await page.goto('http://test.com');
-  });
-
-  // Render snapshot, check expectations.
-  await traceViewer.selectAction('route.continue');
-  await traceViewer.page.locator('.tabbed-pane-tab-label', { hasText: 'Call' }).click();
-  const callLine = traceViewer.page.locator('.call-line');
-  await expect(callLine.getByText('requestUrl')).toContainText('http://test.com');
-  await expect(callLine.getByText(/^url:.*/)).toContainText(server.EMPTY_PAGE);
-});
-
-test('should include requestUrl in route.abort', async ({ page, runAndTrace, server }) => {
-  await page.route('**/*', route => {
-    void route.abort();
-  });
-  const traceViewer = await runAndTrace(async () => {
-    await page.goto('http://test.com').catch(() => {});
-  });
-
-  // Render snapshot, check expectations.
-  await traceViewer.selectAction('route.abort');
-  await traceViewer.page.locator('.tabbed-pane-tab-label', { hasText: 'Call' }).click();
-  const callLine = traceViewer.page.locator('.call-line');
-  await expect(callLine.getByText('requestUrl')).toContainText('http://test.com');
-});
-
 test('should serve overridden request', async ({ page, runAndTrace, server }) => {
  server.setRoute('/custom.css', (req, res) => {
    res.writeHead(200, {
@ -1416,7 +1365,7 @@ test('should show correct request start time', {
  expect(parseMillis(start)).toBeLessThan(1000);
 });

-test('should allow hiding route actions', {
+test('should not record route actions', {
  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/30970' },
 }, async ({ page, runAndTrace, server }) => {
  const traceViewer = await runAndTrace(async () => {
@ -1426,28 +1375,9 @@ test('should allow hiding route actions', {
    await page.goto(server.EMPTY_PAGE);
  });

-  // Routes are visible by default.
  await expect(traceViewer.actionTitles).toHaveText([
    /page.route/,
    /page.goto.*empty.html/,
-    /route.fulfill/,
-  ]);
-
-  await traceViewer.page.getByText('Settings').click();
-  await expect(traceViewer.page.getByRole('checkbox', { name: 'Show route actions' })).toBeChecked();
-  await traceViewer.page.getByRole('checkbox', { name: 'Show route actions' }).uncheck();
-  await traceViewer.page.getByText('Actions', { exact: true }).click();
-  await expect(traceViewer.actionTitles).toHaveText([
-    /page.goto.*empty.html/,
-  ]);
-
-  await traceViewer.page.getByText('Settings').click();
-  await traceViewer.page.getByRole('checkbox', { name: 'Show route actions' }).check();
-  await traceViewer.page.getByText('Actions', { exact: true }).click();
-  await expect(traceViewer.actionTitles).toHaveText([
-    /page.route/,
-    /page.goto.*empty.html/,
-    /route.fulfill/,
  ]);
 });

--- a/tests/library/tracing.spec.ts
+++ b/tests/library/tracing.spec.ts
@ -66,10 +66,9 @@ test('should collect trace with resources, but no js', async ({ context, page, s

 test('should use the correct apiName for event driven callbacks', async ({ context, page, server }, testInfo) => {
  await context.tracing.start();
+  // route.* calls should not be included in the trace
  await page.route('**/empty.html', route => route.continue());
-  // page.goto -> page.route should be included in the trace since its handled.
  await page.goto(server.PREFIX + '/empty.html');
-  // page.route -> internalContinue should not be included in the trace since it was handled by Playwright internally.
  await page.goto(server.PREFIX + '/grid.html');

  // The default internal dialog handler should not provide an action.
@ -87,7 +86,6 @@ test('should use the correct apiName for event driven callbacks', async ({ conte
  expect(actions).toEqual([
    'page.route',
    'page.goto',
-    'route.continue',
    'page.goto',
    'page.evaluate',
    'page.reload',
--- a/tests/page/page-focus.spec.ts
+++ b/tests/page/page-focus.spec.ts
@ -117,6 +117,71 @@ it('clicking checkbox should activate it', async ({ page, browserName, headless,
  expect(nodeName).toBe('INPUT');
 });

+it('tab should cycle between single input and browser', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
+}, async ({ page, browserName, headless }) => {
+  it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
+      'Chromium in headful mode keeps input focused.');
+  it.fixme(browserName !== 'chromium');
+  await page.setContent(`<label for="input1">input1</label>
+    <input id="input1">
+    <script>
+    {
+      window.focusEvents = [];
+      const input = document.getElementById('input1');
+      input.addEventListener('blur', () => focusEvents.push('blur'));
+      input.addEventListener('focus', () => focusEvents.push('focus'));
+    }
+    </script>`);
+  expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus']);
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus', 'blur']);
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus', 'blur', 'focus']);
+});
+
+it('tab should cycle between document elements and browser', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
+}, async ({ page, browserName, headless }) => {
+  it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
+      'Chromium in headful mode keeps last input focused.');
+  it.fixme(browserName !== 'chromium');
+  await page.setContent(`
+    <input id="input1">
+    <input id="input2">
+    <script>
+      window.focusEvents = [];
+      {
+        const input = document.getElementById('input1');
+        input.addEventListener('blur', () => focusEvents.push('blur1'));
+        input.addEventListener('focus', () => focusEvents.push('focus1'));
+      }
+      {
+        const input = document.getElementById('input2');
+        input.addEventListener('blur', () => focusEvents.push('blur2'));
+        input.addEventListener('focus', () => focusEvents.push('focus2'));
+      }
+    </script>`);
+  expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1']);
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.id)).toBe('input2');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2']);
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2', 'blur2']);
+  await page.keyboard.press('Tab');
+  expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
+  expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2', 'blur2', 'focus1']);
+});
+
 it('keeps focus on element when attempting to focus a non-focusable element', async ({ page }) => {
  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/14254' });

--- a/tests/playwright-test/playwright.trace.spec.ts
+++ b/tests/playwright-test/playwright.trace.spec.ts
@ -1216,7 +1216,6 @@ test('should not nest top level expect into unfinished api calls ', {
    '    browserContext.newPage',
    'page.route',
    'page.goto',
-    'route.fetch',
    'expect.toBeVisible',
    'page.unrouteAll',
    'After Hooks',
--- a/tests/playwright-test/test-step.spec.ts
+++ b/tests/playwright-test/test-step.spec.ts
@ -546,37 +546,6 @@ fixture   |  fixture: browser
 `);
 });

-test('should not nest page.continue inside page.goto steps', async ({ runInlineTest }) => {
-  const result = await runInlineTest({
-    'reporter.ts': stepIndentReporter,
-    'playwright.config.ts': `module.exports = { reporter: './reporter', };`,
-    'a.test.ts': `
-      import { test, expect } from '@playwright/test';
-      test('pass', async ({ page }) => {
-        await page.route('**/*', route => route.fulfill('<html></html>'));
-        await page.goto('http://localhost:1234');
-      });
-    `
-  }, { reporter: '' });
-
-  expect(result.exitCode).toBe(0);
-  expect(result.output).toBe(`
-hook      |Before Hooks
-fixture   |  fixture: browser
-pw:api    |    browserType.launch
-fixture   |  fixture: context
-pw:api    |    browser.newContext
-fixture   |  fixture: page
-pw:api    |    browserContext.newPage
-pw:api    |page.route @ a.test.ts:4
-pw:api    |page.goto(http://localhost:1234) @ a.test.ts:5
-pw:api    |route.fulfill @ a.test.ts:4
-hook      |After Hooks
-fixture   |  fixture: page
-fixture   |  fixture: context
-`);
-});
-
 test('should not propagate errors from within toPass', async ({ runInlineTest }) => {
  const result = await runInlineTest({
    'reporter.ts': stepIndentReporter,