From c4bb24f02f913ee76e30da6d8944d8430bd99c76 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Fri, 16 Aug 2024 08:03:02 -0700
Subject: [PATCH 01/25] feat(test runner): record trace after a test-scoped
 fixture teardown times out (#32160)

Fixes #30718, fixes #31537.
---
 packages/playwright/src/index.ts              |  7 +++-
 .../playwright-test/playwright.trace.spec.ts  | 40 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts
index 8b392afa37..130e731b5a 100644
--- a/packages/playwright/src/index.ts
+++ b/packages/playwright/src/index.ts
@@ -248,6 +248,11 @@ const playwrightFixtures: Fixtures<TestFixtures, WorkerFixtures> = ({
   }, { auto: 'all-hooks-included',  title: 'context configuration', box: true } as any],
 
   _setupArtifacts: [async ({ playwright, screenshot }, use, testInfo) => {
+    // This fixture has a separate zero-timeout slot to ensure that artifact collection
+    // happens even after some fixtures or hooks time out.
+    // Now that default test timeout is known, we can replace zero with an actual value.
+    testInfo.setTimeout(testInfo.project.timeout);
+
     const artifactsRecorder = new ArtifactsRecorder(playwright, tracing().artifactsDir(), screenshot);
     await artifactsRecorder.willStartTest(testInfo as TestInfoImpl);
     const csiListener: ClientInstrumentationListener = {
@@ -297,7 +302,7 @@ const playwrightFixtures: Fixtures<TestFixtures, WorkerFixtures> = ({
     clientInstrumentation.removeListener(csiListener);
     await artifactsRecorder.didFinishTest();
 
-  }, { auto: 'all-hooks-included',  title: 'trace recording', box: true } as any],
+  }, { auto: 'all-hooks-included',  title: 'trace recording', box: true, timeout: 0 } as any],
 
   _contextFactory: [async ({ browser, video, _reuseContext, _combinedContextOptions /** mitigate dep-via-auto lack of traceability */ }, use, testInfo) => {
     const testInfoImpl = testInfo as TestInfoImpl;
diff --git a/tests/playwright-test/playwright.trace.spec.ts b/tests/playwright-test/playwright.trace.spec.ts
index e4a1efe4d7..5ca08925b4 100644
--- a/tests/playwright-test/playwright.trace.spec.ts
+++ b/tests/playwright-test/playwright.trace.spec.ts
@@ -1225,4 +1225,44 @@ test('should not nest top level expect into unfinished api calls ', {
   ]);
 });
 
+test('should record trace after fixture teardown timeout', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/30718' },
+}, async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'a.spec.ts': `
+      import { test as base, expect } from '@playwright/test';
+      const test = base.extend({
+        fixture: async ({}, use) => {
+          await use('foo');
+          await new Promise(() => {});
+        },
+      });
+      // Note: it is important that "fixture" is last, so that it runs the teardown first.
+      test('fails', async ({ page, fixture }) => {
+        await page.evaluate(() => console.log('from the page'));
+      });
+    `,
+  }, { trace: 'on', timeout: '3000' }, { DEBUG: 'pw:test' });
+  expect(result.exitCode).toBe(1);
+  expect(result.failed).toBe(1);
 
+  const tracePath = test.info().outputPath('test-results', 'a-fails', 'trace.zip');
+  const trace = await parseTrace(tracePath);
+  expect(trace.actionTree).toEqual([
+    'Before Hooks',
+    '  fixture: browser',
+    '    browserType.launch',
+    '  fixture: context',
+    '    browser.newContext',
+    '  fixture: page',
+    '    browserContext.newPage',
+    '  fixture: fixture',
+    'page.evaluate',
+    'After Hooks',
+    '  fixture: fixture',
+    'Worker Cleanup',
+    '  fixture: browser',
+  ]);
+  // Check console events to make sure that library trace is recorded.
+  expect(trace.events).toContainEqual(expect.objectContaining({ type: 'console', text: 'from the page' }));
+});

From 3e6bba0b7909326c3f61b682d77b2746b776fdcf Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 16 Aug 2024 17:12:45 +0200
Subject: [PATCH 02/25] fix(only changed): make only-changed work together with
 list mode (#32196)

Closes https://github.com/microsoft/playwright/issues/32161

Turns out we were wrong in
https://github.com/microsoft/playwright/pull/31727#discussion_r1685793870!

Adds support for `--only-changed` in combination with `--list` by
removing our code to prevent that.
---
 packages/playwright/src/runner/tasks.ts    | 12 +++++------
 tests/playwright-test/only-changed.spec.ts | 25 +++++++++++++++++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/playwright/src/runner/tasks.ts b/packages/playwright/src/runner/tasks.ts
index 4220291a08..73eb31f1e7 100644
--- a/packages/playwright/src/runner/tasks.ts
+++ b/packages/playwright/src/runner/tasks.ts
@@ -63,7 +63,7 @@ export class TestRun {
 export function createTaskRunner(config: FullConfigInternal, reporters: ReporterV2[]): TaskRunner<TestRun> {
   const taskRunner = TaskRunner.create<TestRun>(reporters, config.config.globalTimeout);
   addGlobalSetupTasks(taskRunner, config);
-  taskRunner.addTask('load tests', createLoadTask('in-process', { filterOnly: true, filterOnlyChanged: true, failOnLoadErrors: true }));
+  taskRunner.addTask('load tests', createLoadTask('in-process', { filterOnly: true, failOnLoadErrors: true }));
   addRunTasks(taskRunner, config);
   return taskRunner;
 }
@@ -76,14 +76,14 @@ export function createTaskRunnerForWatchSetup(config: FullConfigInternal, report
 
 export function createTaskRunnerForWatch(config: FullConfigInternal, reporters: ReporterV2[], additionalFileMatcher?: Matcher): TaskRunner<TestRun> {
   const taskRunner = TaskRunner.create<TestRun>(reporters);
-  taskRunner.addTask('load tests', createLoadTask('out-of-process', { filterOnly: true, filterOnlyChanged: true, failOnLoadErrors: false, doNotRunDepsOutsideProjectFilter: true, additionalFileMatcher }));
+  taskRunner.addTask('load tests', createLoadTask('out-of-process', { filterOnly: true,  failOnLoadErrors: false, doNotRunDepsOutsideProjectFilter: true, additionalFileMatcher }));
   addRunTasks(taskRunner, config);
   return taskRunner;
 }
 
 export function createTaskRunnerForTestServer(config: FullConfigInternal, reporters: ReporterV2[]): TaskRunner<TestRun> {
   const taskRunner = TaskRunner.create<TestRun>(reporters);
-  taskRunner.addTask('load tests', createLoadTask('out-of-process', { filterOnly: true, filterOnlyChanged: true, failOnLoadErrors: false, doNotRunDepsOutsideProjectFilter: true }));
+  taskRunner.addTask('load tests', createLoadTask('out-of-process', { filterOnly: true, failOnLoadErrors: false, doNotRunDepsOutsideProjectFilter: true }));
   addRunTasks(taskRunner, config);
   return taskRunner;
 }
@@ -108,7 +108,7 @@ function addRunTasks(taskRunner: TaskRunner<TestRun>, config: FullConfigInternal
 
 export function createTaskRunnerForList(config: FullConfigInternal, reporters: ReporterV2[], mode: 'in-process' | 'out-of-process', options: { failOnLoadErrors: boolean }): TaskRunner<TestRun> {
   const taskRunner = TaskRunner.create<TestRun>(reporters, config.config.globalTimeout);
-  taskRunner.addTask('load tests', createLoadTask(mode, { ...options, filterOnly: false, filterOnlyChanged: false }));
+  taskRunner.addTask('load tests', createLoadTask(mode, { ...options, filterOnly: false }));
   taskRunner.addTask('report begin', createReportBeginTask());
   return taskRunner;
 }
@@ -222,14 +222,14 @@ function createListFilesTask(): Task<TestRun> {
   };
 }
 
-function createLoadTask(mode: 'out-of-process' | 'in-process', options: { filterOnly: boolean, filterOnlyChanged: boolean, failOnLoadErrors: boolean, doNotRunDepsOutsideProjectFilter?: boolean, additionalFileMatcher?: Matcher }): Task<TestRun> {
+function createLoadTask(mode: 'out-of-process' | 'in-process', options: { filterOnly: boolean, failOnLoadErrors: boolean, doNotRunDepsOutsideProjectFilter?: boolean, additionalFileMatcher?: Matcher }): Task<TestRun> {
   return {
     setup: async (reporter, testRun, errors, softErrors) => {
       await collectProjectsAndTestFiles(testRun, !!options.doNotRunDepsOutsideProjectFilter, options.additionalFileMatcher);
       await loadFileSuites(testRun, mode, options.failOnLoadErrors ? errors : softErrors);
 
       let cliOnlyChangedMatcher: Matcher | undefined = undefined;
-      if (testRun.config.cliOnlyChanged && options.filterOnlyChanged) {
+      if (testRun.config.cliOnlyChanged) {
         for (const plugin of testRun.config.plugins)
           await plugin.instance?.populateDependencies?.();
         const changedFiles = await detectChangedTestFiles(testRun.config.cliOnlyChanged, testRun.config.configDir);
diff --git a/tests/playwright-test/only-changed.spec.ts b/tests/playwright-test/only-changed.spec.ts
index 355bcf977d..901ec7511c 100644
--- a/tests/playwright-test/only-changed.spec.ts
+++ b/tests/playwright-test/only-changed.spec.ts
@@ -413,4 +413,27 @@ test('should run project dependencies of changed tests', {
   expect(result.passed).toBe(1);
 
   expect(result.output).toContain('setup test is executed');
-});
\ No newline at end of file
+});
+
+test('should work with list mode', async ({ runInlineTest, git, writeFiles }) => {
+  await writeFiles({
+    'a.spec.ts': `
+    import { test, expect } from '@playwright/test';
+    test('fails', () => { expect(1).toBe(2); });
+  `,
+  });
+
+  git(`add .`);
+  git(`commit -m init`);
+
+  const result = await runInlineTest({
+    'b.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      test('fails', () => { expect(1).toBe(2); });
+    `
+  }, { 'only-changed': true, 'list': true });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.output).toContain('b.spec.ts');
+  expect(result.output).not.toContain('a.spec.ts');
+});

From 743565ee3e1ef47e06abd60100ec0552ba51f077 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Fri, 16 Aug 2024 20:21:05 +0200
Subject: [PATCH 03/25] chore: generate self-signed certificates for socks
 proxy (#32192)

---
 .../playwright-core/bin/socks-certs/README.md |  11 --
 .../playwright-core/bin/socks-certs/cert.pem  |  19 --
 .../playwright-core/bin/socks-certs/key.pem   |  28 ---
 .../socksClientCertificatesInterceptor.ts     |  10 +-
 packages/playwright-core/src/utils/crypto.ts  | 168 ++++++++++++++++++
 5 files changed, 171 insertions(+), 65 deletions(-)
 delete mode 100644 packages/playwright-core/bin/socks-certs/README.md
 delete mode 100644 packages/playwright-core/bin/socks-certs/cert.pem
 delete mode 100644 packages/playwright-core/bin/socks-certs/key.pem

diff --git a/packages/playwright-core/bin/socks-certs/README.md b/packages/playwright-core/bin/socks-certs/README.md
deleted file mode 100644
index 4950ef1f3c..0000000000
--- a/packages/playwright-core/bin/socks-certs/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Certfificates for Socks Proxy
-
-These certificates are used when client certificates are used with
-Playwright. Playwright then creates a Socks proxy, which sits between
-the browser and the actual target server. The Socks proxy uses this certificiate
-to talk to the browser and establishes its own secure TLS connection to the server.
-The certificates are generated via:
-
-```bash
-openssl req -new -newkey rsa:2048 -days 3650 -nodes -x509 -keyout key.pem -out cert.pem -subj "/CN=localhost"
-```
diff --git a/packages/playwright-core/bin/socks-certs/cert.pem b/packages/playwright-core/bin/socks-certs/cert.pem
deleted file mode 100644
index cce2f57bd5..0000000000
--- a/packages/playwright-core/bin/socks-certs/cert.pem
+++ /dev/null
@@ -1,19 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDCTCCAfGgAwIBAgIUTcrzEueVL/OuLHr4LBIPWeS4UL0wDQYJKoZIhvcNAQEL
-BQAwFDESMBAGA1UEAwwJbG9jYWxob3N0MB4XDTI0MDcwNDA4NDAzNFoXDTM0MDcw
-MjA4NDAzNFowFDESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG9w0BAQEF
-AAOCAQ8AMIIBCgKCAQEApof+SZVN4UGma4xJDVHhMSpmEJoCdMPr+HFadJJK/brF
-BNOhA1C5wNk8oD/XYo7enAHQH/EsBnq4MMxv79rXTGnIdXMF+43GdMDh5kh81FQy
-Esw8Vt4eif9eZkjUxI2GHhR2ovJewmQa7E+SeUB2RzJTqz8QPLhd74JFfgaci+S2
-8L37ScVjcw55T1PcNflzB4vwsQHBT3yND0MLDhm+8MLzmTl4Mw5PgIOaBl5Jh8Tr
-wQF4eeeB3FPJoMQhTP8aGBjW1mo+NmSSRAPIAZyhmCAnDeC33yRjAaiHjaL5Pr9f
-wt5zoF5+U1xWhGXWzGOE6p/VTj62F9a2fOXNHclYJQIDAQABo1MwUTAdBgNVHQ4E
-FgQU9BoVzGtb5x70KqGO/89N1hyqi5kwHwYDVR0jBBgwFoAU9BoVzGtb5x70KqGO
-/89N1hyqi5kwDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAYcbI
-wvcfx2p8z0RNN3EA+epKX1SagZyJX4ORIO8kln1sDU+ceHde3n3xnp1dg6HG2qh1
-a7CZub/fNUaP9R8+6iiV0wPT7Ybkb2NIJcH1yq+/bfSS5OC5DO0yv9SUADdBoDwa
-zOuBAqdcYW1BHYcbAzsQnniRcejHu06ioaS6SwwJ8150rQnLT4Lh9LAl40W6v4nZ
-NdTGQETTrbjcgH1ER4IhWTKtVyPOxGF9A/OOawMEdfS8BhUO7YRS4QNFFaQMrJAb
-MDhDtjSyDogLr8P43xjjWvQWG9a7zTF0kKEsdJ0cEG5HATpg8bPHmrouxbs2HGeH
-kJXzMykrsYyXsInN3w==
------END CERTIFICATE-----
diff --git a/packages/playwright-core/bin/socks-certs/key.pem b/packages/playwright-core/bin/socks-certs/key.pem
deleted file mode 100644
index 75f8e3bccc..0000000000
--- a/packages/playwright-core/bin/socks-certs/key.pem
+++ /dev/null
@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCmh/5JlU3hQaZr
-jEkNUeExKmYQmgJ0w+v4cVp0kkr9usUE06EDULnA2TygP9dijt6cAdAf8SwGergw
-zG/v2tdMach1cwX7jcZ0wOHmSHzUVDISzDxW3h6J/15mSNTEjYYeFHai8l7CZBrs
-T5J5QHZHMlOrPxA8uF3vgkV+BpyL5LbwvftJxWNzDnlPU9w1+XMHi/CxAcFPfI0P
-QwsOGb7wwvOZOXgzDk+Ag5oGXkmHxOvBAXh554HcU8mgxCFM/xoYGNbWaj42ZJJE
-A8gBnKGYICcN4LffJGMBqIeNovk+v1/C3nOgXn5TXFaEZdbMY4Tqn9VOPrYX1rZ8
-5c0dyVglAgMBAAECggEAB6zX4vNPKhUZAvbtvP/rlZUDLDu05kXLX+F1jk7ZxvTv
-NKg+UQVM8l7wxN/8YM3944nP2lEGuuu4BoO9mvvmlV6Avy0EdxITNflX0AHCQxT4
-U9Z253gIR0ruQl+T8tUk+8jsqNjr1iC//ukx8oWujdx7b7aR3IKQzcOeyU6rs2TN
-lyrVVsEaFVi9+wCw0xyiCmPlobrn+egdigw7Zhp2BRinC6W9eMxuPS2hlhQUhBm/
-eiD96YWp0RAv/L5qO93reoXIAzrrLdcUgPEnnq1zN7y2xihU2+B2sTph1m/A26+J
-yPcXd7vQrXlRXQU6PaCa+0oJULlpiAzy3HPbnr4BkQKBgQDdmekTX8dQqiEZPX1C
-017QRFbx0/x/TDFDSeJbDeauMzzCaGqCO2WVmYmTvFtby2G4/6BYowVtJVHm4uJl
-XsYk8dWIQGLPIj1Cw7ZieJvb2EVRxgnY2oMaOTOazHzPHFzZV718zwEeZrryT82J
-881E8wgM8V3DjkS4ye3TbwvimQKBgQDAYa/IdnpAg5z1TREi9Tt8fnoGpmSscAak
-USgeXVsvoNzXXkE94MiiCOOrX1r68TWYDAzq6MKGDewkWOfLwXWR6D5C2LyE1q9P
-1pxstgs/nC3ZUTz0yEH47ahSmhywhGlvXXOQEXUSLiVTOdeMCubMqwQW80F1868n
-aBHcj5/lbQKBgQDIojjsWaNT3TTqbUmj30vQtI8jlBLgDlPr4FEYr5VT0wAH5BHK
-p4xpzgFJyRfOHG312TuMBM087LUinfjsXsp3WJ1EJ0dO0mk0sY3HyfsTKNRaHTt9
-Ixnf/DpExS+bNMq73Tyqa6FPrSNFkAtAA4SuEHwRe9aw33ZI+EpjS/8uwQKBgQCi
-9NwqSLlLVnColEw0uVdXH+cLJPzX19i4bQo3lkp8MJ2ATJWk7XflUPRQoGf3ckQ8
-c9CpVtoXJUnmi+xkeo21Nu0uQFqHhzZewWIk75rdmdR4ZUjl649+ZQkUVviASNjq
-fVU7Lp5k9POm6LL9K+rOaPoA2rKTUAQItC2VD4+YjQKBgB6kgvgN6Mz/u0RE3kkV
-2GOoP5sso71Hxwh7o6JEzUMhR+e/T/LLcBwEjLYcf1FYRySHsXLn2Ar/Uw1J7pAZ
-ud54/at+7mTDliaT8Ar7S9vcso7ZfmuDX9qB9+c77idPskVBPo2tjJbwvFcB6sww
-5Elcfmj6tEP4YLJ6Kv3qTPhT
------END PRIVATE KEY-----
diff --git a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
index 4e371df201..5510303882 100644
--- a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
+++ b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
@@ -15,14 +15,12 @@
  */
 
 import net from 'net';
-import path from 'path';
 import http2 from 'http2';
 import type https from 'https';
-import fs from 'fs';
 import tls from 'tls';
 import stream from 'stream';
 import { createSocket, createTLSSocket } from '../utils/happy-eyeballs';
-import { escapeHTML, ManualPromise, rewriteErrorMessage } from '../utils';
+import { escapeHTML, generateSelfSignedCertificate, ManualPromise, rewriteErrorMessage } from '../utils';
 import type { SocksSocketClosedPayload, SocksSocketDataPayload, SocksSocketRequestedPayload } from '../common/socksProxy';
 import { SocksProxy } from '../common/socksProxy';
 import type * as channels from '@protocol/channels';
@@ -32,10 +30,8 @@ let dummyServerTlsOptions: tls.TlsOptions | undefined = undefined;
 function loadDummyServerCertsIfNeeded() {
   if (dummyServerTlsOptions)
     return;
-  dummyServerTlsOptions = {
-    key: fs.readFileSync(path.join(__dirname, '../../bin/socks-certs/key.pem')),
-    cert: fs.readFileSync(path.join(__dirname, '../../bin/socks-certs/cert.pem')),
-  };
+  const { cert, key } = generateSelfSignedCertificate();
+  dummyServerTlsOptions = { key, cert };
 }
 
 class ALPNCache {
diff --git a/packages/playwright-core/src/utils/crypto.ts b/packages/playwright-core/src/utils/crypto.ts
index f3e47f6993..5da56d4e9b 100644
--- a/packages/playwright-core/src/utils/crypto.ts
+++ b/packages/playwright-core/src/utils/crypto.ts
@@ -15,6 +15,7 @@
  */
 
 import crypto from 'crypto';
+import { assert } from './debug';
 
 export function createGuid(): string {
   return crypto.randomBytes(16).toString('hex');
@@ -25,3 +26,170 @@ export function calculateSha1(buffer: Buffer | string): string {
   hash.update(buffer);
   return hash.digest('hex');
 }
+
+// Variable-length quantity encoding aka. base-128 encoding
+function encodeBase128(value: number): Buffer {
+  const bytes = [];
+  do {
+    let byte = value & 0x7f;
+    value >>>= 7;
+    if (bytes.length > 0) byte |= 0x80;
+    bytes.push(byte);
+  } while (value > 0);
+  return Buffer.from(bytes.reverse());
+};
+
+// ASN1/DER Speficiation:   https://www.itu.int/rec/T-REC-X.680-X.693-202102-I/en
+class DER {
+  static encodeSequence(data: Buffer[]): Buffer {
+    return this._encode(0x30, Buffer.concat(data));
+  }
+  static encodeInteger(data: number): Buffer {
+    assert(data >= -128 && data <= 127);
+    return this._encode(0x02, Buffer.from([data]));
+  }
+  static encodeObjectIdentifier(oid: string): Buffer {
+    const parts = oid.split('.').map((v) => Number(v));
+    // Encode the second part, which could be large, using base-128 encoding if necessary
+    const output = [encodeBase128(40 * parts[0] + parts[1])];
+
+    for (let i = 2; i < parts.length; i++) {
+      output.push(encodeBase128(parts[i]));
+    }
+
+    return this._encode(0x06, Buffer.concat(output));
+  }
+  static encodeNull(): Buffer {
+    return Buffer.from([0x05, 0x00]);
+  }
+  static encodeSet(data: Buffer[]): Buffer {
+    assert(data.length === 1, 'Only one item in the set is supported. We\'d need to sort the data to support more.');
+    // We expect the data to be already sorted.
+    return this._encode(0x31, Buffer.concat(data));
+  }
+  static encodeExplicitContextDependent(tag: number, data: Buffer): Buffer {
+    return this._encode(0xa0 + tag, data);
+  }
+  static encodePrintableString(data: string): Buffer {
+    return this._encode(0x13, Buffer.from(data));
+  }
+  static encodeBitString(data: Buffer): Buffer {
+    // The first byte of the content is the number of unused bits at the end
+    const unusedBits = 0; // Assuming all bits are used
+    const content = Buffer.concat([Buffer.from([unusedBits]), data]);
+    return this._encode(0x03, content);
+  }
+  static encodeDate(date: Date): Buffer {
+    const year = date.getUTCFullYear();
+    const isGeneralizedTime = year >= 2050;
+    const parts = [
+      isGeneralizedTime ? year.toString() : year.toString().slice(-2),
+      (date.getUTCMonth() + 1).toString().padStart(2, '0'),
+      date.getUTCDate().toString().padStart(2, '0'),
+      date.getUTCHours().toString().padStart(2, '0'),
+      date.getUTCMinutes().toString().padStart(2, '0'),
+      date.getUTCSeconds().toString().padStart(2, '0')
+    ];
+    const encodedDate = parts.join('') + 'Z';
+    const tag = isGeneralizedTime ? 0x18 : 0x17; // 0x18 for GeneralizedTime, 0x17 for UTCTime
+    return this._encode(tag, Buffer.from(encodedDate));
+  }
+  private static _encode(tag: number, data: Buffer): Buffer {
+    const lengthBytes = this._encodeLength(data.length);
+    return Buffer.concat([Buffer.from([tag]), lengthBytes, data]);
+  }
+  private static _encodeLength(length: number): Buffer {
+    if (length < 128) {
+      return Buffer.from([length]);
+    } else {
+      const lengthBytes = [];
+      while (length > 0) {
+        lengthBytes.unshift(length & 0xFF);
+        length >>= 8;
+      }
+      return Buffer.from([0x80 | lengthBytes.length, ...lengthBytes]);
+    }
+  }
+}
+
+// X.509 Specification: https://datatracker.ietf.org/doc/html/rfc2459#section-4.1
+export function generateSelfSignedCertificate() {
+  const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', { modulusLength: 2048 });
+  const publicKeyDer = publicKey.export({ type: 'pkcs1', format: 'der' });
+
+  const oneYearInMilliseconds = 365 * 24 * 60 * 60 * 1_000;
+  const notBefore = new Date(new Date().getTime() - oneYearInMilliseconds);
+  const notAfter = new Date(new Date().getTime() + oneYearInMilliseconds);
+
+  // List of fields / structure: https://datatracker.ietf.org/doc/html/rfc2459#section-4.1
+  const tbsCertificate = DER.encodeSequence([
+    DER.encodeExplicitContextDependent(0, DER.encodeInteger(1)), // version
+    DER.encodeInteger(1), // serialNumber
+    DER.encodeSequence([
+      DER.encodeObjectIdentifier('1.2.840.113549.1.1.11'), // sha256WithRSAEncryption PKCS #1
+      DER.encodeNull()
+    ]), // signature
+    DER.encodeSequence([
+      DER.encodeSet([
+        DER.encodeSequence([
+          DER.encodeObjectIdentifier('2.5.4.3'), // commonName X.520 DN component
+          DER.encodePrintableString('localhost')
+        ]),
+      ]),
+      DER.encodeSet([
+        DER.encodeSequence([
+          DER.encodeObjectIdentifier('2.5.4.10'), // organizationName X.520 DN component
+          DER.encodePrintableString('Playwright Client Certificate Support')
+        ])
+      ])
+    ]), // issuer
+    DER.encodeSequence([
+      DER.encodeDate(notBefore), // notBefore
+      DER.encodeDate(notAfter), // notAfter
+    ]), // validity
+    DER.encodeSequence([
+      DER.encodeSet([
+        DER.encodeSequence([
+          DER.encodeObjectIdentifier('2.5.4.3'), // commonName X.520 DN component
+          DER.encodePrintableString('localhost')
+        ]),
+      ]),
+      DER.encodeSet([
+        DER.encodeSequence([
+          DER.encodeObjectIdentifier('2.5.4.10'), // organizationName X.520 DN component
+          DER.encodePrintableString('Playwright Client Certificate Support')
+        ])
+      ])
+    ]), // subject
+    DER.encodeSequence([
+      DER.encodeSequence([
+        DER.encodeObjectIdentifier('1.2.840.113549.1.1.1'), // rsaEncryption PKCS #1
+        DER.encodeNull()
+      ]),
+      DER.encodeBitString(publicKeyDer)
+    ]), // SubjectPublicKeyInfo
+  ]);
+
+  const signature = crypto.sign('sha256', tbsCertificate, privateKey);
+
+  const certificate = DER.encodeSequence([
+    tbsCertificate,
+    DER.encodeSequence([
+      DER.encodeObjectIdentifier('1.2.840.113549.1.1.11'), // sha256WithRSAEncryption PKCS #1
+      DER.encodeNull()
+    ]),
+    DER.encodeBitString(signature)
+  ]);
+
+  const certPem = [
+    '-----BEGIN CERTIFICATE-----',
+    // Split the base64 string into lines of 64 characters
+    certificate.toString('base64').match(/.{1,64}/g)!.join('\n'),
+    '-----END CERTIFICATE-----'
+  ].join('\n');
+
+  return {
+    cert: certPem,
+    key: privateKey.export({ type: 'pkcs1', format: 'pem' }),
+  };
+}

From 570e05699e3b70b942e902bd93cfc783b73930a4 Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Sat, 17 Aug 2024 01:56:18 -0700
Subject: [PATCH 04/25] feat(chromium-tip-of-tree): roll to r1250 (#32202)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 packages/playwright-core/browsers.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index 2f987ac082..d0b427f41b 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -9,9 +9,9 @@
     },
     {
       "name": "chromium-tip-of-tree",
-      "revision": "1249",
+      "revision": "1250",
       "installByDefault": false,
-      "browserVersion": "129.0.6654.0"
+      "browserVersion": "129.0.6658.0"
     },
     {
       "name": "firefox",

From faf4853259d9efdc9802ed79fe36490740dd8424 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 19 Aug 2024 09:02:14 +0200
Subject: [PATCH 05/25] chore: validate client-certificates on context creation
 (#32168)

---
 packages/playwright-core/src/server/fetch.ts  |  6 +-
 .../socksClientCertificatesInterceptor.ts     | 70 ++++++++++++-------
 tests/library/client-certificates.spec.ts     | 14 ++--
 3 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/packages/playwright-core/src/server/fetch.ts b/packages/playwright-core/src/server/fetch.ts
index 6367e8875e..a4d9cd9ee2 100644
--- a/packages/playwright-core/src/server/fetch.ts
+++ b/packages/playwright-core/src/server/fetch.ts
@@ -40,7 +40,7 @@ import { Tracing } from './trace/recorder/tracing';
 import type * as types from './types';
 import type { HeadersArray, ProxySettings } from './types';
 import { kMaxCookieExpiresDateInSeconds } from './network';
-import { clientCertificatesToTLSOptions, rewriteOpenSSLErrorIfNeeded } from './socksClientCertificatesInterceptor';
+import { getMatchingTLSOptionsForOrigin, rewriteOpenSSLErrorIfNeeded } from './socksClientCertificatesInterceptor';
 
 type FetchRequestOptions = {
   userAgent: string;
@@ -195,7 +195,7 @@ export abstract class APIRequestContext extends SdkObject {
       maxRedirects: params.maxRedirects === 0 ? -1 : params.maxRedirects === undefined ? 20 : params.maxRedirects,
       timeout,
       deadline,
-      ...clientCertificatesToTLSOptions(this._defaultOptions().clientCertificates, requestUrl.origin),
+      ...getMatchingTLSOptionsForOrigin(this._defaultOptions().clientCertificates, requestUrl.origin),
       __testHookLookup: (params as any).__testHookLookup,
     };
     // rejectUnauthorized = undefined is treated as true in Node.js 12.
@@ -365,7 +365,7 @@ export abstract class APIRequestContext extends SdkObject {
             maxRedirects: options.maxRedirects - 1,
             timeout: options.timeout,
             deadline: options.deadline,
-            ...clientCertificatesToTLSOptions(this._defaultOptions().clientCertificates, url.origin),
+            ...getMatchingTLSOptionsForOrigin(this._defaultOptions().clientCertificates, url.origin),
             __testHookLookup: options.__testHookLookup,
           };
           // rejectUnauthorized = undefined is treated as true in node 12.
diff --git a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
index 5510303882..32a7b1cebd 100644
--- a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
+++ b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts
@@ -157,7 +157,6 @@ class SocksProxyConnection {
         let targetTLS: tls.TLSSocket | undefined = undefined;
 
         const handleError = (error: Error) => {
-          error = rewriteOpenSSLErrorIfNeeded(error);
           debugLogger.log('client-certificates', `error when connecting to target: ${error.message.replaceAll('\n', ' ')}`);
           const responseBody = escapeHTML('Playwright client-certificate error: ' + error.message)
               .replaceAll('\n', ' <br>');
@@ -198,14 +197,6 @@ class SocksProxyConnection {
           }
         };
 
-        let secureContext: tls.SecureContext;
-        try {
-          secureContext = tls.createSecureContext(clientCertificatesToTLSOptions(this.socksProxy.clientCertificates, new URL(`https://${this.host}:${this.port}`).origin));
-        } catch (error) {
-          handleError(error);
-          return;
-        }
-
         if (this._closed) {
           internalTLS.destroy();
           return;
@@ -217,7 +208,7 @@ class SocksProxyConnection {
           rejectUnauthorized: !this.socksProxy.ignoreHTTPSErrors,
           ALPNProtocols: [internalTLS.alpnProtocol || 'http/1.1'],
           servername: !net.isIP(this.host) ? this.host : undefined,
-          secureContext,
+          secureContext: this.socksProxy.secureContextMap.get(new URL(`https://${this.host}:${this.port}`).origin),
         });
 
         targetTLS.once('secureConnect', () => {
@@ -236,7 +227,7 @@ export class ClientCertificatesProxy {
   _socksProxy: SocksProxy;
   private _connections: Map<string, SocksProxyConnection> = new Map();
   ignoreHTTPSErrors: boolean | undefined;
-  clientCertificates: channels.BrowserNewContextOptions['clientCertificates'];
+  secureContextMap: Map<string, tls.SecureContext> = new Map();
   alpnCache: ALPNCache;
 
   constructor(
@@ -244,7 +235,7 @@ export class ClientCertificatesProxy {
   ) {
     this.alpnCache = new ALPNCache();
     this.ignoreHTTPSErrors = contextOptions.ignoreHTTPSErrors;
-    this.clientCertificates = contextOptions.clientCertificates;
+    this._initSecureContexts(contextOptions.clientCertificates);
     this._socksProxy = new SocksProxy();
     this._socksProxy.setPattern('*');
     this._socksProxy.addListener(SocksProxy.Events.SocksRequested, async (payload: SocksSocketRequestedPayload) => {
@@ -266,6 +257,27 @@ export class ClientCertificatesProxy {
     loadDummyServerCertsIfNeeded();
   }
 
+  _initSecureContexts(clientCertificates: channels.BrowserNewContextOptions['clientCertificates']) {
+    // Step 1. Group certificates by origin.
+    const origin2certs = new Map<string, channels.BrowserNewContextOptions['clientCertificates']>();
+    for (const cert of clientCertificates || []) {
+      const origin = normalizeOrigin(cert.origin);
+      const certs = origin2certs.get(origin) || [];
+      certs.push(cert);
+      origin2certs.set(origin, certs);
+    }
+
+    // Step 2. Create secure contexts for each origin.
+    for (const [origin, certs] of origin2certs) {
+      try {
+        this.secureContextMap.set(origin, tls.createSecureContext(convertClientCertificatesToTLSOptions(certs)));
+      } catch (error) {
+        error = rewriteOpenSSLErrorIfNeeded(error);
+        throw rewriteErrorMessage(error, `Failed to load client certificate: ${error.message}`);
+      }
+    }
+  }
+
   public async listen(): Promise<string> {
     const port = await this._socksProxy.listen(0, '127.0.0.1');
     return `socks5://127.0.0.1:${port}`;
@@ -276,25 +288,25 @@ export class ClientCertificatesProxy {
   }
 }
 
-export function clientCertificatesToTLSOptions(
-  clientCertificates: channels.BrowserNewContextOptions['clientCertificates'],
-  origin: string
+function normalizeOrigin(origin: string): string {
+  try {
+    return new URL(origin).origin;
+  } catch (error) {
+    return origin;
+  }
+}
+
+function convertClientCertificatesToTLSOptions(
+  clientCertificates: channels.BrowserNewContextOptions['clientCertificates']
 ): Pick<https.RequestOptions, 'pfx' | 'key' | 'cert'> | undefined {
-  const matchingCerts = clientCertificates?.filter(c => {
-    try {
-      return new URL(c.origin).origin === origin;
-    } catch (error) {
-      return c.origin === origin;
-    }
-  });
-  if (!matchingCerts || !matchingCerts.length)
+  if (!clientCertificates || !clientCertificates.length)
     return;
   const tlsOptions = {
     pfx: [] as { buf: Buffer, passphrase?: string }[],
     key: [] as { pem: Buffer, passphrase?: string }[],
     cert: [] as Buffer[],
   };
-  for (const cert of matchingCerts) {
+  for (const cert of clientCertificates) {
     if (cert.cert)
       tlsOptions.cert.push(cert.cert);
     if (cert.key)
@@ -305,6 +317,16 @@ export function clientCertificatesToTLSOptions(
   return tlsOptions;
 }
 
+export function getMatchingTLSOptionsForOrigin(
+  clientCertificates: channels.BrowserNewContextOptions['clientCertificates'],
+  origin: string
+): Pick<https.RequestOptions, 'pfx' | 'key' | 'cert'> | undefined {
+  const matchingCerts = clientCertificates?.filter(c =>
+    normalizeOrigin(c.origin) === origin
+  );
+  return convertClientCertificatesToTLSOptions(matchingCerts);
+}
+
 function rewriteToLocalhostIfNeeded(host: string): string {
   return host === 'local.playwright' ? 'localhost' : host;
 }
diff --git a/tests/library/client-certificates.spec.ts b/tests/library/client-certificates.spec.ts
index 11508e1081..fa7eb8bbbc 100644
--- a/tests/library/client-certificates.spec.ts
+++ b/tests/library/client-certificates.spec.ts
@@ -362,32 +362,26 @@ test.describe('browser', () => {
 
   test('should fail with matching certificates in legacy pfx format', async ({ browser, startCCServer, asset, browserName }) => {
     const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
-    const page = await browser.newPage({
+    await expect(browser.newPage({
       ignoreHTTPSErrors: true,
       clientCertificates: [{
         origin: new URL(serverURL).origin,
         pfxPath: asset('client-certificates/client/trusted/cert-legacy.pfx'),
         passphrase: 'secure'
       }],
-    });
-    await page.goto(serverURL);
-    await expect(page.getByText('Unsupported TLS certificate.')).toBeVisible();
-    await page.close();
+    })).rejects.toThrow('Unsupported TLS certificate');
   });
 
   test('should throw a http error if the pfx passphrase is incorect', async ({ browser, startCCServer, asset, browserName }) => {
     const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
-    const page = await browser.newPage({
+    await expect(browser.newPage({
       ignoreHTTPSErrors: true,
       clientCertificates: [{
         origin: new URL(serverURL).origin,
         pfxPath: asset('client-certificates/client/trusted/cert.pfx'),
         passphrase: 'this-password-is-incorrect'
       }],
-    });
-    await page.goto(serverURL);
-    await expect(page.getByText('Playwright client-certificate error: mac verify failure')).toBeVisible();
-    await page.close();
+    })).rejects.toThrow('Failed to load client certificate: mac verify failure');
   });
 
   test('should pass with matching certificates on context APIRequestContext instance', async ({ browser, startCCServer, asset, browserName }) => {

From 74f5ce54896eebec4050470874cc9a9ec4a50965 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 19 Aug 2024 09:11:20 +0200
Subject: [PATCH 06/25] docs: store parent type reference in documentation.js
 (#32215)

---
 utils/doclint/documentation.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/utils/doclint/documentation.js b/utils/doclint/documentation.js
index 1c63421524..77b20ca769 100644
--- a/utils/doclint/documentation.js
+++ b/utils/doclint/documentation.js
@@ -353,6 +353,8 @@ class Member {
     this.clazz = null;
     /** @type {Member=} */
     this.enclosingMethod = undefined;
+    /** @type {Member=} */
+    this.parent = undefined;
     this.async = false;
     this.alias = name;
     this.overloadIndex = 0;
@@ -372,10 +374,11 @@ class Member {
     this.args = new Map();
     if (this.kind === 'method')
       this.enclosingMethod = this;
-    const indexType = type => {
-      type.deepProperties().forEach(p => {
+    const indexArg = (/** @type {Member} */ arg) => {
+      arg.type?.deepProperties().forEach(p => {
         p.enclosingMethod = this;
-        indexType(p.type);
+        p.parent = arg;
+        indexArg(p);
       });
     }
     for (const arg of this.argsArray) {
@@ -385,7 +388,7 @@ class Member {
         // @ts-ignore
         arg.type.properties.sort((p1, p2) => p1.name.localeCompare(p2.name));
       }
-      indexType(arg.type);
+      indexArg(arg);
     }
   }
 

From 010778f6c5543d112a65d18fff34556c30bf5776 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 19 Aug 2024 09:24:32 +0200
Subject: [PATCH 07/25] feat(client-certificates): allow passing certificates
 from memory (#32210)

---
 docs/src/api/params.md                        |  5 +-
 .../src/client/browserContext.ts              | 24 +++--
 packages/playwright-core/src/client/types.ts  |  3 +
 packages/playwright-core/types/types.d.ts     | 92 +++++++++++++++----
 packages/playwright/types/test.d.ts           |  8 +-
 tests/library/client-certificates.spec.ts     | 30 ++++++
 6 files changed, 132 insertions(+), 30 deletions(-)

diff --git a/docs/src/api/params.md b/docs/src/api/params.md
index f4adc23a3c..5aa9c6a5ab 100644
--- a/docs/src/api/params.md
+++ b/docs/src/api/params.md
@@ -531,15 +531,18 @@ Does not enforce fixed viewport, allows resizing window in the headed mode.
 - `clientCertificates` <[Array]<[Object]>>
   - `origin` <[string]> Exact origin that the certificate is valid for. Origin includes `https` protocol, a hostname and optionally a port.
   - `certPath` ?<[path]> Path to the file with the certificate in PEM format.
+  - `cert` ?<[Buffer]> Direct value of the certificate in PEM format.
   - `keyPath` ?<[path]> Path to the file with the private key in PEM format.
+  - `key` ?<[Buffer]> Direct value of the private key in PEM format.
   - `pfxPath` ?<[path]> Path to the PFX or PKCS12 encoded private key and certificate chain.
+  - `pfx` ?<[Buffer]> Direct value of the PFX or PKCS12 encoded private key and certificate chain.
   - `passphrase` ?<[string]> Passphrase for the private key (PEM or PFX).
 
 TLS Client Authentication allows the server to request a client certificate and verify it.
 
 **Details**
 
-An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for.
+An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for.
 
 :::note
 Using Client Certificates in combination with Proxy Servers is not supported.
diff --git a/packages/playwright-core/src/client/browserContext.ts b/packages/playwright-core/src/client/browserContext.ts
index 5991fcafd9..c4f7827840 100644
--- a/packages/playwright-core/src/client/browserContext.ts
+++ b/packages/playwright-core/src/client/browserContext.ts
@@ -552,13 +552,19 @@ function toAcceptDownloadsProtocol(acceptDownloads?: boolean) {
 export async function toClientCertificatesProtocol(certs?: BrowserContextOptions['clientCertificates']): Promise<channels.PlaywrightNewRequestParams['clientCertificates']> {
   if (!certs)
     return undefined;
-  return await Promise.all(certs.map(async cert => {
-    return {
-      origin: cert.origin,
-      cert: cert.certPath ? await fs.promises.readFile(cert.certPath) : undefined,
-      key: cert.keyPath ? await fs.promises.readFile(cert.keyPath) : undefined,
-      pfx: cert.pfxPath ? await fs.promises.readFile(cert.pfxPath) : undefined,
-      passphrase: cert.passphrase,
-    };
-  }));
+
+  const bufferizeContent = async (value?: Buffer, path?: string): Promise<Buffer | undefined> => {
+    if (value)
+      return value;
+    if (path)
+      return await fs.promises.readFile(path);
+  };
+
+  return await Promise.all(certs.map(async cert => ({
+    origin: cert.origin,
+    cert: await bufferizeContent(cert.cert, cert.certPath),
+    key: await bufferizeContent(cert.key, cert.keyPath),
+    pfx: await bufferizeContent(cert.pfx, cert.pfxPath),
+    passphrase: cert.passphrase,
+  })));
 }
diff --git a/packages/playwright-core/src/client/types.ts b/packages/playwright-core/src/client/types.ts
index 8101257280..37d374e3ec 100644
--- a/packages/playwright-core/src/client/types.ts
+++ b/packages/playwright-core/src/client/types.ts
@@ -49,8 +49,11 @@ export const kLifecycleEvents: Set<LifecycleEvent> = new Set(['load', 'domconten
 
 export type ClientCertificate = {
   origin: string;
+  cert?: Buffer;
   certPath?: string;
+  key?: Buffer;
   keyPath?: string;
+  pfx?: Buffer;
   pfxPath?: string;
   passphrase?: string;
 };
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index bf4e35a9ca..a4bf9fa812 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -9138,10 +9138,10 @@ export interface Browser {
      *
      * **Details**
      *
-     * An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a
-     * single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the
-     * certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that
-     * the certificate is valid for.
+     * An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`,
+     * a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally,
+     * `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided
+     * with an exact match to the request origin that the certificate is valid for.
      *
      * **NOTE** Using Client Certificates in combination with Proxy Servers is not supported.
      *
@@ -9159,16 +9159,31 @@ export interface Browser {
        */
       certPath?: string;
 
+      /**
+       * Direct value of the certificate in PEM format.
+       */
+      cert?: Buffer;
+
       /**
        * Path to the file with the private key in PEM format.
        */
       keyPath?: string;
 
+      /**
+       * Direct value of the private key in PEM format.
+       */
+      key?: Buffer;
+
       /**
        * Path to the PFX or PKCS12 encoded private key and certificate chain.
        */
       pfxPath?: string;
 
+      /**
+       * Direct value of the PFX or PKCS12 encoded private key and certificate chain.
+       */
+      pfx?: Buffer;
+
       /**
        * Passphrase for the private key (PEM or PFX).
        */
@@ -13850,10 +13865,10 @@ export interface BrowserType<Unused = {}> {
      *
      * **Details**
      *
-     * An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a
-     * single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the
-     * certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that
-     * the certificate is valid for.
+     * An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`,
+     * a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally,
+     * `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided
+     * with an exact match to the request origin that the certificate is valid for.
      *
      * **NOTE** Using Client Certificates in combination with Proxy Servers is not supported.
      *
@@ -13871,16 +13886,31 @@ export interface BrowserType<Unused = {}> {
        */
       certPath?: string;
 
+      /**
+       * Direct value of the certificate in PEM format.
+       */
+      cert?: Buffer;
+
       /**
        * Path to the file with the private key in PEM format.
        */
       keyPath?: string;
 
+      /**
+       * Direct value of the private key in PEM format.
+       */
+      key?: Buffer;
+
       /**
        * Path to the PFX or PKCS12 encoded private key and certificate chain.
        */
       pfxPath?: string;
 
+      /**
+       * Direct value of the PFX or PKCS12 encoded private key and certificate chain.
+       */
+      pfx?: Buffer;
+
       /**
        * Passphrase for the private key (PEM or PFX).
        */
@@ -16259,10 +16289,10 @@ export interface APIRequest {
      *
      * **Details**
      *
-     * An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a
-     * single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the
-     * certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that
-     * the certificate is valid for.
+     * An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`,
+     * a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally,
+     * `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided
+     * with an exact match to the request origin that the certificate is valid for.
      *
      * **NOTE** Using Client Certificates in combination with Proxy Servers is not supported.
      *
@@ -16280,16 +16310,31 @@ export interface APIRequest {
        */
       certPath?: string;
 
+      /**
+       * Direct value of the certificate in PEM format.
+       */
+      cert?: Buffer;
+
       /**
        * Path to the file with the private key in PEM format.
        */
       keyPath?: string;
 
+      /**
+       * Direct value of the private key in PEM format.
+       */
+      key?: Buffer;
+
       /**
        * Path to the PFX or PKCS12 encoded private key and certificate chain.
        */
       pfxPath?: string;
 
+      /**
+       * Direct value of the PFX or PKCS12 encoded private key and certificate chain.
+       */
+      pfx?: Buffer;
+
       /**
        * Passphrase for the private key (PEM or PFX).
        */
@@ -20600,10 +20645,10 @@ export interface BrowserContextOptions {
    *
    * **Details**
    *
-   * An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a
-   * single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the
-   * certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that
-   * the certificate is valid for.
+   * An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`,
+   * a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally,
+   * `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided
+   * with an exact match to the request origin that the certificate is valid for.
    *
    * **NOTE** Using Client Certificates in combination with Proxy Servers is not supported.
    *
@@ -20621,16 +20666,31 @@ export interface BrowserContextOptions {
      */
     certPath?: string;
 
+    /**
+     * Direct value of the certificate in PEM format.
+     */
+    cert?: Buffer;
+
     /**
      * Path to the file with the private key in PEM format.
      */
     keyPath?: string;
 
+    /**
+     * Direct value of the private key in PEM format.
+     */
+    key?: Buffer;
+
     /**
      * Path to the PFX or PKCS12 encoded private key and certificate chain.
      */
     pfxPath?: string;
 
+    /**
+     * Direct value of the PFX or PKCS12 encoded private key and certificate chain.
+     */
+    pfx?: Buffer;
+
     /**
      * Passphrase for the private key (PEM or PFX).
      */
diff --git a/packages/playwright/types/test.d.ts b/packages/playwright/types/test.d.ts
index 28bc7798b5..0131cb16c9 100644
--- a/packages/playwright/types/test.d.ts
+++ b/packages/playwright/types/test.d.ts
@@ -5206,10 +5206,10 @@ export interface PlaywrightTestOptions {
    *
    * **Details**
    *
-   * An array of client certificates to be used. Each certificate object must have both `certPath` and `keyPath` or a
-   * single `pfxPath` to load the client certificate. Optionally, `passphrase` property should be provided if the
-   * certficiate is encrypted. The `origin` property should be provided with an exact match to the request origin that
-   * the certificate is valid for.
+   * An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`,
+   * a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally,
+   * `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided
+   * with an exact match to the request origin that the certificate is valid for.
    *
    * **NOTE** Using Client Certificates in combination with Proxy Servers is not supported.
    *
diff --git a/tests/library/client-certificates.spec.ts b/tests/library/client-certificates.spec.ts
index fa7eb8bbbc..49e0dc0dcc 100644
--- a/tests/library/client-certificates.spec.ts
+++ b/tests/library/client-certificates.spec.ts
@@ -303,6 +303,21 @@ test.describe('browser', () => {
     await page.close();
   });
 
+  test('should pass with matching certificates when passing as content', async ({ browser, startCCServer, asset, browserName }) => {
+    const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
+    const page = await browser.newPage({
+      ignoreHTTPSErrors: true,
+      clientCertificates: [{
+        origin: new URL(serverURL).origin,
+        cert: await fs.promises.readFile(asset('client-certificates/client/trusted/cert.pem')),
+        key: await fs.promises.readFile(asset('client-certificates/client/trusted/key.pem')),
+      }],
+    });
+    await page.goto(serverURL);
+    await expect(page.getByTestId('message')).toHaveText('Hello Alice, your certificate was issued by localhost!');
+    await page.close();
+  });
+
   test('should not hang on tls errors during TLS 1.2 handshake', async ({ browser, asset, platform, browserName }) => {
     for (const tlsVersion of ['TLSv1.3', 'TLSv1.2'] as const) {
       await test.step(`TLS version: ${tlsVersion}`, async () => {
@@ -360,6 +375,21 @@ test.describe('browser', () => {
     await page.close();
   });
 
+  test('should pass with matching certificates in pfx format when passing as content', async ({ browser, startCCServer, asset, browserName }) => {
+    const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
+    const page = await browser.newPage({
+      ignoreHTTPSErrors: true,
+      clientCertificates: [{
+        origin: new URL(serverURL).origin,
+        pfx: await fs.promises.readFile(asset('client-certificates/client/trusted/cert.pfx')),
+        passphrase: 'secure'
+      }],
+    });
+    await page.goto(serverURL);
+    await expect(page.getByTestId('message')).toHaveText('Hello Alice, your certificate was issued by localhost!');
+    await page.close();
+  });
+
   test('should fail with matching certificates in legacy pfx format', async ({ browser, startCCServer, asset, browserName }) => {
     const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
     await expect(browser.newPage({

From c87ca052d1281b94f9c6a269b178cc0277f36027 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Mon, 19 Aug 2024 14:50:25 +0200
Subject: [PATCH 08/25] fix(ct): vue jsx component.update type (#32213)

partial fix for:
https://github.com/microsoft/playwright/issues/31927#issuecomment-2267065378

The options object wasn't treated as partial, unlike in other
frameworks, which led to the `component.update({ props: {} })` type
being selected instead the `component.update(<Component prop={} />)`
during jsx usage.
---
 packages/playwright-ct-vue/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index 2d182d4588..822711f4b6 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -55,7 +55,7 @@ export interface MountResultJsx extends Locator {
 export const test: TestType<{
   mount<HooksConfig>(
     component: JSX.Element,
-    options: MountOptionsJsx<HooksConfig>
+    options?: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
   mount<HooksConfig, Component = unknown>(
     component: Component,

From 18694f684341580d13eb3942ea7f26c60ed1f4ba Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Mon, 19 Aug 2024 10:29:23 -0700
Subject: [PATCH 09/25] feat(webkit): roll to r2062 (#32147)

---
 packages/playwright-core/browsers.json               | 2 +-
 tests/library/browsercontext-viewport-mobile.spec.ts | 7 +++++--
 tests/library/browsercontext-viewport.spec.ts        | 3 ++-
 tests/library/modernizr.spec.ts                      | 6 ++++--
 tests/page/page-goto.spec.ts                         | 3 ++-
 tests/page/page-screenshot.spec.ts                   | 1 +
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index d0b427f41b..dd9fd60588 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -27,7 +27,7 @@
     },
     {
       "name": "webkit",
-      "revision": "2061",
+      "revision": "2062",
       "installByDefault": true,
       "revisionOverrides": {
         "mac10.14": "1446",
diff --git a/tests/library/browsercontext-viewport-mobile.spec.ts b/tests/library/browsercontext-viewport-mobile.spec.ts
index 8160d5601e..1f897f60fa 100644
--- a/tests/library/browsercontext-viewport-mobile.spec.ts
+++ b/tests/library/browsercontext-viewport-mobile.spec.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import os from 'os';
 import { browserTest as it, expect } from '../config/browserTest';
 
 it.describe('mobile viewport', () => {
@@ -54,7 +55,8 @@ it.describe('mobile viewport', () => {
     }
   });
 
-  it('should be detectable by Modernizr', async ({ playwright, browser, server }) => {
+  it('should be detectable by Modernizr', async ({ playwright, browser, server, browserName, platform }) => {
+    it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'detect-touch.html uses Modernizr which uses WebGL. WebGL is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
     const iPhone = playwright.devices['iPhone 6'];
     const context = await browser.newContext({ ...iPhone });
     const page = await context.newPage();
@@ -63,7 +65,8 @@ it.describe('mobile viewport', () => {
     await context.close();
   });
 
-  it('should detect touch when applying viewport with touches', async ({ browser, server }) => {
+  it('should detect touch when applying viewport with touches', async ({ browser, server, browserName, platform }) => {
+    it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'Modernizr uses WebGL. WebGL is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
     const context = await browser.newContext({ viewport: { width: 800, height: 600 }, hasTouch: true });
     const page = await context.newPage();
     await page.goto(server.EMPTY_PAGE);
diff --git a/tests/library/browsercontext-viewport.spec.ts b/tests/library/browsercontext-viewport.spec.ts
index 360cc5815d..4ba1e2f52d 100644
--- a/tests/library/browsercontext-viewport.spec.ts
+++ b/tests/library/browsercontext-viewport.spec.ts
@@ -93,7 +93,8 @@ it('should emulate availWidth and availHeight', async ({ page }) => {
   expect(await page.evaluate(() => window.screen.availHeight)).toBe(600);
 });
 
-it('should not have touch by default', async ({ page, server }) => {
+it('should not have touch by default', async ({ page, server, browserName, platform }) => {
+  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'detect-touch.html uses Modernizr which uses WebGL. WebGL is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
   await page.goto(server.PREFIX + '/mobile.html');
   expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
   await page.goto(server.PREFIX + '/detect-touch.html');
diff --git a/tests/library/modernizr.spec.ts b/tests/library/modernizr.spec.ts
index 5f0e165c65..327a3c4169 100644
--- a/tests/library/modernizr.spec.ts
+++ b/tests/library/modernizr.spec.ts
@@ -32,7 +32,8 @@ async function checkFeatures(name: string, context: any, server: any) {
 
 it('safari-14-1', async ({ browser, browserName, platform, server, headless, isMac }) => {
   it.skip(browserName !== 'webkit');
-  it.skip(browserName === 'webkit' && parseInt(os.release(), 10) < 20, 'WebKit for macOS 10.15 is frozen.');
+  it.skip(browserName === 'webkit' && platform === 'darwin', 'WebKit for macOS 10.15 is frozen.');
+  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'Modernizr uses WebGL which is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
   const context = await browser.newContext({
     deviceScaleFactor: 2
   });
@@ -81,7 +82,8 @@ it('safari-14-1', async ({ browser, browserName, platform, server, headless, isM
 
 it('mobile-safari-14-1', async ({ playwright, browser, browserName, platform, isMac, server, headless }) => {
   it.skip(browserName !== 'webkit');
-  it.skip(browserName === 'webkit' && parseInt(os.release(), 10) < 20, 'WebKit for macOS 10.15 is frozen.');
+  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) < 20, 'WebKit for macOS 10.15 is frozen.');
+  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'Modernizr uses WebGL which is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
   const iPhone = playwright.devices['iPhone 12'];
   const context = await browser.newContext(iPhone);
   const { actual, expected } = await checkFeatures('mobile-safari-14-1', context, server);
diff --git a/tests/page/page-goto.spec.ts b/tests/page/page-goto.spec.ts
index a613a7e036..79107c0d21 100644
--- a/tests/page/page-goto.spec.ts
+++ b/tests/page/page-goto.spec.ts
@@ -181,7 +181,8 @@ it('should work with Cross-Origin-Opener-Policy after redirect', async ({ page,
 
 it('should properly cancel Cross-Origin-Opener-Policy navigation', {
   annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32107' },
-}, async ({ page, server }) => {
+}, async ({ page, server, browserName, isLinux }) => {
+  it.fixme(browserName === 'webkit' && isLinux, 'Started failing after https://commits.webkit.org/281488@main');
   server.setRoute('/empty.html', (req, res) => {
     res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
     res.end();
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 7f374ac59b..8d0e68e12d 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -323,6 +323,7 @@ it.describe('page screenshot', () => {
   it('should work for webgl', async ({ page, server, browserName, platform }) => {
     it.fixme(browserName === 'firefox');
     it.fixme(browserName === 'chromium' && platform === 'darwin' && os.arch() === 'arm64', 'SwiftShader is not available on macOS-arm64 - https://github.com/microsoft/playwright/issues/28216');
+    it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'WebGL is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
 
     await page.setViewportSize({ width: 640, height: 480 });
     await page.goto(server.PREFIX + '/screenshots/webgl.html');

From 5271c26af12a8bd69894dde3e9ddf5cb396be9e4 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Mon, 19 Aug 2024 10:29:51 -0700
Subject: [PATCH 10/25] fix(trace viewer): do not serve resources with
 x-unknown content type (#32219)

`x-unknown` is used as a placeholder for "no content-type" in the har.
We should not send it to the browser, because it is meaningfully
different from not sending `Content-Type` header. For example, Chromium
refuses to interpret stylesheets served with `x-unknown` content type.

Fixes https://github.com/microsoft/playwright-java/issues/1651.
---
 packages/trace-viewer/src/snapshotServer.ts |  4 +++-
 packages/trace-viewer/src/traceModel.ts     |  8 +++++---
 tests/library/trace-viewer.spec.ts          | 12 ++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/trace-viewer/src/snapshotServer.ts b/packages/trace-viewer/src/snapshotServer.ts
index c3c2f5a624..b1dd371cb3 100644
--- a/packages/trace-viewer/src/snapshotServer.ts
+++ b/packages/trace-viewer/src/snapshotServer.ts
@@ -85,7 +85,9 @@ export class SnapshotServer {
       contentType = `${contentType}; charset=utf-8`;
 
     const headers = new Headers();
-    headers.set('Content-Type', contentType);
+    // "x-unknown" in the har means "no content type".
+    if (contentType !== 'x-unknown')
+      headers.set('Content-Type', contentType);
     for (const { name, value } of resource.response.headers)
       headers.set(name, value);
     headers.delete('Content-Encoding');
diff --git a/packages/trace-viewer/src/traceModel.ts b/packages/trace-viewer/src/traceModel.ts
index 0fc1a73efa..1248dde967 100644
--- a/packages/trace-viewer/src/traceModel.ts
+++ b/packages/trace-viewer/src/traceModel.ts
@@ -114,9 +114,11 @@ export class TraceModel {
 
   async resourceForSha1(sha1: string): Promise<Blob | undefined> {
     const blob = await this._backend.readBlob('resources/' + sha1);
-    if (!blob)
-      return;
-    return new Blob([blob], { type: this._resourceToContentType.get(sha1) || 'application/octet-stream' });
+    const contentType = this._resourceToContentType.get(sha1);
+    // "x-unknown" in the har means "no content type".
+    if (!blob || contentType === undefined || contentType === 'x-unknown')
+      return blob;
+    return new Blob([blob], { type: contentType });
   }
 
   storage(): SnapshotStorage {
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index e8471c16d6..3af586d67f 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -1439,3 +1439,15 @@ test('should show baseURL in metadata pane', {
   await traceViewer.showMetadataTab();
   await expect(traceViewer.metadataTab).toContainText('baseURL:https://example.com');
 });
+
+test('should serve css without content-type', async ({ page, runAndTrace, server }) => {
+  server.setRoute('/one-style.css', (req, res) => {
+    res.writeHead(200);
+    res.end(`body { background: red }`);
+  });
+  const traceViewer = await runAndTrace(async () => {
+    await page.goto(server.PREFIX + '/one-style.html');
+  });
+  const snapshotFrame = await traceViewer.snapshotFrame('page.goto');
+  await expect(snapshotFrame.locator('body')).toHaveCSS('background-color', 'rgb(255, 0, 0)', { timeout: 0 });
+});

From f7e0bd30984e1875918eff4fc486d9d831bb97af Mon Sep 17 00:00:00 2001
From: Kuba Janik <jakubjanik00@gmail.com>
Date: Tue, 20 Aug 2024 08:28:02 +0200
Subject: [PATCH 11/25] feat(ui-mode): add font preview to network tab (#32209)

Resolves https://github.com/microsoft/playwright/issues/32218

Currently, fonts are displayed as a raw binary file which does not give
any information to the users.
I replaced it with a simple font preview similar to the one found in the
dev tools of web browsers.
It is not a major feature but I think it is a nice addition and it might
be useful to somebody.

<img width="1043" alt="Screenshot 2024-08-17 at 18 33 46"
src="https://github.com/user-attachments/assets/a6cc7b57-7ea8-4a54-869d-57a44712597b">


https://github.com/user-attachments/assets/e52d9a72-fb2c-43c7-bfee-3d6d6edc6b6a
---
 .../src/ui/networkResourceDetails.css         | 16 +++++++
 .../src/ui/networkResourceDetails.tsx         | 43 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index 0914d065bb..a2d3f5a86f 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -48,6 +48,22 @@
   overflow: hidden;
 }
 
+.network-font-preview {
+  font-family: font-preview;
+  font-size: 30px;
+  line-height: 40px;
+  padding: 16px;
+  padding-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.network-font-preview-error {
+  margin-top: 8px;
+  text-align: center;
+}
+
 .tab-network .toolbar {
   min-height: 30px !important;
   background-color: initial !important;
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 3a760c999f..3eb2f8ef73 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -101,12 +101,13 @@ const ResponseTab: React.FunctionComponent<{
 const BodyTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
 }> = ({ resource }) => {
-  const [responseBody, setResponseBody] = React.useState<{ dataUrl?: string, text?: string, mimeType?: string } | null>(null);
+  const [responseBody, setResponseBody] = React.useState<{ dataUrl?: string, text?: string, mimeType?: string, font?: BinaryData } | null>(null);
 
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.response.content._sha1) {
         const useBase64 = resource.response.content.mimeType.includes('image');
+        const isFont = resource.response.content.mimeType.includes('font');
         const response = await fetch(`sha1/${resource.response.content._sha1}`);
         if (useBase64) {
           const blob = await response.blob();
@@ -114,6 +115,9 @@ const BodyTab: React.FunctionComponent<{
           const eventPromise = new Promise<any>(f => reader.onload = f);
           reader.readAsDataURL(blob);
           setResponseBody({ dataUrl: (await eventPromise).target.result });
+        } else if (isFont) {
+          const font = await response.arrayBuffer();
+          setResponseBody({ font });
         } else {
           const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
           setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType });
@@ -128,11 +132,48 @@ const BodyTab: React.FunctionComponent<{
 
   return <div className='network-request-details-tab'>
     {!resource.response.content._sha1 && <div>Response body is not available for this request.</div>}
+    {responseBody && responseBody.font && <FontPreview font={responseBody.font} />}
     {responseBody && responseBody.dataUrl && <img draggable='false' src={responseBody.dataUrl} />}
     {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} mimeType={responseBody.mimeType} readOnly lineNumbers={true}/>}
   </div>;
 };
 
+const FontPreview: React.FunctionComponent<{
+  font: BinaryData;
+}> = ({ font }) => {
+  const [isError, setIsError] = React.useState(false);
+
+  React.useEffect(() => {
+    let fontFace: FontFace;
+    try {
+      // note: constant font family name will lead to bugs
+      // when displaying two font previews.
+      fontFace = new FontFace('font-preview', font);
+      if (fontFace.status === 'loaded')
+        document.fonts.add(fontFace);
+      if (fontFace.status === 'error')
+        setIsError(true);
+    } catch {
+      setIsError(true);
+    }
+
+    return () => {
+      document.fonts.delete(fontFace);
+    };
+  }, [font]);
+
+  if (isError)
+    return <div className='network-font-preview-error'>Could not load font preview</div>;
+
+  return <div className='network-font-preview'>
+    ABCDEFGHIJKLM<br />
+    NOPQRSTUVWXYZ<br />
+    abcdefghijklm<br />
+    nopqrstuvwxyz<br />
+    1234567890
+  </div>;
+};
+
 function statusClass(statusCode: number): string {
   if (statusCode < 300 || statusCode === 304)
     return 'green-circle';

From 244761a3a2479cbfdc42102afba23e811c035358 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 20 Aug 2024 09:03:02 +0200
Subject: [PATCH 12/25] chore(docs): Rework CI docs (#31988)

This PR moves around some of our CI docs. It moves the GitHub actions
docs from `ci-intro.md` to `ci.md`, reduces `ci-intro.md` to be an
introduction, adds a mention of Sharding to the best practices, and adds
a section on `--only-changed` called "Fail-Fast". Each of those changes
is a separate commit, to make this a little easier to review. If we find
any of those to commits to be contentious, i'll pull them out into
individual PRs.

While rolling this to playwright.dev, we'll also make the following
changes to its sidebar:
- move the `ci.md` document from the "Integrations" section to the
"Playwright Test" section
- make "Best Practices" the last item of the "Getting Started" section

---------

Signed-off-by: Simon Knott <info@simonknott.de>
Co-authored-by: Yury Semikhatsky <yurys@chromium.org>
---
 docs/src/best-practices-js.md |   2 +-
 docs/src/ci-intro.md          | 308 +++-----------------------
 docs/src/ci.md                | 392 +++++++++++++++++++++++++++++++++-
 3 files changed, 420 insertions(+), 282 deletions(-)

diff --git a/docs/src/best-practices-js.md b/docs/src/best-practices-js.md
index 7a57193699..7d4830b6cb 100644
--- a/docs/src/best-practices-js.md
+++ b/docs/src/best-practices-js.md
@@ -261,7 +261,7 @@ npx playwright --version
 
 Setup CI/CD and run your tests frequently. The more often you run your tests the better. Ideally you should run your tests on each commit and pull request. Playwright comes with a [GitHub actions workflow](/ci-intro.md) so that tests will run on CI for you with no setup required. Playwright can also be setup on the [CI environment](/ci.md) of your choice.
 
-Use Linux when running your tests on CI as it is cheaper. Developers can use whatever environment when running locally but use linux on CI.
+Use Linux when running your tests on CI as it is cheaper. Developers can use whatever environment when running locally but use linux on CI. Consider setting up [Sharding](./test-sharding.md) to make CI faster.
 
 ### Lint your tests
 
diff --git a/docs/src/ci-intro.md b/docs/src/ci-intro.md
index bad1e358c2..492130088a 100644
--- a/docs/src/ci-intro.md
+++ b/docs/src/ci-intro.md
@@ -1,19 +1,17 @@
 ---
 id: ci-intro
-title: "CI GitHub Actions"
+title: "Setting up CI"
 ---
 
 ## Introduction
 * langs: js
 
-Playwright tests can be run on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed [doc on Continuous Integration](./ci.md).
-
-When [installing Playwright](./intro.md) using the [VS Code extension](./getting-started-vscode.md) or with `npm init playwright@latest` you are given the option to add a [GitHub Actions](https://docs.github.com/en/actions) workflow. This creates a `playwright.yml` file inside a `.github/workflows` folder containing everything you need so that your tests run on each push and pull request into the main/master branch.
+Playwright tests can be run on any CI provider. This guide covers one way of running tests on GitHub using GitHub actions. If you would like to learn more, or how to configure other CI providers, check out our detailed [doc on Continuous Integration](./ci.md).
 
 #### You will learn
 * langs: js
 
-- [How to run tests on push/pull_request](/ci-intro.md#on-pushpull_request)
+- [How to set up GitHub Actions](/ci-intro.md#setting-up-github-actions)
 - [How to view test logs](/ci-intro.md#viewing-test-logs)
 - [How to view the HTML report](/ci-intro.md#viewing-the-html-report)
 - [How to view the trace](/ci-intro.md#viewing-the-trace)
@@ -25,22 +23,18 @@ When [installing Playwright](./intro.md) using the [VS Code extension](./getting
 
 Playwright tests can be ran on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed doc on Continuous Integration.
 
-To add a [GitHub Actions](https://docs.github.com/en/actions) file first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests will run on each push and pull request for the main/master branch.
-
 #### You will learn
 * langs: python, java, csharp
   
-- [How to run tests on push/pull_request](/ci-intro.md#on-pushpull_request)
+- [How to set up GitHub Actions](/ci-intro.md#setting-up-github-actions)
 - [How to view test logs](/ci-intro.md#viewing-test-logs)
 - [How to view the trace](/ci-intro.md#viewing-the-trace)
 
 
 ## Setting up GitHub Actions
-
-### On push/pull_request
 * langs: js
 
-Tests will run on push or pull request on branches main/master. The [workflow](https://docs.github.com/en/actions/using-workflows/about-workflows) will install all dependencies, install Playwright and then run the tests. It will also create the HTML report.
+When [installing Playwright](./intro.md) using the [VS Code extension](./getting-started-vscode.md) or with `npm init playwright@latest` you are given the option to add a [GitHub Actions](https://docs.github.com/en/actions) workflow. This creates a `playwright.yml` file inside a `.github/workflows` folder containing everything you need so that your tests run on each push and pull request into the main/master branch. Here's how that file looks:
 
 ```yml js title=".github/workflows/playwright.yml"
 name: Playwright Tests
@@ -57,7 +51,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright Browsers
@@ -72,10 +66,21 @@ jobs:
         retention-days: 30
 ```
 
-### On push/pull_request
+The workflow performs these steps:
+
+1. Clone your repository
+2. Install Node.js
+3. Install NPM Dependencies
+4. Install Playwright Browsers
+5. Run Playwright tests
+6. Upload HTML report to the GitHub UI
+
+To learn more about this, see ["Understanding GitHub Actions"](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions).
+
+## Setting up GitHub Actions
 * langs: python, java, csharp
 
-Tests will run on push or pull request on branches main/master. The [workflow](https://docs.github.com/en/actions/using-workflows/about-workflows) will install all dependencies, install Playwright and then run the tests.
+To add a [GitHub Actions](https://docs.github.com/en/actions) file first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests will run on each push and pull request for the main/master branch.
 
 ```yml python title=".github/workflows/playwright.yml"
 name: Playwright Tests
@@ -128,7 +133,7 @@ jobs:
         java-version: '17'
     - name: Build & Install
       run: mvn -B install -D skipTests --no-transfer-progress
-    - name: Install Playwright
+    - name: Ensure browsers are installed
       run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --with-deps"
     - name: Run tests
       run: mvn test
@@ -151,275 +156,23 @@ jobs:
       uses: actions/setup-dotnet@v4
       with:
         dotnet-version: 8.0.x
-    - run: dotnet build
+    - name: Build & Install
+      run: dotnet build
     - name: Ensure browsers are installed
       run: pwsh bin/Debug/net8.0/playwright.ps1 install --with-deps
     - name: Run your tests
       run: dotnet test
 ```
 
-### On push/pull_request (sharded)
-* langs: js
+To learn more about this, see ["Understanding GitHub Actions"](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions).
 
-GitHub Actions supports [sharding tests between multiple jobs](https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs). Check out our [sharding doc](./test-sharding) to learn more about sharding and to see a [GitHub actions example](./test-sharding.md#github-actions-example) of how to configure a job to run your tests on multiple machines as well as how to merge the HTML reports.
+Looking at the list of steps in `jobs.test.steps`, you can see that the workflow performs these steps:
 
-### Via Containers
-
-GitHub Actions support [running jobs in a container](https://docs.github.com/en/actions/using-jobs/running-jobs-in-a-container) by using the [`jobs.<job_id>.container`](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idcontainer) option. This is useful to not pollute the host environment with dependencies and to have a consistent environment for e.g. screenshots/visual regression testing across different operating systems.
-
-```yml js title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  playwright:
-    name: 'Playwright Tests'
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v%%VERSION%%-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: npm ci
-      - name: Run your tests
-        run: npx playwright test
-        env:
-          HOME: /root
-```
-
-```yml python title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  playwright:
-    name: 'Playwright Tests'
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright/python:v%%VERSION%%-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-      - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install -r local-requirements.txt
-          pip install -e .
-      - name: Run your tests
-        run: pytest
-        env:
-          HOME: /root
-```
-
-```yml java title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  playwright:
-    name: 'Playwright Tests'
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright/java:v%%VERSION%%-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-java@v3
-        with:
-          distribution: 'temurin'
-          java-version: '17'
-      - name: Build & Install
-        run: mvn -B install -D skipTests --no-transfer-progress
-      - name: Run tests
-        run: mvn test
-        env:
-          HOME: /root
-```
-
-```yml csharp title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  playwright:
-    name: 'Playwright Tests'
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright/dotnet:v%%VERSION%%-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup dotnet
-        uses: actions/setup-dotnet@v4
-        with:
-          dotnet-version: 8.0.x
-      - run: dotnet build
-      - name: Run your tests
-        run: dotnet test
-        env:
-          HOME: /root
-```
-
-### On deployment
-
-This will start the tests after a [GitHub Deployment](https://developer.github.com/v3/repos/deployments/) went into the `success` state.
-Services like Vercel use this pattern so you can run your end-to-end tests on their deployed environment.
-
-```yml js title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  deployment_status:
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    if: github.event.deployment_status.state == 'success'
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-      env:
-        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
-```
-
-```yml python title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  deployment_status:
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    if: github.event.deployment_status.state == 'success'
-    steps:
-    - uses: actions/checkout@v4
-      uses: actions/setup-python@v4
-      with:
-        python-version: '3.11'
-    - name: Install dependencies
-      run: |
-        python -m pip install --upgrade pip
-        pip install -r requirements.txt
-    - name: Ensure browsers are installed
-      run: python -m playwright install --with-deps
-    - name: Run tests
-      run: pytest
-      env:
-        # This might depend on your test-runner
-        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
-```
-
-```yml java title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  deployment_status:
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    if: github.event.deployment_status.state == 'success'
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-java@v3
-      with:
-        distribution: 'temurin'
-        java-version: '17'
-    - name: Build & Install
-      run: mvn -B install -D skipTests --no-transfer-progress
-    - name: Install Playwright
-      run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --with-deps"
-    - name: Run tests
-      run: mvn test
-      env:
-        # This might depend on your test-runner
-        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
-```
-
-```yml csharp title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  deployment_status:
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    if: github.event.deployment_status.state == 'success'
-    steps:
-    - uses: actions/checkout@v4
-    - name: Setup dotnet
-      uses: actions/setup-dotnet@v4
-      with:
-        dotnet-version: 8.0.x
-    - run: dotnet build
-    - name: Ensure browsers are installed
-      run: pwsh bin/Debug/net8.0/playwright.ps1 install --with-deps
-    - name: Run tests
-      run: dotnet test
-      env:
-        # This might depend on your test-runner
-        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
-```
-
-### Fail-Fast
-* langs: js
-
-Even with sharding enabled, large test suites can take very long to execute. Running changed test files first on PRs will give you a faster feedback loop and use less CI resources.
-
-```yml js title=".github/workflows/playwright.yml"
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run changed Playwright tests
-      run: npx playwright test --only-changed=$GITHUB_BASE_REF
-      if: github.event_name == 'pull_request'
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
-```
+1. Clone your repository
+2. Install language dependencies
+3. Install project dependencies and build
+4. Install Playwright Browsers
+5. Run tests
 
 ## Create a Repo and Push to GitHub
 
@@ -569,4 +322,5 @@ This step will not work for pull requests created from a forked repository becau
 - [Learn how to perform Actions](./input.md)
 - [Learn how to write Assertions](./test-assertions.md)
 - [Learn more about the Trace Viewer](/trace-viewer.md)
-- [Learn more about running tests on other CI providers](/ci.md)
+- [Learn more ways of running tests on GitHub Actions](/ci.md)
+- [Learn more about running tests on other CI providers](/ci.md#github-actions) // TODO: is this link correct?
\ No newline at end of file
diff --git a/docs/src/ci.md b/docs/src/ci.md
index 624ccfa447..7a08a00b4a 100644
--- a/docs/src/ci.md
+++ b/docs/src/ci.md
@@ -59,14 +59,398 @@ export default defineConfig({
 });
 ```
 
-
 ## CI configurations
 
-The [Command line tools](./browsers#install-system-dependencies) can be used to install all operating system dependencies on GitHub Actions.
+The [Command line tools](./browsers#install-system-dependencies) can be used to install all operating system dependencies in CI.
 
 ### GitHub Actions
 
-Check out our [GitHub Actions](ci-intro.md) guide for more information on how to run your tests on GitHub.
+#### On push/pull_request
+* langs: js
+
+Tests will run on push or pull request on branches main/master. The [workflow](https://docs.github.com/en/actions/using-workflows/about-workflows) will install all dependencies, install Playwright and then run the tests. It will also create the HTML report.
+
+```yml js title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+```
+
+#### On push/pull_request
+* langs: python, java, csharp
+
+Tests will run on push or pull request on branches main/master. The [workflow](https://docs.github.com/en/actions/using-workflows/about-workflows) will install all dependencies, install Playwright and then run the tests.
+
+```yml python title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Python
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.11'
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements.txt
+    - name: Ensure browsers are installed
+      run: python -m playwright install --with-deps
+    - name: Run your tests
+      run: pytest --tracing=retain-on-failure
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-traces
+        path: test-results/
+```
+
+```yml java title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-java@v3
+      with:
+        distribution: 'temurin'
+        java-version: '17'
+    - name: Build & Install
+      run: mvn -B install -D skipTests --no-transfer-progress
+    - name: Ensure browsers are installed
+      run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --with-deps"
+    - name: Run tests
+      run: mvn test
+```
+
+```yml csharp title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup dotnet
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: 8.0.x
+    - name: Build & Install
+      run: dotnet build
+    - name: Ensure browsers are installed
+      run: pwsh bin/Debug/net8.0/playwright.ps1 install --with-deps
+    - name: Run your tests
+      run: dotnet test
+```
+
+#### On push/pull_request (sharded)
+* langs: js
+
+GitHub Actions supports [sharding tests between multiple jobs](https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs). Check out our [sharding doc](./test-sharding) to learn more about sharding and to see a [GitHub actions example](./test-sharding.md#github-actions-example) of how to configure a job to run your tests on multiple machines as well as how to merge the HTML reports.
+
+#### Via Containers
+
+GitHub Actions support [running jobs in a container](https://docs.github.com/en/actions/using-jobs/running-jobs-in-a-container) by using the [`jobs.<job_id>.container`](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idcontainer) option. This is useful to not pollute the host environment with dependencies and to have a consistent environment for e.g. screenshots/visual regression testing across different operating systems.
+
+```yml js title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v%%VERSION%%-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Run your tests
+        run: npx playwright test
+        env:
+          HOME: /root
+```
+
+```yml python title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright/python:v%%VERSION%%-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r local-requirements.txt
+          pip install -e .
+      - name: Run your tests
+        run: pytest
+        env:
+          HOME: /root
+```
+
+```yml java title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright/java:v%%VERSION%%-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+      - name: Build & Install
+        run: mvn -B install -D skipTests --no-transfer-progress
+      - name: Run tests
+        run: mvn test
+        env:
+          HOME: /root
+```
+
+```yml csharp title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright/dotnet:v%%VERSION%%-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 8.0.x
+      - run: dotnet build
+      - name: Run your tests
+        run: dotnet test
+        env:
+          HOME: /root
+```
+
+#### On deployment
+
+This will start the tests after a [GitHub Deployment](https://developer.github.com/v3/repos/deployments/) went into the `success` state.
+Services like Vercel use this pattern so you can run your end-to-end tests on their deployed environment.
+
+```yml js title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+      env:
+        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+```
+
+```yml python title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.11'
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements.txt
+    - name: Ensure browsers are installed
+      run: python -m playwright install --with-deps
+    - name: Run tests
+      run: pytest
+      env:
+        # This might depend on your test-runner
+        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+```
+
+```yml java title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-java@v3
+      with:
+        distribution: 'temurin'
+        java-version: '17'
+    - name: Build & Install
+      run: mvn -B install -D skipTests --no-transfer-progress
+    - name: Install Playwright
+      run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --with-deps"
+    - name: Run tests
+      run: mvn test
+      env:
+        # This might depend on your test-runner
+        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+```
+
+```yml csharp title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup dotnet
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: 8.0.x
+    - run: dotnet build
+    - name: Ensure browsers are installed
+      run: pwsh bin/Debug/net8.0/playwright.ps1 install --with-deps
+    - name: Run tests
+      run: dotnet test
+      env:
+        # This might depend on your test-runner
+        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+```
+
+#### Fail-Fast
+* langs: js
+
+Large test suites can take very long to execute. By executing a preliminary test run with the `--only-changed` flag, you can run test files that are likely to fail first.
+This will give you a faster feedback loop and slightly lower CI consumption while working on Pull Requests.
+To detect test files affected by your changeset, `--only-changed` analyses your suites' dependency graph. This is a heuristic and might miss tests, so it's important that you always run the full test suite after the preliminary test run.
+
+```yml js title=".github/workflows/playwright.yml" {20-23}
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run changed Playwright tests
+      run: npx playwright test --only-changed=$GITHUB_BASE_REF
+      if: github.event_name == 'pull_request'
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+```
 
 ### Docker
 
@@ -660,4 +1044,4 @@ xvfb-run mvn test
 ```
 ```bash csharp
 xvfb-run dotnet test
-```
+```
\ No newline at end of file

From b599335404e9e721565362c7332ffd5e565543f8 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 20 Aug 2024 14:16:28 +0200
Subject: [PATCH 13/25] chore(ui): enable `react/recommended` lint rules
 (#32214)

Closes https://github.com/microsoft/playwright/issues/32159. I
originally set out to enable Strict Mode for our React UI, but found a
way better thing: Enabling the lint rules we had already installed!

`eslint-plugin-react` is already in of our `package.json`, and this PR
enables it and fixes some of the reported issues. Most of them are
around the `key` prop which is mostly about performance, but there's
also fixes for misspelled `data-testid` props.
---
 .eslintrc.js                                  |   8 +
 package-lock.json                             | 861 +++++++++++-------
 package.json                                  |   4 +-
 packages/html-reporter/src/icons.tsx          |   8 +-
 packages/html-reporter/src/links.tsx          |   2 +-
 packages/html-reporter/src/testCaseView.tsx   |   2 +-
 packages/recorder/src/recorder.tsx            |   2 +-
 .../trace-viewer/src/ui/attachmentsTab.tsx    |   2 +-
 packages/trace-viewer/src/ui/consoleTab.tsx   |   1 +
 .../trace-viewer/src/ui/networkFilters.tsx    |   4 +-
 .../src/ui/networkResourceDetails.tsx         |   2 +-
 packages/trace-viewer/src/ui/snapshotTab.tsx  |   1 +
 packages/trace-viewer/src/ui/tag.tsx          |   2 +-
 .../trace-viewer/src/ui/uiModeFiltersView.tsx |   4 +-
 packages/web/src/components/gridView.tsx      |   2 +
 packages/web/src/components/listView.tsx      |   1 +
 packages/web/src/components/tabbedPane.tsx    |   3 +-
 packages/web/src/components/toolbarButton.tsx |   2 +-
 packages/web/src/shared/imageDiffView.tsx     |   6 +-
 packages/web/src/shared/resizeView.tsx        |   1 +
 .../ct-react-vite/src/components/Fetcher.tsx  |   2 +-
 21 files changed, 564 insertions(+), 356 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bb351a8c56..a116a37036 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,9 +6,14 @@ module.exports = {
       sourceType: "module",
     },
     extends: [
+      "plugin:react/recommended",
       "plugin:react-hooks/recommended"
     ],
 
+    settings: {
+        react: { version: "18" }
+    },
+
     /**
      * ESLint rules
      *
@@ -124,5 +129,8 @@ module.exports = {
             "mustMatch": "Copyright",
             "templateFile": require("path").join(__dirname, "utils", "copyright.js"),
         }],
+
+        // react
+        "react/react-in-jsx-scope": 0
     }
 };
diff --git a/package-lock.json b/package-lock.json
index c88a0381a3..1c48c213d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,8 +47,8 @@
         "eslint": "^8.55.0",
         "eslint-plugin-internal-playwright": "file:utils/eslint-plugin-internal-playwright",
         "eslint-plugin-notice": "^0.9.10",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "formidable": "^2.1.1",
         "license-checker": "^25.0.1",
         "mime": "^3.0.0",
@@ -2418,13 +2418,16 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2440,15 +2443,16 @@
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -2467,6 +2471,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
@@ -2504,30 +2528,34 @@
       }
     },
     "node_modules/array.prototype.tosorted": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz",
-      "integrity": "sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -2543,20 +2571,14 @@
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "dev": true
     },
-    "node_modules/asynciterator.prototype": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz",
-      "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==",
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.3"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true,
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -2720,14 +2742,19 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3039,6 +3066,57 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -3132,17 +3210,20 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-properties": {
@@ -3280,50 +3361,57 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
-      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.5",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.2",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
-        "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.13"
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3332,37 +3420,73 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es-iterator-helpers": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
-      "integrity": "sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==",
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
       "dev": true,
       "dependencies": {
-        "asynciterator.prototype": "^1.0.0",
-        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.1",
-        "es-set-tostringtag": "^2.0.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
+        "internal-slot": "^1.0.7",
         "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.0.1"
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3528,39 +3652,41 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.33.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
-      "integrity": "sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==",
+      "version": "7.35.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
+      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "array.prototype.tosorted": "^1.1.1",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.12",
+        "es-iterator-helpers": "^1.0.19",
         "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "object.hasown": "^1.1.2",
-        "object.values": "^1.1.6",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.4",
+        "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.8"
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -4096,16 +4222,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4126,13 +4256,14 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4368,21 +4499,21 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -4404,12 +4535,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4419,9 +4550,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -4524,12 +4655,12 @@
       "dev": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
-      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
+        "es-errors": "^1.3.0",
         "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
@@ -4538,14 +4669,16 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4630,6 +4763,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -4703,18 +4851,21 @@
       }
     },
     "node_modules/is-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -4781,21 +4932,27 @@
       }
     },
     "node_modules/is-set": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4832,12 +4989,12 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4847,10 +5004,13 @@
       }
     },
     "node_modules/is-weakmap": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4868,13 +5028,16 @@
       }
     },
     "node_modules/is-weakset": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4891,6 +5054,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5467,28 +5636,29 @@
       }
     },
     "node_modules/object.entries": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz",
-      "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5497,28 +5667,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object.hasown": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.3.tgz",
-      "integrity": "sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5736,6 +5893,15 @@
       "resolved": "packages/playwright-webkit",
       "link": true
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -5980,15 +6146,16 @@
       "link": true
     },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
-      "integrity": "sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
+      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
         "which-builtin-type": "^1.1.3"
       },
@@ -6006,14 +6173,15 @@
       "dev": true
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6187,13 +6355,13 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz",
-      "integrity": "sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "get-intrinsic": "^1.2.2",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -6204,20 +6372,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safe-array-concat/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
     "node_modules/safe-regex-test": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.2.tgz",
-      "integrity": "sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "get-intrinsic": "^1.2.2",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
       "engines": {
@@ -6293,30 +6455,32 @@
       }
     },
     "node_modules/set-function-length": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz",
-      "integrity": "sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.1.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/set-function-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
-      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.0.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6344,14 +6508,18 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6508,34 +6676,51 @@
       }
     },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
-      "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==",
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "regexp.prototype.flags": "^1.5.0",
-        "set-function-name": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6545,28 +6730,31 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
-      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6767,29 +6955,30 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6799,16 +6988,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6818,14 +7008,20 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -7463,13 +7659,13 @@
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
-      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
       "dev": true,
       "dependencies": {
-        "function.prototype.name": "^1.1.5",
-        "has-tostringtag": "^1.0.0",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
         "is-async-function": "^2.0.0",
         "is-date-object": "^1.0.5",
         "is-finalizationregistry": "^1.0.2",
@@ -7478,8 +7674,8 @@
         "is-weakref": "^1.0.2",
         "isarray": "^2.0.5",
         "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7488,38 +7684,35 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/which-builtin-type/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
     "node_modules/which-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
       "dependencies": {
-        "is-map": "^2.0.1",
-        "is-set": "^2.0.1",
-        "is-weakmap": "^2.0.1",
-        "is-weakset": "^2.0.1"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index fa87e057cb..930fac8a80 100644
--- a/package.json
+++ b/package.json
@@ -85,8 +85,8 @@
     "eslint": "^8.55.0",
     "eslint-plugin-internal-playwright": "file:utils/eslint-plugin-internal-playwright",
     "eslint-plugin-notice": "^0.9.10",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "formidable": "^2.1.1",
     "license-checker": "^25.0.1",
     "mime": "^3.0.0",
diff --git a/packages/html-reporter/src/icons.tsx b/packages/html-reporter/src/icons.tsx
index 6111fac7c1..9609a2e23f 100644
--- a/packages/html-reporter/src/icons.tsx
+++ b/packages/html-reporter/src/icons.tsx
@@ -70,19 +70,19 @@ export const blank = () => {
 };
 
 export const externalLink = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fill-rule='evenodd' d='M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z'></path></svg>;
+  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z'></path></svg>;
 };
 
 export const calendar = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fill-rule='evenodd' d='M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z'></path></svg>;
+  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z'></path></svg>;
 };
 
 export const person = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fill-rule='evenodd' d='M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z'></path></svg>;
+  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z'></path></svg>;
 };
 
 export const commit = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fill-rule='evenodd' d='M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z'></path></svg>;
+  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z'></path></svg>;
 };
 
 export const image = () => {
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 55d7d24a6c..419a8725ac 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -81,7 +81,7 @@ export const AttachmentLink: React.FunctionComponent<{
     {attachment.path && <a href={href || attachment.path} download={downloadFileNameForAttachment(attachment)}>{linkName || attachment.name}</a>}
     {!attachment.path && <span>{linkifyText(attachment.name)}</span>}
   </span>} loadChildren={attachment.body ? () => {
-    return [<div className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
+    return [<div key={1} className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
   } : undefined} depth={0} style={{ lineHeight: '32px' }}></TreeItem>;
 };
 
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 4da49261d0..5bed3c8309 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -58,7 +58,7 @@ export const TestCaseView: React.FC<{
       {labels && <LabelsLinkView labels={labels} />}
     </div>}
     {!!visibleAnnotations.length && <AutoChip header='Annotations'>
-      {visibleAnnotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
+      {visibleAnnotations.map((annotation, index) => <TestCaseAnnotationView key={index} annotation={annotation} />)}
     </AutoChip>}
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({
diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
index b3966fd01a..486aeae701 100644
--- a/packages/recorder/src/recorder.tsx
+++ b/packages/recorder/src/recorder.tsx
@@ -171,7 +171,7 @@ export const Recorder: React.FC<RecorderProps> = ({
       sidebarSize={200}
       main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
       sidebar={<TabbedPane
-        rightToolbar={selectedTab === 'locator' ? [<ToolbarButton icon='files' title='Copy' onClick={() => copy(locator)} />] : []}
+        rightToolbar={selectedTab === 'locator' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy(locator)} />] : []}
         tabs={[
           {
             id: 'locator',
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 8c72c7fee3..8b6cefe14d 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -126,7 +126,7 @@ export const AttachmentsTab: React.FunctionComponent<{
       const url = attachmentURL(a);
       return <div className='attachment-item' key={`screenshot-${i}`}>
         <div><img draggable='false' src={url} /></div>
-        <div><a target='_blank' href={url}>{a.name}</a></div>
+        <div><a target='_blank' href={url} rel='noreferrer'>{a.name}</a></div>
       </div>;
     })}
     {attachments.size ? <div className='attachments-section'>Attachments</div> : undefined}
diff --git a/packages/trace-viewer/src/ui/consoleTab.tsx b/packages/trace-viewer/src/ui/consoleTab.tsx
index a7b8318386..b2947f5011 100644
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@@ -213,6 +213,7 @@ function format(args: { preview: string, value: any }[]): JSX.Element[] {
 }
 
 function formatAnsi(text: string): JSX.Element[] {
+  // eslint-disable-next-line react/jsx-key
   return [<span dangerouslySetInnerHTML={{ __html: ansi2html(text.trim()) }}></span>];
 }
 
diff --git a/packages/trace-viewer/src/ui/networkFilters.tsx b/packages/trace-viewer/src/ui/networkFilters.tsx
index de6c827e2b..a88332e7c6 100644
--- a/packages/trace-viewer/src/ui/networkFilters.tsx
+++ b/packages/trace-viewer/src/ui/networkFilters.tsx
@@ -26,10 +26,10 @@ export type FilterState = {
 
 export const defaultFilterState: FilterState = { searchValue: '', resourceType: 'All' };
 
-export const NetworkFilters: React.FunctionComponent<{
+export const NetworkFilters = ({ filterState, onFilterStateChange }: {
   filterState: FilterState,
   onFilterStateChange: (filterState: FilterState) => void,
-}> = ({ filterState, onFilterStateChange }) => {
+}) => {
   return (
     <div className='network-filters'>
       <input
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 3eb2f8ef73..002b7b7fb9 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -29,7 +29,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 
   return <TabbedPane
     dataTestId='network-request-details'
-    leftToolbar={[<ToolbarButton icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
+    leftToolbar={[<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
     tabs={[
       {
         id: 'request',
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
index 798025cbbd..4faa668677 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -184,6 +184,7 @@ export const SnapshotTab: React.FunctionComponent<{
       <ToolbarButton className='pick-locator' title='Pick locator' icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} />
       {['action', 'before', 'after'].map(tab => {
         return <TabbedPaneTab
+          key={tab}
           id={tab}
           title={renderTitle(tab)}
           selected={snapshotTab === tab}
diff --git a/packages/trace-viewer/src/ui/tag.tsx b/packages/trace-viewer/src/ui/tag.tsx
index 63a5b32217..057d70ac66 100644
--- a/packages/trace-viewer/src/ui/tag.tsx
+++ b/packages/trace-viewer/src/ui/tag.tsx
@@ -17,7 +17,7 @@
 import { clsx } from '@web/uiUtils';
 import './tag.css';
 
-export const TagView: React.FC<{ tag: string, style?: React.CSSProperties, onClick?: (e: React.MouseEvent) => void }> = ({ tag, style, onClick }) => {
+export const TagView = ({ tag, style, onClick }: { tag: string, style?: React.CSSProperties, onClick?: (e: React.MouseEvent) => void }) => {
   return <span
     className={clsx('tag', `tag-color-${tagNameToColor(tag)}`)}
     onClick={onClick}
diff --git a/packages/trace-viewer/src/ui/uiModeFiltersView.tsx b/packages/trace-viewer/src/ui/uiModeFiltersView.tsx
index a6cff6ecf8..1c1be674f7 100644
--- a/packages/trace-viewer/src/ui/uiModeFiltersView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeFiltersView.tsx
@@ -60,7 +60,7 @@ export const FiltersView: React.FC<{
     {expanded && <div className='hbox' style={{ marginLeft: 14, maxHeight: 200, overflowY: 'auto' }}>
       <div className='filter-list'>
         {[...statusFilters.entries()].map(([status, value]) => {
-          return <div className='filter-entry'>
+          return <div className='filter-entry' key={status}>
             <label>
               <input type='checkbox' checked={value} onClick={() => {
                 const copy = new Map(statusFilters);
@@ -74,7 +74,7 @@ export const FiltersView: React.FC<{
       </div>
       <div className='filter-list'>
         {[...projectFilters.entries()].map(([projectName, value]) => {
-          return <div className='filter-entry'>
+          return <div className='filter-entry' key={projectName}>
             <label>
               <input type='checkbox' checked={value} onClick={() => {
                 const copy = new Map(projectFilters);
diff --git a/packages/web/src/components/gridView.tsx b/packages/web/src/components/gridView.tsx
index f9ba7eb50a..5d9b0a4c6c 100644
--- a/packages/web/src/components/gridView.tsx
+++ b/packages/web/src/components/gridView.tsx
@@ -76,6 +76,7 @@ export function GridView<T>(model: GridViewProps<T>) {
       <div className='grid-view-header'>
         {model.columns.map((column, i) => {
           return <div
+            key={model.columnTitle(column)}
             className={'grid-view-header-cell ' + sortingHeader(column, model.sorting)}
             style={{
               width: i < model.columns.length - 1 ? model.columnWidths.get(column) : undefined,
@@ -97,6 +98,7 @@ export function GridView<T>(model: GridViewProps<T>) {
             {model.columns.map((column, i) => {
               const { body, title } = model.render(item, column, index);
               return <div
+                key={model.columnTitle(column)}
                 className={`grid-view-cell grid-view-column-${String(column)}`}
                 title={title}
                 style={{
diff --git a/packages/web/src/components/listView.tsx b/packages/web/src/components/listView.tsx
index 5186a3d02a..4f2de5ae54 100644
--- a/packages/web/src/components/listView.tsx
+++ b/packages/web/src/components/listView.tsx
@@ -152,6 +152,7 @@ export function ListView<T>({
           onMouseEnter={() => setHighlightedItem(item)}
           onMouseLeave={() => setHighlightedItem(undefined)}
         >
+          {/* eslint-disable-next-line react/jsx-key */}
           {indentation ? new Array(indentation).fill(0).map(() => <div className='list-view-indent'></div>) : undefined}
           {icon && <div
             className={'codicon ' + (icon(item, index) || 'codicon-blank')}
diff --git a/packages/web/src/components/tabbedPane.tsx b/packages/web/src/components/tabbedPane.tsx
index 2f5208a673..b9872294df 100644
--- a/packages/web/src/components/tabbedPane.tsx
+++ b/packages/web/src/components/tabbedPane.tsx
@@ -48,6 +48,7 @@ export const TabbedPane: React.FunctionComponent<{
         {mode === 'default' && <div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }}>
           {[...tabs.map(tab => (
             <TabbedPaneTab
+              key={tab.id}
               id={tab.id}
               title={tab.title}
               count={tab.count}
@@ -67,7 +68,7 @@ export const TabbedPane: React.FunctionComponent<{
                 suffix = ` (${tab.count})`;
               if (tab.errorCount)
                 suffix = ` (${tab.errorCount})`;
-              return <option value={tab.id} selected={tab.id === selectedTab}>{tab.title}{suffix}</option>;
+              return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab}>{tab.title}{suffix}</option>;
             })}
           </select>
         </div>}
diff --git a/packages/web/src/components/toolbarButton.tsx b/packages/web/src/components/toolbarButton.tsx
index e19afe4c3b..455f0979f0 100644
--- a/packages/web/src/components/toolbarButton.tsx
+++ b/packages/web/src/components/toolbarButton.tsx
@@ -51,7 +51,7 @@ export const ToolbarButton: React.FC<React.PropsWithChildren<ToolbarButtonProps>
     title={title}
     disabled={!!disabled}
     style={style}
-    data-testId={testId}
+    data-testid={testId}
   >
     {icon && <span className={`codicon codicon-${icon}`} style={children ? { marginRight: 5 } : {}}></span>}
     {children}
diff --git a/packages/web/src/shared/imageDiffView.tsx b/packages/web/src/shared/imageDiffView.tsx
index 9525b811a6..ea0f1e0042 100644
--- a/packages/web/src/shared/imageDiffView.tsx
+++ b/packages/web/src/shared/imageDiffView.tsx
@@ -119,9 +119,9 @@ export const ImageDiffView: React.FC<{
         </div>}
       </div>
       <div style={{ alignSelf: 'start', lineHeight: '18px', marginLeft: '15px' }}>
-        <div>{diff.diff && <a target='_blank' href={diff.diff.attachment.path}>{diff.diff.attachment.name}</a>}</div>
-        <div><a target={noTargetBlank ? '' : '_blank'} href={diff.actual!.attachment.path}>{diff.actual!.attachment.name}</a></div>
-        <div><a target={noTargetBlank ? '' : '_blank'} href={diff.expected!.attachment.path}>{diff.expected!.attachment.name}</a></div>
+        <div>{diff.diff && <a target='_blank' href={diff.diff.attachment.path} rel='noreferrer'>{diff.diff.attachment.name}</a>}</div>
+        <div><a target={noTargetBlank ? '' : '_blank'} href={diff.actual!.attachment.path} rel='noreferrer'>{diff.actual!.attachment.name}</a></div>
+        <div><a target={noTargetBlank ? '' : '_blank'} href={diff.expected!.attachment.path} rel='noreferrer'>{diff.expected!.attachment.name}</a></div>
       </div>
     </>}
   </div>;
diff --git a/packages/web/src/shared/resizeView.tsx b/packages/web/src/shared/resizeView.tsx
index 401867f223..9a11d7060f 100644
--- a/packages/web/src/shared/resizeView.tsx
+++ b/packages/web/src/shared/resizeView.tsx
@@ -82,6 +82,7 @@ export const ResizeView: React.FC<{
     />}
     {offsets.map((offset, index) => {
       return <div
+        key={index}
         style={{
           ...dividerStyle,
           top: orientation === 'horizontal' ? 0 : offset,
diff --git a/tests/components/ct-react-vite/src/components/Fetcher.tsx b/tests/components/ct-react-vite/src/components/Fetcher.tsx
index 5c489ec8bb..2f1322d148 100644
--- a/tests/components/ct-react-vite/src/components/Fetcher.tsx
+++ b/tests/components/ct-react-vite/src/components/Fetcher.tsx
@@ -20,7 +20,7 @@ export default function Fetcher() {
   }, [fetched, setFetched, setData]);
 
   return <div>
-    <div data-testId='name'>{data.name}</div>
+    <div data-testid='name'>{data.name}</div>
     <button onClick={() => {
       setFetched(false);
       setData({ name: '<none>' });

From b4a9b247b4c2825d82864c1f381aaabe3129ad4e Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Tue, 20 Aug 2024 09:02:23 -0700
Subject: [PATCH 14/25] fix(role): make sure to ignore
 style/script/noscript/template (#32231)

Even when these are a part of a hidden `aria-labelledby` traversal, all
browsers ignore them anyway.
---
 .../src/server/injected/roleUtils.ts          | 25 ++++++++++++-------
 tests/library/role-utils.spec.ts              | 13 ++++++++++
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/roleUtils.ts b/packages/playwright-core/src/server/injected/roleUtils.ts
index 57681e0542..99f3cafa29 100644
--- a/packages/playwright-core/src/server/injected/roleUtils.ts
+++ b/packages/playwright-core/src/server/injected/roleUtils.ts
@@ -261,12 +261,16 @@ function getAriaBoolean(attr: string | null) {
   return attr === null ? undefined : attr.toLowerCase() === 'true';
 }
 
+function isElementIgnoredForAria(element: Element) {
+  return ['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEMPLATE'].includes(elementSafeTagName(element));
+}
+
 // https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion, but including "none" and "presentation" roles
 // Not implemented:
 //   `Any descendants of elements that have the characteristic "Children Presentational: True"`
 // https://www.w3.org/TR/wai-aria-1.2/#aria-hidden
 export function isElementHiddenForAria(element: Element): boolean {
-  if (['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEMPLATE'].includes(elementSafeTagName(element)))
+  if (isElementIgnoredForAria(element))
     return true;
   const style = getElementComputedStyle(element);
   const isSlot = element.nodeName === 'SLOT';
@@ -496,14 +500,17 @@ function getTextAlternativeInternal(element: Element, options: AccessibleNameOpt
   // step 2a. Hidden Not Referenced: If the current node is hidden and is:
   // Not part of an aria-labelledby or aria-describedby traversal, where the node directly referenced by that relation was hidden.
   // Nor part of a native host language text alternative element (e.g. label in HTML) or attribute traversal, where the root of that traversal was hidden.
-  if (!options.includeHidden &&
-      !options.embeddedInLabelledBy?.hidden &&
-      !options.embeddedInDescribedBy?.hidden &&
-      !options?.embeddedInNativeTextAlternative?.hidden &&
-      !options?.embeddedInLabel?.hidden &&
-      isElementHiddenForAria(element)) {
-    options.visitedElements.add(element);
-    return '';
+  if (!options.includeHidden) {
+    const isEmbeddedInHiddenReferenceTraversal =
+      !!options.embeddedInLabelledBy?.hidden ||
+      !!options.embeddedInDescribedBy?.hidden ||
+      !!options.embeddedInNativeTextAlternative?.hidden ||
+      !!options.embeddedInLabel?.hidden;
+    if (isElementIgnoredForAria(element) ||
+      (!isEmbeddedInHiddenReferenceTraversal && isElementHiddenForAria(element))) {
+      options.visitedElements.add(element);
+      return '';
+    }
   }
 
   const labelledBy = getAriaLabelledByElements(element);
diff --git a/tests/library/role-utils.spec.ts b/tests/library/role-utils.spec.ts
index 4acc7f8a85..067053ba11 100644
--- a/tests/library/role-utils.spec.ts
+++ b/tests/library/role-utils.spec.ts
@@ -462,6 +462,19 @@ test('should work with form and tricky input names', async ({ page }) => {
   expect.soft(await getNameAndRole(page, 'form')).toEqual({ role: 'form', name: 'my form' });
 });
 
+test('should ignore stylesheet from hidden aria-labelledby subtree', async ({ page }) => {
+  await page.setContent(`
+    <div id=mylabel style="display:none">
+      <template shadowrootmode=open>
+        <style>span { color: red; }</style>
+        <span>hello</span>
+      </template>
+    </div>
+    <input aria-labelledby=mylabel type=text>
+  `);
+  expect.soft(await getNameAndRole(page, 'input')).toEqual({ role: 'textbox', name: 'hello' });
+});
+
 function toArray(x: any): any[] {
   return Array.isArray(x) ? x : [x];
 }

From fc4d8f2bb61a17363967c128725f7f73469e81cb Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 20 Aug 2024 10:56:46 -0700
Subject: [PATCH 15/25] chore: roll codicon (#32234)

---
 .../web/src/third_party/vscode/codicon.css    |  98 +++++++++++++-----
 .../web/src/third_party/vscode/codicon.ttf    | Bin 73464 -> 80340 bytes
 2 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/third_party/vscode/codicon.css b/packages/web/src/third_party/vscode/codicon.css
index d1bc9ece13..41360ce21d 100644
--- a/packages/web/src/third_party/vscode/codicon.css
+++ b/packages/web/src/third_party/vscode/codicon.css
@@ -9,21 +9,20 @@
 }
 
 .codicon {
-	font: normal normal normal 16px/1 codicon;
-	flex: none;
-	display: inline-block;
-	text-decoration: none;
-	text-rendering: auto;
-	text-align: center;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+  font: normal normal normal 16px/1 codicon;
+  flex: none;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.codicon-blank:before { content: '\2003'; }
 .codicon-add:before { content: '\ea60'; }
 .codicon-plus:before { content: '\ea60'; }
 .codicon-gist-new:before { content: '\ea60'; }
@@ -39,6 +38,7 @@
 .codicon-record-keys:before { content: '\ea65'; }
 .codicon-keyboard:before { content: '\ea65'; }
 .codicon-tag:before { content: '\ea66'; }
+.codicon-git-pull-request-label:before { content: '\ea66'; }
 .codicon-tag-add:before { content: '\ea66'; }
 .codicon-tag-remove:before { content: '\ea66'; }
 .codicon-person:before { content: '\ea67'; }
@@ -74,6 +74,7 @@
 .codicon-debug-breakpoint:before { content: '\ea71'; }
 .codicon-debug-breakpoint-disabled:before { content: '\ea71'; }
 .codicon-debug-hint:before { content: '\ea71'; }
+.codicon-terminal-decoration-success:before { content: '\ea71'; }
 .codicon-primitive-square:before { content: '\ea72'; }
 .codicon-edit:before { content: '\ea73'; }
 .codicon-pencil:before { content: '\ea73'; }
@@ -185,7 +186,6 @@
 .codicon-check:before { content: '\eab2'; }
 .codicon-checklist:before { content: '\eab3'; }
 .codicon-chevron-down:before { content: '\eab4'; }
-.codicon-drop-down-button:before { content: '\eab4'; }
 .codicon-chevron-left:before { content: '\eab5'; }
 .codicon-chevron-right:before { content: '\eab6'; }
 .codicon-chevron-up:before { content: '\eab7'; }
@@ -193,9 +193,10 @@
 .codicon-chrome-maximize:before { content: '\eab9'; }
 .codicon-chrome-minimize:before { content: '\eaba'; }
 .codicon-chrome-restore:before { content: '\eabb'; }
-.codicon-circle:before { content: '\eabc'; }
 .codicon-circle-outline:before { content: '\eabc'; }
+.codicon-circle:before { content: '\eabc'; }
 .codicon-debug-breakpoint-unverified:before { content: '\eabc'; }
+.codicon-terminal-decoration-incomplete:before { content: '\eabc'; }
 .codicon-circle-slash:before { content: '\eabd'; }
 .codicon-circuit-board:before { content: '\eabe'; }
 .codicon-clear-all:before { content: '\eabf'; }
@@ -207,7 +208,6 @@
 .codicon-collapse-all:before { content: '\eac5'; }
 .codicon-color-mode:before { content: '\eac6'; }
 .codicon-comment-discussion:before { content: '\eac7'; }
-.codicon-compare-changes:before { content: '\eafd'; }
 .codicon-credit-card:before { content: '\eac9'; }
 .codicon-dash:before { content: '\eacc'; }
 .codicon-dashboard:before { content: '\eacd'; }
@@ -231,6 +231,7 @@
 .codicon-diff-removed:before { content: '\eadf'; }
 .codicon-diff-renamed:before { content: '\eae0'; }
 .codicon-diff:before { content: '\eae1'; }
+.codicon-diff-sidebyside:before { content: '\eae1'; }
 .codicon-discard:before { content: '\eae2'; }
 .codicon-editor-layout:before { content: '\eae3'; }
 .codicon-empty-window:before { content: '\eae4'; }
@@ -259,6 +260,7 @@
 .codicon-gist:before { content: '\eafb'; }
 .codicon-git-commit:before { content: '\eafc'; }
 .codicon-git-compare:before { content: '\eafd'; }
+.codicon-compare-changes:before { content: '\eafd'; }
 .codicon-git-merge:before { content: '\eafe'; }
 .codicon-github-action:before { content: '\eaff'; }
 .codicon-github-alt:before { content: '\eb00'; }
@@ -271,13 +273,11 @@
 .codicon-horizontal-rule:before { content: '\eb07'; }
 .codicon-hubot:before { content: '\eb08'; }
 .codicon-inbox:before { content: '\eb09'; }
-.codicon-issue-closed:before { content: '\eba4'; }
 .codicon-issue-reopened:before { content: '\eb0b'; }
 .codicon-issues:before { content: '\eb0c'; }
 .codicon-italic:before { content: '\eb0d'; }
 .codicon-jersey:before { content: '\eb0e'; }
 .codicon-json:before { content: '\eb0f'; }
-.codicon-bracket:before { content: '\eb0f'; }
 .codicon-kebab-vertical:before { content: '\eb10'; }
 .codicon-key:before { content: '\eb11'; }
 .codicon-law:before { content: '\eb12'; }
@@ -295,6 +295,7 @@
 .codicon-megaphone:before { content: '\eb1e'; }
 .codicon-mention:before { content: '\eb1f'; }
 .codicon-milestone:before { content: '\eb20'; }
+.codicon-git-pull-request-milestone:before { content: '\eb20'; }
 .codicon-mortar-board:before { content: '\eb21'; }
 .codicon-move:before { content: '\eb22'; }
 .codicon-multiple-windows:before { content: '\eb23'; }
@@ -355,7 +356,6 @@
 .codicon-star-half:before { content: '\eb5a'; }
 .codicon-symbol-class:before { content: '\eb5b'; }
 .codicon-symbol-color:before { content: '\eb5c'; }
-.codicon-symbol-customcolor:before { content: '\eb5c'; }
 .codicon-symbol-constant:before { content: '\eb5d'; }
 .codicon-symbol-enum-member:before { content: '\eb5e'; }
 .codicon-symbol-field:before { content: '\eb5f'; }
@@ -407,6 +407,7 @@
 .codicon-debug-stackframe-active:before { content: '\eb89'; }
 .codicon-circle-small-filled:before { content: '\eb8a'; }
 .codicon-debug-stackframe-dot:before { content: '\eb8a'; }
+.codicon-terminal-decoration-mark:before { content: '\eb8a'; }
 .codicon-debug-stackframe:before { content: '\eb8b'; }
 .codicon-debug-stackframe-focused:before { content: '\eb8b'; }
 .codicon-debug-breakpoint-unsupported:before { content: '\eb8c'; }
@@ -414,14 +415,17 @@
 .codicon-debug-reverse-continue:before { content: '\eb8e'; }
 .codicon-debug-step-back:before { content: '\eb8f'; }
 .codicon-debug-restart-frame:before { content: '\eb90'; }
+.codicon-debug-alt:before { content: '\eb91'; }
 .codicon-call-incoming:before { content: '\eb92'; }
 .codicon-call-outgoing:before { content: '\eb93'; }
 .codicon-menu:before { content: '\eb94'; }
 .codicon-expand-all:before { content: '\eb95'; }
 .codicon-feedback:before { content: '\eb96'; }
+.codicon-git-pull-request-reviewer:before { content: '\eb96'; }
 .codicon-group-by-ref-type:before { content: '\eb97'; }
 .codicon-ungroup-by-ref-type:before { content: '\eb98'; }
 .codicon-account:before { content: '\eb99'; }
+.codicon-git-pull-request-assignee:before { content: '\eb99'; }
 .codicon-bell-dot:before { content: '\eb9a'; }
 .codicon-debug-console:before { content: '\eb9b'; }
 .codicon-library:before { content: '\eb9c'; }
@@ -430,10 +434,10 @@
 .codicon-sync-ignored:before { content: '\eb9f'; }
 .codicon-pinned:before { content: '\eba0'; }
 .codicon-github-inverted:before { content: '\eba1'; }
-.codicon-debug-alt:before { content: '\eb91'; }
 .codicon-server-process:before { content: '\eba2'; }
 .codicon-server-environment:before { content: '\eba3'; }
 .codicon-pass:before { content: '\eba4'; }
+.codicon-issue-closed:before { content: '\eba4'; }
 .codicon-stop-circle:before { content: '\eba5'; }
 .codicon-play-circle:before { content: '\eba6'; }
 .codicon-record:before { content: '\eba7'; }
@@ -466,7 +470,7 @@
 .codicon-debug-rerun:before { content: '\ebc0'; }
 .codicon-workspace-trusted:before { content: '\ebc1'; }
 .codicon-workspace-untrusted:before { content: '\ebc2'; }
-.codicon-workspace-unspecified:before { content: '\ebc3'; }
+.codicon-workspace-unknown:before { content: '\ebc3'; }
 .codicon-terminal-cmd:before { content: '\ebc4'; }
 .codicon-terminal-debian:before { content: '\ebc5'; }
 .codicon-terminal-linux:before { content: '\ebc6'; }
@@ -500,6 +504,7 @@
 .codicon-graph-line:before { content: '\ebe2'; }
 .codicon-graph-scatter:before { content: '\ebe3'; }
 .codicon-pie-chart:before { content: '\ebe4'; }
+.codicon-bracket:before { content: '\eb0f'; }
 .codicon-bracket-dot:before { content: '\ebe5'; }
 .codicon-bracket-error:before { content: '\ebe6'; }
 .codicon-lock-small:before { content: '\ebe7'; }
@@ -519,20 +524,26 @@
 .codicon-layout-statusbar:before { content: '\ebf5'; }
 .codicon-layout-menubar:before { content: '\ebf6'; }
 .codicon-layout-centered:before { content: '\ebf7'; }
-.codicon-layout-sidebar-right-off:before { content: '\ec00'; }
-.codicon-layout-panel-off:before { content: '\ec01'; }
-.codicon-layout-sidebar-left-off:before { content: '\ec02'; }
 .codicon-target:before { content: '\ebf8'; }
 .codicon-indent:before { content: '\ebf9'; }
 .codicon-record-small:before { content: '\ebfa'; }
 .codicon-error-small:before { content: '\ebfb'; }
+.codicon-terminal-decoration-error:before { content: '\ebfb'; }
 .codicon-arrow-circle-down:before { content: '\ebfc'; }
 .codicon-arrow-circle-left:before { content: '\ebfd'; }
 .codicon-arrow-circle-right:before { content: '\ebfe'; }
 .codicon-arrow-circle-up:before { content: '\ebff'; }
+.codicon-layout-sidebar-right-off:before { content: '\ec00'; }
+.codicon-layout-panel-off:before { content: '\ec01'; }
+.codicon-layout-sidebar-left-off:before { content: '\ec02'; }
+.codicon-blank:before { content: '\ec03'; }
 .codicon-heart-filled:before { content: '\ec04'; }
 .codicon-map:before { content: '\ec05'; }
+.codicon-map-horizontal:before { content: '\ec05'; }
+.codicon-fold-horizontal:before { content: '\ec05'; }
 .codicon-map-filled:before { content: '\ec06'; }
+.codicon-map-horizontal-filled:before { content: '\ec06'; }
+.codicon-fold-horizontal-filled:before { content: '\ec06'; }
 .codicon-circle-small:before { content: '\ec07'; }
 .codicon-bell-slash:before { content: '\ec08'; }
 .codicon-bell-slash-dot:before { content: '\ec09'; }
@@ -544,3 +555,42 @@
 .codicon-send:before { content: '\ec0f'; }
 .codicon-sparkle:before { content: '\ec10'; }
 .codicon-insert:before { content: '\ec11'; }
+.codicon-mic:before { content: '\ec12'; }
+.codicon-thumbsdown-filled:before { content: '\ec13'; }
+.codicon-thumbsup-filled:before { content: '\ec14'; }
+.codicon-coffee:before { content: '\ec15'; }
+.codicon-snake:before { content: '\ec16'; }
+.codicon-game:before { content: '\ec17'; }
+.codicon-vr:before { content: '\ec18'; }
+.codicon-chip:before { content: '\ec19'; }
+.codicon-piano:before { content: '\ec1a'; }
+.codicon-music:before { content: '\ec1b'; }
+.codicon-mic-filled:before { content: '\ec1c'; }
+.codicon-repo-fetch:before { content: '\ec1d'; }
+.codicon-copilot:before { content: '\ec1e'; }
+.codicon-lightbulb-sparkle:before { content: '\ec1f'; }
+.codicon-robot:before { content: '\ec20'; }
+.codicon-sparkle-filled:before { content: '\ec21'; }
+.codicon-diff-single:before { content: '\ec22'; }
+.codicon-diff-multiple:before { content: '\ec23'; }
+.codicon-surround-with:before { content: '\ec24'; }
+.codicon-share:before { content: '\ec25'; }
+.codicon-git-stash:before { content: '\ec26'; }
+.codicon-git-stash-apply:before { content: '\ec27'; }
+.codicon-git-stash-pop:before { content: '\ec28'; }
+.codicon-vscode:before { content: '\ec29'; }
+.codicon-vscode-insiders:before { content: '\ec2a'; }
+.codicon-code-oss:before { content: '\ec2b'; }
+.codicon-run-coverage:before { content: '\ec2c'; }
+.codicon-run-all-coverage:before { content: '\ec2d'; }
+.codicon-coverage:before { content: '\ec2e'; }
+.codicon-github-project:before { content: '\ec2f'; }
+.codicon-map-vertical:before { content: '\ec30'; }
+.codicon-fold-vertical:before { content: '\ec30'; }
+.codicon-map-vertical-filled:before { content: '\ec31'; }
+.codicon-fold-vertical-filled:before { content: '\ec31'; }
+.codicon-go-to-search:before { content: '\ec32'; }
+.codicon-percentage:before { content: '\ec33'; }
+.codicon-sort-percentage:before { content: '\ec33'; }
+.codicon-attach:before { content: '\ec34'; }
+.codicon-git-fetch:before { content: '\f101'; }
diff --git a/packages/web/src/third_party/vscode/codicon.ttf b/packages/web/src/third_party/vscode/codicon.ttf
index c4a33a4d5669d1c4f6ac274fae5792096bdb082b..27ee4c68caef1cd22342f481420d6dbda1648012 100644
GIT binary patch
delta 14648
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

delta 8332
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
P<!`f%lLpEyuFn1!Kc3IB


From 109cab66f15056f64fd30d05b99d10936e4ddb8e Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 20 Aug 2024 10:56:55 -0700
Subject: [PATCH 16/25] chore: extract recorder dialog into a class (#32233)

---
 .../src/server/injected/recorder/recorder.ts  | 156 +++++++++++-------
 1 file changed, 96 insertions(+), 60 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/recorder/recorder.ts b/packages/playwright-core/src/server/injected/recorder/recorder.ts
index c9413e0a72..3432f159dd 100644
--- a/packages/playwright-core/src/server/injected/recorder/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts
@@ -552,28 +552,14 @@ class TextAssertionTool implements RecorderTool {
   private _recorder: Recorder;
   private _hoverHighlight: HighlightModel | null = null;
   private _action: actions.AssertAction | null = null;
-  private _dialogElement: HTMLElement | null = null;
-  private _acceptButton: HTMLElement;
-  private _cancelButton: HTMLElement;
-  private _keyboardListener: ((event: KeyboardEvent) => void) | undefined;
+  private _dialog: Dialog;
   private _textCache = new Map<Element | ShadowRoot, ElementText>();
   private _kind: 'text' | 'value';
 
   constructor(recorder: Recorder, kind: 'text' | 'value') {
     this._recorder = recorder;
     this._kind = kind;
-
-    this._acceptButton = this._recorder.document.createElement('x-pw-tool-item');
-    this._acceptButton.title = 'Accept';
-    this._acceptButton.classList.add('accept');
-    this._acceptButton.appendChild(this._recorder.document.createElement('x-div'));
-    this._acceptButton.addEventListener('click', () => this._commit());
-
-    this._cancelButton = this._recorder.document.createElement('x-pw-tool-item');
-    this._cancelButton.title = 'Close';
-    this._cancelButton.classList.add('cancel');
-    this._cancelButton.appendChild(this._recorder.document.createElement('x-div'));
-    this._cancelButton.addEventListener('click', () => this._closeDialog());
+    this._dialog = new Dialog(recorder);
   }
 
   cursor() {
@@ -581,7 +567,7 @@ class TextAssertionTool implements RecorderTool {
   }
 
   cleanup() {
-    this._closeDialog();
+    this._dialog.close();
     this._hoverHighlight = null;
   }
 
@@ -590,7 +576,7 @@ class TextAssertionTool implements RecorderTool {
     if (this._kind === 'value') {
       this._commitAssertValue();
     } else {
-      if (!this._dialogElement)
+      if (!this._dialog.isShowing())
         this._showDialog();
     }
   }
@@ -611,7 +597,7 @@ class TextAssertionTool implements RecorderTool {
   }
 
   onMouseMove(event: MouseEvent) {
-    if (this._dialogElement)
+    if (this._dialog.isShowing())
       return;
     const target = this._recorder.deepEventTarget(event);
     if (this._hoverHighlight?.elements[0] === target)
@@ -691,9 +677,9 @@ class TextAssertionTool implements RecorderTool {
   }
 
   private _commit() {
-    if (!this._action || !this._dialogElement)
+    if (!this._action || !this._dialog.isShowing())
       return;
-    this._closeDialog();
+    this._dialog.close();
     this._recorder.delegate.recordAction?.(this._action);
     this._recorder.delegate.setMode?.('recording');
   }
@@ -705,31 +691,6 @@ class TextAssertionTool implements RecorderTool {
     if (!this._action || this._action.name !== 'assertText')
       return;
 
-    this._dialogElement = this._recorder.document.createElement('x-pw-dialog');
-    this._keyboardListener = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        this._closeDialog();
-        return;
-      }
-      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
-        if (this._dialogElement)
-          this._commit();
-        return;
-      }
-    };
-
-    this._recorder.document.addEventListener('keydown', this._keyboardListener, true);
-    const toolbarElement = this._recorder.document.createElement('x-pw-tools-list');
-    const labelElement = this._recorder.document.createElement('label');
-    labelElement.textContent = 'Assert that element contains text';
-    toolbarElement.appendChild(labelElement);
-    toolbarElement.appendChild(this._recorder.document.createElement('x-spacer'));
-    toolbarElement.appendChild(this._acceptButton);
-    toolbarElement.appendChild(this._cancelButton);
-
-    this._dialogElement.appendChild(toolbarElement);
-    const bodyElement = this._recorder.document.createElement('x-pw-dialog-body');
-
     const action = this._action;
     const textElement = this._recorder.document.createElement('textarea');
     textElement.setAttribute('spellcheck', 'false');
@@ -747,24 +708,18 @@ class TextAssertionTool implements RecorderTool {
       textElement.classList.toggle('does-not-match', !matches);
     };
     textElement.addEventListener('input', updateAndValidate);
-    bodyElement.appendChild(textElement);
 
-    this._dialogElement.appendChild(bodyElement);
-    this._recorder.highlight.appendChild(this._dialogElement);
-    const position = this._recorder.highlight.tooltipPosition(this._recorder.highlight.firstBox()!, this._dialogElement);
-    this._dialogElement.style.top = position.anchorTop + 'px';
-    this._dialogElement.style.left = position.anchorLeft + 'px';
+    const label = 'Assert that element contains text';
+    const dialogElement = this._dialog.show({
+      label,
+      body: textElement,
+      onCommit: () => this._commit(),
+    });
+    const position = this._recorder.highlight.tooltipPosition(this._recorder.highlight.firstBox()!, dialogElement);
+    this._dialog.moveTo(position.anchorTop, position.anchorLeft);
     textElement.focus();
   }
 
-  private _closeDialog() {
-    if (!this._dialogElement)
-      return;
-    this._dialogElement.remove();
-    this._recorder.document.removeEventListener('keydown', this._keyboardListener!);
-    this._dialogElement = null;
-  }
-
   private _commitAssertValue() {
     if (this._kind !== 'value')
       return;
@@ -1219,6 +1174,87 @@ export class Recorder {
   }
 }
 
+class Dialog {
+  private _recorder: Recorder;
+  private _dialogElement: HTMLElement | null = null;
+  private _keyboardListener: ((event: KeyboardEvent) => void) | undefined;
+
+  constructor(recorder: Recorder) {
+    this._recorder = recorder;
+  }
+
+  isShowing(): boolean {
+    return !!this._dialogElement;
+  }
+
+  show(options: {
+    label: string;
+    body: Element;
+    onCommit: () => void;
+    onCancel?: () => void;
+  }) {
+    const acceptButton = this._recorder.document.createElement('x-pw-tool-item');
+    acceptButton.title = 'Accept';
+    acceptButton.classList.add('accept');
+    acceptButton.appendChild(this._recorder.document.createElement('x-div'));
+    acceptButton.addEventListener('click', () => options.onCommit());
+
+    const cancelButton = this._recorder.document.createElement('x-pw-tool-item');
+    cancelButton.title = 'Close';
+    cancelButton.classList.add('cancel');
+    cancelButton.appendChild(this._recorder.document.createElement('x-div'));
+    cancelButton.addEventListener('click', () => {
+      this.close();
+      options.onCancel?.();
+    });
+
+    this._dialogElement = this._recorder.document.createElement('x-pw-dialog');
+    this._keyboardListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.close();
+        options.onCancel?.();
+        return;
+      }
+      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+        if (this._dialogElement)
+          options.onCommit();
+        return;
+      }
+    };
+
+    this._recorder.document.addEventListener('keydown', this._keyboardListener, true);
+    const toolbarElement = this._recorder.document.createElement('x-pw-tools-list');
+    const labelElement = this._recorder.document.createElement('label');
+    labelElement.textContent = options.label;
+    toolbarElement.appendChild(labelElement);
+    toolbarElement.appendChild(this._recorder.document.createElement('x-spacer'));
+    toolbarElement.appendChild(acceptButton);
+    toolbarElement.appendChild(cancelButton);
+
+    this._dialogElement.appendChild(toolbarElement);
+    const bodyElement = this._recorder.document.createElement('x-pw-dialog-body');
+    bodyElement.appendChild(options.body);
+    this._dialogElement.appendChild(bodyElement);
+    this._recorder.highlight.appendChild(this._dialogElement);
+    return this._dialogElement;
+  }
+
+  moveTo(top: number, left: number) {
+    if (!this._dialogElement)
+      return;
+    this._dialogElement.style.top = top + 'px';
+    this._dialogElement.style.left = left + 'px';
+  }
+
+  close() {
+    if (!this._dialogElement)
+      return;
+    this._dialogElement.remove();
+    this._recorder.document.removeEventListener('keydown', this._keyboardListener!);
+    this._dialogElement = null;
+  }
+}
+
 function deepActiveElement(document: Document): Element | null {
   let activeElement = document.activeElement;
   while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement)

From b66cb6caaaba17e03af2b95f4abd54234beb4a50 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 21 Aug 2024 01:31:41 -0700
Subject: [PATCH 17/25] docs(evaluate): improve the guide (#32222)

---
 docs/src/evaluating.md | 222 ++++++++++++++++++++++++++---------------
 1 file changed, 142 insertions(+), 80 deletions(-)

diff --git a/docs/src/evaluating.md b/docs/src/evaluating.md
index 50851110d0..903aeb8a90 100644
--- a/docs/src/evaluating.md
+++ b/docs/src/evaluating.md
@@ -68,9 +68,95 @@ int status = await page.EvaluateAsync<int>(@"async () => {
 }");
 ```
 
+## Different environments
+
+Evaluated scripts run in the browser environment, while your test runs in a testing environments. This means you cannot use variables from your test in the page and vice versa. Instead, you should pass them explicitly as an argument.
+
+The following snippet is **WRONG** because it uses the variable directly:
+
+```js
+const data = 'some data';
+const result = await page.evaluate(() => {
+  // WRONG: there is no "data" in the web page.
+  window.myApp.use(data);
+});
+```
+
+```java
+String data = "some data";
+Object result = page.evaluate("() => {\n" +
+  "  // WRONG: there is no 'data' in the web page.\n" +
+  "  window.myApp.use(data);\n" +
+  "}");
+```
+
+```python async
+data = "some data"
+result = await page.evaluate("""() => {
+  // WRONG: there is no "data" in the web page.
+  window.myApp.use(data)
+}""")
+```
+
+```python sync
+data = "some data"
+result = page.evaluate("""() => {
+  // WRONG: there is no "data" in the web page.
+  window.myApp.use(data)
+}""")
+```
+
+```csharp
+var data = "some data";
+var result = await page.EvaluateAsync(@"() => {
+  // WRONG: there is no 'data' in the web page.
+  window.myApp.use(data);
+}");
+```
+
+The following snippet is **CORRECT** because it passes the value explicitly as an argument:
+
+```js
+const data = 'some data';
+// Pass |data| as a parameter.
+const result = await page.evaluate(data => {
+  window.myApp.use(data);
+}, data);
+```
+
+```java
+String data = "some data";
+// Pass |data| as a parameter.
+Object result = page.evaluate("data => {\n" +
+  "  window.myApp.use(data);\n" +
+  "}", data);
+```
+
+```python async
+data = "some data"
+# Pass |data| as a parameter.
+result = await page.evaluate("""data => {
+  window.myApp.use(data)
+}""", data)
+```
+
+```python sync
+data = "some data"
+# Pass |data| as a parameter.
+result = page.evaluate("""data => {
+  window.myApp.use(data)
+}""", data)
+```
+
+```csharp
+var data = "some data";
+// Pass |data| as a parameter.
+var result = await page.EvaluateAsync("data => { window.myApp.use(data); }", data);
+```
+
 ## Evaluation Argument
 
-Playwright evaluation methods like [`method: Page.evaluate`] take a single optional argument. This argument can be a mix of [Serializable] values and [JSHandle] or [ElementHandle] instances. Handles are automatically converted to the value they represent.
+Playwright evaluation methods like [`method: Page.evaluate`] take a single optional argument. This argument can be a mix of [Serializable] values and [JSHandle] instances. Handles are automatically converted to the value they represent.
 
 ```js
 // A primitive value.
@@ -86,7 +172,7 @@ await page.evaluate(object => object.foo, { foo: 'bar' });
 const button = await page.evaluateHandle('window.button');
 await page.evaluate(button => button.textContent, button);
 
-// Alternative notation using elementHandle.evaluate.
+// Alternative notation using JSHandle.evaluate.
 await button.evaluate((button, from) => button.textContent.substring(from), 5);
 
 // Object with multiple handles.
@@ -109,7 +195,7 @@ await page.evaluate(
     ([b1, b2]) => b1.textContent + b2.textContent,
     [button1, button2]);
 
-// Any non-cyclic mix of serializables and handles works.
+// Any mix of serializables and handles works.
 await page.evaluate(
     x => x.button1.textContent + x.list[0].textContent + String(x.foo),
     { button1, list: [button2], foo: null });
@@ -131,7 +217,7 @@ page.evaluate("object => object.foo", obj);
 ElementHandle button = page.evaluateHandle("window.button");
 page.evaluate("button => button.textContent", button);
 
-// Alternative notation using elementHandle.evaluate.
+// Alternative notation using JSHandle.evaluate.
 button.evaluate("(button, from) => button.textContent.substring(from)", 5);
 
 // Object with multiple handles.
@@ -156,7 +242,7 @@ page.evaluate(
   "([b1, b2]) => b1.textContent + b2.textContent",
   Arrays.asList(button1, button2));
 
-// Any non-cyclic mix of serializables and handles works.
+// Any mix of serializables and handles works.
 Map<String, Object> arg = new HashMap<>();
 arg.put("button1", button1);
 arg.put("list", Arrays.asList(button2));
@@ -180,7 +266,7 @@ await page.evaluate('object => object.foo', { 'foo': 'bar' })
 button = await page.evaluate_handle('button')
 await page.evaluate('button => button.textContent', button)
 
-# Alternative notation using elementHandle.evaluate.
+# Alternative notation using JSHandle.evaluate.
 await button.evaluate('(button, from) => button.textContent.substring(from)', 5)
 
 # Object with multiple handles.
@@ -203,7 +289,7 @@ await page.evaluate("""
     ([b1, b2]) => b1.textContent + b2.textContent""",
     [button1, button2])
 
-# Any non-cyclic mix of serializables and handles works.
+# Any mix of serializables and handles works.
 await page.evaluate("""
     x => x.button1.textContent + x.list[0].textContent + String(x.foo)""",
     { 'button1': button1, 'list': [button2], 'foo': None })
@@ -223,7 +309,7 @@ page.evaluate('object => object.foo', { 'foo': 'bar' })
 button = page.evaluate_handle('window.button')
 page.evaluate('button => button.textContent', button)
 
-# Alternative notation using elementHandle.evaluate.
+# Alternative notation using JSHandle.evaluate.
 button.evaluate('(button, from) => button.textContent.substring(from)', 5)
 
 # Object with multiple handles.
@@ -245,7 +331,7 @@ page.evaluate("""
     ([b1, b2]) => b1.textContent + b2.textContent""",
     [button1, button2])
 
-# Any non-cyclic mix of serializables and handles works.
+# Any mix of serializables and handles works.
 page.evaluate("""
     x => x.button1.textContent + x.list[0].textContent + String(x.foo)""",
     { 'button1': button1, 'list': [button2], 'foo': None })
@@ -265,7 +351,7 @@ await page.EvaluateAsync<object>("object => object.foo", new { foo = "bar" });
 var button = await page.EvaluateHandleAsync("window.button");
 await page.EvaluateAsync<IJSHandle>("button => button.textContent", button);
 
-// Alternative notation using elementHandle.EvaluateAsync.
+// Alternative notation using JSHandle.EvaluateAsync.
 await button.EvaluateAsync<string>("(button, from) => button.textContent.substring(from)", 5);
 
 // Object with multiple handles.
@@ -282,93 +368,69 @@ await page.EvaluateAsync("({ button1, button2 }) => button1.textContent + button
 // Note the required parenthesis.
 await page.EvaluateAsync("([b1, b2]) => b1.textContent + b2.textContent", new[] { button1, button2 });
 
-// Any non-cyclic mix of serializables and handles works.
+// Any mix of serializables and handles works.
 await page.EvaluateAsync("x => x.button1.textContent + x.list[0].textContent + String(x.foo)", new { button1, list = new[] { button2 }, foo = null as object });
 ```
 
-Right:
+## Init scripts
+
+Sometimes it is convenient to evaluate something in the page before it starts loading. For example, you might want to setup some mocks or test data.
+
+In this case, use [`method: Page.addInitScript`] or [`method: BrowserContext.addInitScript`]. In the example below, we will replace `Math.random()` with a constant value.
+
+First, create a `preload.js` file that contains the mock.
+
+```js browser
+// preload.js
+Math.random = () => 42;
+```
+
+Next, add init script to the page.
 
 ```js
-const data = { text: 'some data', value: 1 };
-// Pass |data| as a parameter.
-const result = await page.evaluate(data => {
-  window.myApp.use(data);
-}, data);
-```
+import { test, expect } from '@playwright/test';
+import path from 'path';
 
-```java
-Map<String, Object> data = new HashMap<>();
-data.put("text", "some data");
-data.put("value", 1);
-// Pass |data| as a parameter.
-Object result = page.evaluate("data => {\n" +
-  "  window.myApp.use(data);\n" +
-  "}", data);
-```
-
-```python async
-data = { 'text': 'some data', 'value': 1 }
-# Pass |data| as a parameter.
-result = await page.evaluate("""data => {
-  window.myApp.use(data)
-}""", data)
-```
-
-```python sync
-data = { 'text': 'some data', 'value': 1 }
-# Pass |data| as a parameter.
-result = page.evaluate("""data => {
-  window.myApp.use(data)
-}""", data)
-```
-
-```csharp
-var data = new { text = "some data", value = 1};
-// Pass data as a parameter
-var result = await page.EvaluateAsync("data => { window.myApp.use(data); }", data);
-```
-
-Wrong:
-
-```js
-const data = { text: 'some data', value: 1 };
-const result = await page.evaluate(() => {
-  // There is no |data| in the web page.
-  window.myApp.use(data);
+test.beforeEach(async ({ page }) => {
+  // Add script for every test in the beforeEach hook.
+  // Make sure to correctly resolve the script path.
+  await page.addInitScript({ path: path.resolve(__dirname, '../mocks/preload.js') });
 });
 ```
 
 ```java
-Map<String, Object> data = new HashMap<>();
-data.put("text", "some data");
-data.put("value", 1);
-Object result = page.evaluate("() => {\n" +
-  "  // There is no |data| in the web page.\n" +
-  "  window.myApp.use(data);\n" +
-  "}");
+// In your test, assuming the "preload.js" file is in the "mocks" directory.
+page.addInitScript(Paths.get("mocks/preload.js"));
 ```
 
 ```python async
-data = { 'text': 'some data', 'value': 1 }
-result = await page.evaluate("""() => {
-  // There is no |data| in the web page.
-  window.myApp.use(data)
-}""")
+# In your test, assuming the "preload.js" file is in the "mocks" directory.
+await page.add_init_script(path="mocks/preload.js")
 ```
 
 ```python sync
-data = { 'text': 'some data', 'value': 1 }
-result = page.evaluate("""() => {
-  // There is no |data| in the web page.
-  window.myApp.use(data)
-}""")
+# In your test, assuming the "preload.js" file is in the "mocks" directory.
+page.add_init_script(path="mocks/preload.js")
 ```
 
 ```csharp
-var data = new { text = "some data", value = 1};
-// Pass data as a parameter
-var result = await page.EvaluateAsync(@"data => {
-  // There is no |data| in the web page.
-  window.myApp.use(data);
-}");
+// In your test, assuming the "preload.js" file is in the "mocks" directory.
+await Page.AddInitScriptAsync(scriptPath: "mocks/preload.js");
+```
+
+######
+* langs: js
+
+Alternatively, you can pass a function instead of creating a preload script file. This is more convenient for short or one-off scripts. You can also pass an argument this way.
+
+```js
+import { test, expect } from '@playwright/test';
+
+// Add script for every test in the beforeEach hook.
+test.beforeEach(async ({ page }) => {
+  const value = 42;
+  await page.addInitScript(value => {
+    Math.random = () => value;
+  }, value);
+});
 ```

From 6512bccffdb451228361fd8ddfdb1ae1d499cbf3 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Wed, 21 Aug 2024 11:37:53 +0200
Subject: [PATCH 18/25] docs(best-practises): add note about tsc (#32245)

---
 docs/src/best-practices-js.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/best-practices-js.md b/docs/src/best-practices-js.md
index 7d4830b6cb..3b70817923 100644
--- a/docs/src/best-practices-js.md
+++ b/docs/src/best-practices-js.md
@@ -265,7 +265,7 @@ Use Linux when running your tests on CI as it is cheaper. Developers can use wha
 
 ### Lint your tests
 
-Linting the tests helps catching errors early. Use [`@typescript-eslint/no-floating-promises`](https://typescript-eslint.io/rules/no-floating-promises/) [ESLint](https://eslint.org) rule to make sure there are no missing awaits before the asynchronous calls to the Playwright API.
+We recommend TypeScript and linting with ESLint for your tests to catch errors early. Use [`@typescript-eslint/no-floating-promises`](https://typescript-eslint.io/rules/no-floating-promises/) [ESLint](https://eslint.org) rule to make sure there are no missing awaits before the asynchronous calls to the Playwright API. On your CI you can run `tsc --noEmit` to ensure that functions are called with the right signature.
 
 ### Use parallelism and sharding
 

From 918dbe5e3aeb40a3a4c5443b6fb5d523bc0f81d8 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Wed, 21 Aug 2024 08:34:55 -0700
Subject: [PATCH 19/25] chore: start listening for navigation events before
 navigation starts (#32237)

There is a chance in case of cross-process navigation that the
navigation event comes before `navigateFrame` finishes.
---
 packages/playwright-core/src/server/frames.ts | 26 ++++++++++++++-----
 tests/page/page-goto.spec.ts                  |  3 ++-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/playwright-core/src/server/frames.ts b/packages/playwright-core/src/server/frames.ts
index 87569f00d6..931ba8ef73 100644
--- a/packages/playwright-core/src/server/frames.ts
+++ b/packages/playwright-core/src/server/frames.ts
@@ -659,18 +659,24 @@ export class Frame extends SdkObject {
     }
     url = helper.completeUserURL(url);
 
-    const sameDocument = helper.waitForEvent(progress, this, Frame.Events.InternalNavigation, (e: NavigationEvent) => !e.newDocument);
-    const navigateResult = await this._page._delegate.navigateFrame(this, url, referer);
+    const navigationEvents: NavigationEvent[] = [];
+    const collectNavigations = (arg: NavigationEvent) => navigationEvents.push(arg);
+    this.on(Frame.Events.InternalNavigation, collectNavigations);
+    const navigateResult = await this._page._delegate.navigateFrame(this, url, referer).finally(
+        () => this.off(Frame.Events.InternalNavigation, collectNavigations));
 
     let event: NavigationEvent;
     if (navigateResult.newDocumentId) {
-      sameDocument.dispose();
-      event = await helper.waitForEvent(progress, this, Frame.Events.InternalNavigation, (event: NavigationEvent) => {
+      const predicate = (event: NavigationEvent) => {
         // We are interested either in this specific document, or any other document that
         // did commit and replaced the expected document.
         return event.newDocument && (event.newDocument.documentId === navigateResult.newDocumentId || !event.error);
-      }).promise;
-
+      };
+      const events = navigationEvents.filter(predicate);
+      if (events.length)
+        event = events[0];
+      else
+        event = await helper.waitForEvent(progress, this, Frame.Events.InternalNavigation, predicate).promise;
       if (event.newDocument!.documentId !== navigateResult.newDocumentId) {
         // This is just a sanity check. In practice, new navigation should
         // cancel the previous one and report "request cancelled"-like error.
@@ -679,7 +685,13 @@ export class Frame extends SdkObject {
       if (event.error)
         throw event.error;
     } else {
-      event = await sameDocument.promise;
+      // Wait for same document navigation.
+      const predicate = (e: NavigationEvent) => !e.newDocument;
+      const events = navigationEvents.filter(predicate);
+      if (events.length)
+        event = events[0];
+      else
+        event = await helper.waitForEvent(progress, this, Frame.Events.InternalNavigation, predicate).promise;
     }
 
     if (!this._firedLifecycleEvents.has(waitUntil))
diff --git a/tests/page/page-goto.spec.ts b/tests/page/page-goto.spec.ts
index 79107c0d21..015fa0e4ef 100644
--- a/tests/page/page-goto.spec.ts
+++ b/tests/page/page-goto.spec.ts
@@ -181,8 +181,9 @@ it('should work with Cross-Origin-Opener-Policy after redirect', async ({ page,
 
 it('should properly cancel Cross-Origin-Opener-Policy navigation', {
   annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32107' },
-}, async ({ page, server, browserName, isLinux }) => {
+}, async ({ page, server, browserName, isLinux, headless }) => {
   it.fixme(browserName === 'webkit' && isLinux, 'Started failing after https://commits.webkit.org/281488@main');
+  it.fixme(browserName === 'chromium' && headless, 'COOP navigation cancels the one that starts later');
   server.setRoute('/empty.html', (req, res) => {
     res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
     res.end();

From 837e2a883b737f9e5cf6871ef3cea0b66950fa39 Mon Sep 17 00:00:00 2001
From: Guillaume M <guillaume_moreau@ymail.com>
Date: Wed, 21 Aug 2024 17:35:47 +0200
Subject: [PATCH 20/25] docs(browsers): fix typo (#32250)

---
 docs/src/browsers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/browsers.md b/docs/src/browsers.md
index c1ad722d60..3b9e76d006 100644
--- a/docs/src/browsers.md
+++ b/docs/src/browsers.md
@@ -461,7 +461,7 @@ Playwright's Firefox version matches the recent [Firefox Stable](https://www.moz
 
 ### WebKit
 
-Playwright's WebKit is derived from the latest WebKit main branch sources, often before these updates are incorporated into Apple Safari and other WebKit-based browsers. This gives a lot of lead time to react on the potential browser update issues. Playwright doesn't work with the branded version of Safari since it relies on patches. Instead, you can test using the most recent WebKit build. Note that avialability of certain features, which depend heavily on the underlying platform, may vary between operating systems.
+Playwright's WebKit is derived from the latest WebKit main branch sources, often before these updates are incorporated into Apple Safari and other WebKit-based browsers. This gives a lot of lead time to react on the potential browser update issues. Playwright doesn't work with the branded version of Safari since it relies on patches. Instead, you can test using the most recent WebKit build. Note that availability of certain features, which depend heavily on the underlying platform, may vary between operating systems.
 
 ## Install behind a firewall or a proxy
 

From d5a74950410feb1a4fb4745a1e58573d3ff40819 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 21 Aug 2024 09:46:38 -0700
Subject: [PATCH 21/25] feat(addInitScript): support cjs modules when passing
 both `path` and `arg` (#32240)

This works with scripts bundled by:
- `esbuild entrypoint.ts --bundle --format=cjs --outfile=injected.js`
- webpack with a typical config
  ```js
  module.exports = {
    entry: { 'injected': './entrypoint.js', },
    output: {
      path: require('path').resolve(__dirname),
      filename: '[name].js',
      libraryTarget: 'commonjs2',
    },
  };
  ```
---
 docs/src/api/class-browsercontext.md          | 37 +++++++++-
 docs/src/api/class-page.md                    | 37 +++++++++-
 .../src/client/browserContext.ts              |  2 +-
 .../src/client/clientHelper.ts                | 27 +++++--
 packages/playwright-core/src/client/page.ts   |  2 +-
 .../playwright-core/src/client/selectors.ts   |  2 +-
 packages/playwright-core/types/types.d.ts     | 70 ++++++++++++++++++-
 tests/assets/injectedmodule.js                | 33 +++++++++
 tests/page/page-add-init-script.spec.ts       | 12 ++++
 9 files changed, 206 insertions(+), 16 deletions(-)
 create mode 100644 tests/assets/injectedmodule.js

diff --git a/docs/src/api/class-browsercontext.md b/docs/src/api/class-browsercontext.md
index 6d5558ae55..7b6c6aab1d 100644
--- a/docs/src/api/class-browsercontext.md
+++ b/docs/src/api/class-browsercontext.md
@@ -415,13 +415,42 @@ The order of evaluation of multiple scripts installed via [`method: BrowserConte
 [`method: Page.addInitScript`] is not defined.
 :::
 
+**Bundling**
+
+If you have a complex script split into several files, it needs to be bundled into a single file first. We recommend running [`esbuild`](https://esbuild.github.io/) or [`webpack`](https://webpack.js.org/) to produce a commonjs module and pass [`option: path`] and [`option: arg`].
+
+```js browser title="mocks/mockRandom.ts"
+// This script can import other files.
+import { defaultValue } from './defaultValue';
+
+export default function(value?: number) {
+  window.Math.random = () => value ?? defaultValue;
+}
+```
+
+```sh
+# bundle with esbuild
+esbuild mocks/mockRandom.ts --bundle --format=cjs --outfile=mocks/mockRandom.js
+```
+
+```js title="tests/example.spec.ts"
+const mockPath = { path: path.resolve(__dirname, '../mocks/mockRandom.js') };
+
+// Passing 42 as an argument to the default export function.
+await context.addInitScript({ path: mockPath }, 42);
+
+// Make sure to pass undefined even if you do not need to pass an argument.
+// This instructs Playwright to treat the file as a commonjs module.
+await context.addInitScript({ path: mockPath }, undefined);
+```
+
 ### param: BrowserContext.addInitScript.script
 * since: v1.8
 * langs: js
 - `script` <[function]|[string]|[Object]>
   - `path` ?<[path]> Path to the JavaScript file. If `path` is a relative path, then it is resolved relative to the
-    current working directory. Optional.
-  - `content` ?<[string]> Raw script content. Optional.
+    current working directory.
+  - `content` ?<[string]> Raw script content.
 
 Script to be evaluated in all pages in the browser context.
 
@@ -437,7 +466,9 @@ Script to be evaluated in all pages in the browser context.
 * langs: js
 - `arg` ?<[Serializable]>
 
-Optional argument to pass to [`param: script`] (only supported when passing a function).
+Optional JSON-serializable argument to pass to [`param: script`].
+* When `script` is a function, the argument is passed to it directly.
+* When `script` is a file path, the file is assumed to be a commonjs module. The default export, either `module.exports` or `module.exports.default`, should be a function that's going to be executed with this argument.
 
 ### param: BrowserContext.addInitScript.path
 * since: v1.8
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index ee9623c867..11d7cbdd74 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -619,13 +619,42 @@ The order of evaluation of multiple scripts installed via [`method: BrowserConte
 [`method: Page.addInitScript`] is not defined.
 :::
 
+**Bundling**
+
+If you have a complex script split into several files, it needs to be bundled into a single file first. We recommend running [`esbuild`](https://esbuild.github.io/) or [`webpack`](https://webpack.js.org/) to produce a commonjs module and pass [`option: path`] and [`option: arg`].
+
+```js browser title="mocks/mockRandom.ts"
+// This script can import other files.
+import { defaultValue } from './defaultValue';
+
+export default function(value?: number) {
+  window.Math.random = () => value ?? defaultValue;
+}
+```
+
+```sh
+# bundle with esbuild
+esbuild mocks/mockRandom.ts --bundle --format=cjs --outfile=mocks/mockRandom.js
+```
+
+```js title="tests/example.spec.ts"
+const mockPath = { path: path.resolve(__dirname, '../mocks/mockRandom.js') };
+
+// Passing 42 as an argument to the default export function.
+await page.addInitScript({ path: mockPath }, 42);
+
+// Make sure to pass undefined even if you do not need to pass an argument.
+// This instructs Playwright to treat the file as a commonjs module.
+await page.addInitScript({ path: mockPath }, undefined);
+```
+
 ### param: Page.addInitScript.script
 * since: v1.8
 * langs: js
 - `script` <[function]|[string]|[Object]>
   - `path` ?<[path]> Path to the JavaScript file. If `path` is a relative path, then it is resolved relative to the
-    current working directory. Optional.
-  - `content` ?<[string]> Raw script content. Optional.
+    current working directory.
+  - `content` ?<[string]> Raw script content.
 
 Script to be evaluated in the page.
 
@@ -641,7 +670,9 @@ Script to be evaluated in all pages in the browser context.
 * langs: js
 - `arg` ?<[Serializable]>
 
-Optional argument to pass to [`param: script`] (only supported when passing a function).
+Optional JSON-serializable argument to pass to [`param: script`].
+* When `script` is a function, the argument is passed to it directly.
+* When `script` is a file path, the file is assumed to be a commonjs module. The default export, either `module.exports` or `module.exports.default`, should be a function that's going to be executed with this argument.
 
 ### param: Page.addInitScript.path
 * since: v1.8
diff --git a/packages/playwright-core/src/client/browserContext.ts b/packages/playwright-core/src/client/browserContext.ts
index c4f7827840..b0b72917cf 100644
--- a/packages/playwright-core/src/client/browserContext.ts
+++ b/packages/playwright-core/src/client/browserContext.ts
@@ -308,7 +308,7 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
   }
 
   async addInitScript(script: Function | string | { path?: string, content?: string }, arg?: any): Promise<void> {
-    const source = await evaluationScript(script, arg);
+    const source = await evaluationScript(script, arg, arguments.length > 1);
     await this._channel.addInitScript({ source });
   }
 
diff --git a/packages/playwright-core/src/client/clientHelper.ts b/packages/playwright-core/src/client/clientHelper.ts
index 540230a4fc..fcc785b71b 100644
--- a/packages/playwright-core/src/client/clientHelper.ts
+++ b/packages/playwright-core/src/client/clientHelper.ts
@@ -28,20 +28,37 @@ export function envObjectToArray(env: types.Env): { name: string, value: string
   return result;
 }
 
-export async function evaluationScript(fun: Function | string | { path?: string, content?: string }, arg?: any, addSourceUrl: boolean = true): Promise<string> {
+export async function evaluationScript(fun: Function | string | { path?: string, content?: string }, arg: any, hasArg: boolean, addSourceUrl: boolean = true): Promise<string> {
   if (typeof fun === 'function') {
     const source = fun.toString();
     const argString = Object.is(arg, undefined) ? 'undefined' : JSON.stringify(arg);
     return `(${source})(${argString})`;
   }
-  if (arg !== undefined)
-    throw new Error('Cannot evaluate a string with arguments');
-  if (isString(fun))
+  if (isString(fun)) {
+    if (arg !== undefined)
+      throw new Error('Cannot evaluate a string with arguments');
     return fun;
-  if (fun.content !== undefined)
+  }
+  if (fun.content !== undefined) {
+    if (arg !== undefined)
+      throw new Error('Cannot evaluate a string with arguments');
     return fun.content;
+  }
   if (fun.path !== undefined) {
     let source = await fs.promises.readFile(fun.path, 'utf8');
+    if (hasArg) {
+      // Assume a CJS module that has a function default export.
+      source = `(() => {
+        var exports = {}; var module = { exports };
+        ${source}
+        let __pw_result__ = module.exports;
+        if (__pw_result__ && typeof __pw_result__ === 'object' && ('default' in __pw_result__))
+          __pw_result__ = __pw_result__['default'];
+        if (typeof __pw_result__ !== 'function')
+          return __pw_result__;
+        return __pw_result__(${JSON.stringify(arg)});
+      })()`;
+    }
     if (addSourceUrl)
       source = addSourceUrlToScript(source, fun.path);
     return source;
diff --git a/packages/playwright-core/src/client/page.ts b/packages/playwright-core/src/client/page.ts
index a10286fa9a..5ff6d6178d 100644
--- a/packages/playwright-core/src/client/page.ts
+++ b/packages/playwright-core/src/client/page.ts
@@ -492,7 +492,7 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
   }
 
   async addInitScript(script: Function | string | { path?: string, content?: string }, arg?: any) {
-    const source = await evaluationScript(script, arg);
+    const source = await evaluationScript(script, arg, arguments.length > 1);
     await this._channel.addInitScript({ source });
   }
 
diff --git a/packages/playwright-core/src/client/selectors.ts b/packages/playwright-core/src/client/selectors.ts
index 2739be0e8d..c7a7967559 100644
--- a/packages/playwright-core/src/client/selectors.ts
+++ b/packages/playwright-core/src/client/selectors.ts
@@ -26,7 +26,7 @@ export class Selectors implements api.Selectors {
   private _registrations: channels.SelectorsRegisterParams[] = [];
 
   async register(name: string, script: string | (() => SelectorEngine) | { path?: string, content?: string }, options: { contentScript?: boolean } = {}): Promise<void> {
-    const source = await evaluationScript(script, undefined, false);
+    const source = await evaluationScript(script, undefined, false, false);
     const params = { ...options, name, source };
     for (const channel of this._channels)
       await channel._channel.register(params);
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index a4bf9fa812..0d018dcfd3 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -288,8 +288,41 @@ export interface Page {
    * [browserContext.addInitScript(script[, arg])](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-init-script)
    * and [page.addInitScript(script[, arg])](https://playwright.dev/docs/api/class-page#page-add-init-script) is not
    * defined.
+   *
+   * **Bundling**
+   *
+   * If you have a complex script split into several files, it needs to be bundled into a single file first. We
+   * recommend running [`esbuild`](https://esbuild.github.io/) or [`webpack`](https://webpack.js.org/) to produce a
+   * commonjs module and pass `path` and `arg`.
+   *
+   * ```js
+   * // mocks/mockRandom.ts
+   * // This script can import other files.
+   * import { defaultValue } from './defaultValue';
+   *
+   * export default function(value?: number) {
+   *   window.Math.random = () => value ?? defaultValue;
+   * }
+   * ```
+   *
+   * ```js
+   * // tests/example.spec.ts
+   * const mockPath = { path: path.resolve(__dirname, '../mocks/mockRandom.js') };
+   *
+   * // Passing 42 as an argument to the default export function.
+   * await page.addInitScript({ path: mockPath }, 42);
+   *
+   * // Make sure to pass undefined even if you do not need to pass an argument.
+   * // This instructs Playwright to treat the file as a commonjs module.
+   * await page.addInitScript({ path: mockPath }, undefined);
+   * ```
+   *
    * @param script Script to be evaluated in the page.
-   * @param arg Optional argument to pass to `script` (only supported when passing a function).
+   * @param arg Optional JSON-serializable argument to pass to `script`.
+   * - When `script` is a function, the argument is passed to it directly.
+   * - When `script` is a file path, the file is assumed to be a commonjs module. The default export, either
+   * `module.exports` or `module.exports.default`, should be a function that's going to be executed with this
+   * argument.
    */
   addInitScript<Arg>(script: PageFunction<Arg, any> | { path?: string, content?: string }, arg?: Arg): Promise<void>;
 
@@ -7666,8 +7699,41 @@ export interface BrowserContext {
    * [browserContext.addInitScript(script[, arg])](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-init-script)
    * and [page.addInitScript(script[, arg])](https://playwright.dev/docs/api/class-page#page-add-init-script) is not
    * defined.
+   *
+   * **Bundling**
+   *
+   * If you have a complex script split into several files, it needs to be bundled into a single file first. We
+   * recommend running [`esbuild`](https://esbuild.github.io/) or [`webpack`](https://webpack.js.org/) to produce a
+   * commonjs module and pass `path` and `arg`.
+   *
+   * ```js
+   * // mocks/mockRandom.ts
+   * // This script can import other files.
+   * import { defaultValue } from './defaultValue';
+   *
+   * export default function(value?: number) {
+   *   window.Math.random = () => value ?? defaultValue;
+   * }
+   * ```
+   *
+   * ```js
+   * // tests/example.spec.ts
+   * const mockPath = { path: path.resolve(__dirname, '../mocks/mockRandom.js') };
+   *
+   * // Passing 42 as an argument to the default export function.
+   * await context.addInitScript({ path: mockPath }, 42);
+   *
+   * // Make sure to pass undefined even if you do not need to pass an argument.
+   * // This instructs Playwright to treat the file as a commonjs module.
+   * await context.addInitScript({ path: mockPath }, undefined);
+   * ```
+   *
    * @param script Script to be evaluated in all pages in the browser context.
-   * @param arg Optional argument to pass to `script` (only supported when passing a function).
+   * @param arg Optional JSON-serializable argument to pass to `script`.
+   * - When `script` is a function, the argument is passed to it directly.
+   * - When `script` is a file path, the file is assumed to be a commonjs module. The default export, either
+   * `module.exports` or `module.exports.default`, should be a function that's going to be executed with this
+   * argument.
    */
   addInitScript<Arg>(script: PageFunction<Arg, any> | { path?: string, content?: string }, arg?: Arg): Promise<void>;
 
diff --git a/tests/assets/injectedmodule.js b/tests/assets/injectedmodule.js
new file mode 100644
index 0000000000..bc099f243f
--- /dev/null
+++ b/tests/assets/injectedmodule.js
@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// one.ts
+var one_exports = {};
+__export(one_exports, {
+  default: () => one_default
+});
+module.exports = __toCommonJS(one_exports);
+
+// two.ts
+var value = 42;
+
+// one.ts
+function one_default(arg) {
+  window.injected = arg ?? value;
+}
diff --git a/tests/page/page-add-init-script.spec.ts b/tests/page/page-add-init-script.spec.ts
index b2b7782eba..2b12f00251 100644
--- a/tests/page/page-add-init-script.spec.ts
+++ b/tests/page/page-add-init-script.spec.ts
@@ -31,6 +31,18 @@ it('should work with a path', async ({ page, server, asset }) => {
   expect(await page.evaluate(() => window['result'])).toBe(123);
 });
 
+it('should assume CJS module with a path and arg', async ({ page, server, asset }) => {
+  await page.addInitScript({ path: asset('injectedmodule.js') }, 17);
+  await page.goto(server.EMPTY_PAGE);
+  expect(await page.evaluate(() => window['injected'])).toBe(17);
+});
+
+it('should assume CJS module with a path and undefined arg', async ({ page, server, asset }) => {
+  await page.addInitScript({ path: asset('injectedmodule.js') }, undefined);
+  await page.goto(server.EMPTY_PAGE);
+  expect(await page.evaluate(() => window['injected'])).toBe(42);
+});
+
 it('should work with content @smoke', async ({ page, server }) => {
   await page.addInitScript({ content: 'window["injected"] = 123' });
   await page.goto(server.PREFIX + '/tamperable.html');

From 571f25a7d36f09a5d3c3ddf061d950d18f74c802 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 21 Aug 2024 11:14:41 -0700
Subject: [PATCH 22/25] fix(role): hidden pseudos should not contribute to
 accessible name (#32251)

---
 .../src/server/injected/roleUtils.ts          |  3 ++-
 tests/library/role-utils.spec.ts              | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/server/injected/roleUtils.ts b/packages/playwright-core/src/server/injected/roleUtils.ts
index 99f3cafa29..498fc189aa 100644
--- a/packages/playwright-core/src/server/injected/roleUtils.ts
+++ b/packages/playwright-core/src/server/injected/roleUtils.ts
@@ -375,7 +375,8 @@ function getPseudoContent(element: Element, pseudo: '::before' | '::after') {
 }
 
 function getPseudoContentImpl(pseudoStyle: CSSStyleDeclaration | undefined) {
-  if (!pseudoStyle)
+  // Note: all browsers ignore display:none and visibility:hidden pseudos.
+  if (!pseudoStyle || pseudoStyle.display === 'none' || pseudoStyle.visibility === 'hidden')
     return '';
   const content = pseudoStyle.content;
   if ((content[0] === '\'' && content[content.length - 1] === '\'') ||
diff --git a/tests/library/role-utils.spec.ts b/tests/library/role-utils.spec.ts
index 067053ba11..6c45686f68 100644
--- a/tests/library/role-utils.spec.ts
+++ b/tests/library/role-utils.spec.ts
@@ -475,6 +475,26 @@ test('should ignore stylesheet from hidden aria-labelledby subtree', async ({ pa
   expect.soft(await getNameAndRole(page, 'input')).toEqual({ role: 'textbox', name: 'hello' });
 });
 
+test('should not include hidden pseudo into accessible name', async ({ page }) => {
+  await page.setContent(`
+    <style>
+      span:before {
+        content: 'world';
+        display: none;
+      }
+      div:after {
+        content: 'bye';
+        visibility: hidden;
+      }
+    </style>
+    <a href="http://example.com">
+      <span>hello</span>
+      <div>hello</div>
+    </a>
+  `);
+  expect.soft(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello hello' });
+});
+
 function toArray(x: any): any[] {
   return Array.isArray(x) ? x : [x];
 }

From e3480d1886a9cc219027499e65c04e52c2530dad Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Thu, 22 Aug 2024 08:42:09 +0200
Subject: [PATCH 23/25] test: add test for TLS renegotiation and
 client-certificates (#32252)

---
 tests/library/client-certificates.spec.ts | 134 ++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/tests/library/client-certificates.spec.ts b/tests/library/client-certificates.spec.ts
index 49e0dc0dcc..a6f6628569 100644
--- a/tests/library/client-certificates.spec.ts
+++ b/tests/library/client-certificates.spec.ts
@@ -16,6 +16,8 @@
 
 import fs from 'fs';
 import tls from 'tls';
+import type https from 'https';
+import zlib from 'zlib';
 import type http2 from 'http2';
 import type http from 'http';
 import { expect, playwrightTest as base } from '../config/browserTest';
@@ -375,6 +377,138 @@ test.describe('browser', () => {
     await page.close();
   });
 
+  test('should handle TLS renegotiation with client certificates', async ({ browser, asset, browserName, platform }) => {
+    const server: https.Server = createHttpsServer({
+      key: fs.readFileSync(asset('client-certificates/server/server_key.pem')),
+      cert: fs.readFileSync(asset('client-certificates/server/server_cert.pem')),
+      ca: [fs.readFileSync(asset('client-certificates/server/server_cert.pem'))],
+      requestCert: false, // Initially don't request client cert
+      rejectUnauthorized: false,
+      // TLSv1.3 does not support renegotiation
+      minVersion: 'TLSv1.2',
+      maxVersion: 'TLSv1.2',
+    });
+
+    server.on('request', async (req, res) => {
+      if (!req.socket)
+        return;
+      const renegotiate = () => new Promise<void>((resolve, reject) => {
+        (req.socket as tls.TLSSocket).renegotiate({
+          requestCert: true,
+          rejectUnauthorized: false
+        }, err => {
+          if (err)
+            reject(err);
+          else
+            resolve();
+        });
+      });
+      if (req.url === '/') {
+        res.writeHead(200, { 'Content-Type': 'text/html', 'connection': 'close' });
+        res.end();
+      } else if (req.url === '/from-fetch-api') {
+        res.writeHead(200, {
+          'Content-Type': 'text/plain',
+          'Transfer-Encoding': 'chunked'
+        });
+        res.flushHeaders();
+
+        await new Promise<void>(resolve => req.once('data', data => {
+          res.write(`server received: ${data.toString()}\n`);
+          resolve();
+        }));
+
+        await renegotiate();
+        for (let i = 0; i < 4; i++) {
+          res.write(`${i}-from-server\n`);
+          // Best-effort to trigger a new chunk
+          await new Promise<void>(resolve => setTimeout(resolve, 100));
+        }
+        res.end('server closed the connection');
+      } else if (req.url === '/style.css') {
+        res.writeHead(200, {
+          'Content-Type': 'text/css',
+          'Content-Encoding': 'gzip',
+          'Transfer-Encoding': 'chunked'
+        });
+
+        await renegotiate();
+
+        const stylesheet = `
+          button {
+            background-color: red;
+          }  
+        `;
+
+        const stylesheetBuffer = await new Promise<Buffer>((resolve, reject) => {
+          zlib.gzip(stylesheet, (err, buffer) => {
+            if (err)
+              reject(err);
+            else
+              resolve(buffer);
+          });
+        });
+        for (let i = 0; i < stylesheetBuffer.length; i += 100) {
+          res.write(stylesheetBuffer.slice(i, i + 100));
+          // Best-effort to trigger a new chunk
+          await new Promise<void>(resolve => setTimeout(resolve, 20));
+        }
+        res.end();
+      } else {
+        res.writeHead(404);
+        res.end();
+      }
+    });
+
+    await new Promise<void>(resolve => server.listen(0, 'localhost', resolve));
+    const port = (server.address() as import('net').AddressInfo).port;
+    const origin = 'https://' + (browserName === 'webkit' && platform === 'darwin' ? 'local.playwright' : 'localhost');
+    const serverUrl = `${origin}:${port}`;
+
+    const context = await browser.newContext({
+      ignoreHTTPSErrors: true,
+      clientCertificates: [{
+        origin,
+        certPath: asset('client-certificates/client/trusted/cert.pem'),
+        keyPath: asset('client-certificates/client/trusted/key.pem'),
+      }],
+    });
+
+    const page = await context.newPage();
+
+    await test.step('fetch API', async () => {
+      await page.goto(serverUrl);
+      const response = await page.evaluate(async () => {
+        const response = await fetch('/from-fetch-api', {
+          method: 'POST',
+          body: 'client-request-payload'
+        });
+        return await response.text();
+      });
+      expect(response).toBe([
+        'server received: client-request-payload',
+        '0-from-server',
+        '1-from-server',
+        '2-from-server',
+        '3-from-server',
+        'server closed the connection'
+      ].join('\n'));
+    });
+
+    await test.step('Gzip encoded CSS Stylesheet', async () => {
+      await page.goto(serverUrl);
+      // The <link> would throw with net::ERR_INVALID_CHUNKED_ENCODING
+      await page.setContent(`
+        <button>Click me</button>
+        <link rel="stylesheet" href="/style.css">
+      `);
+      await expect(page.locator('button')).toHaveCSS('background-color', /* red */'rgb(255, 0, 0)');
+    });
+
+    await context.close();
+    await new Promise<void>(resolve => server.close(() => resolve()));
+  });
+
   test('should pass with matching certificates in pfx format when passing as content', async ({ browser, startCCServer, asset, browserName }) => {
     const serverURL = await startCCServer({ useFakeLocalhost: browserName === 'webkit' && process.platform === 'darwin' });
     const page = await browser.newPage({

From 666a8f22cf175686651e3cfe7bb77184e2497616 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Thu, 22 Aug 2024 10:15:47 +0200
Subject: [PATCH 24/25] chore: fix api.json serializer for language ports
 (#32260)

Fixes https://github.com/microsoft/playwright/issues/32241
---
 utils/doclint/generateApiJson.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/doclint/generateApiJson.js b/utils/doclint/generateApiJson.js
index c0b533d97b..bb639abbaf 100644
--- a/utils/doclint/generateApiJson.js
+++ b/utils/doclint/generateApiJson.js
@@ -77,7 +77,7 @@ function serializeMember(member) {
 }
 
 function serializeProperty(arg) {
-  const result = { ...arg };
+  const result = { ...arg, parent: undefined };
   sanitize(result);
   if (arg.type)
     result.type = serializeType(arg.type, arg.name === 'options');

From f74c6d77dbe66e0d82634c3869f189d52c667df6 Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Thu, 22 Aug 2024 03:07:44 -0700
Subject: [PATCH 25/25] chore(driver): roll driver to recent Node.js LTS
 version (#32264)

---
 utils/build/build-playwright-driver.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/build/build-playwright-driver.sh b/utils/build/build-playwright-driver.sh
index 0ee23c15d9..09c3fc75ae 100755
--- a/utils/build/build-playwright-driver.sh
+++ b/utils/build/build-playwright-driver.sh
@@ -4,7 +4,7 @@ set -x
 
 trap "cd $(pwd -P)" EXIT
 SCRIPT_PATH="$(cd "$(dirname "$0")" ; pwd -P)"
-NODE_VERSION="20.16.0" # autogenerated via ./update-playwright-driver-version.mjs
+NODE_VERSION="20.17.0" # autogenerated via ./update-playwright-driver-version.mjs
 
 cd "$(dirname "$0")"
 PACKAGE_VERSION=$(node -p "require('../../package.json').version")