From b0473b71cd8ba183baa81547cb45013194251d13 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Wed, 2 Aug 2023 11:23:47 +0200
Subject: [PATCH] chore: limit docs snippet length to 100 (#24563)

---
 docs/src/accessibility-testing-js.md          | 12 +++-
 docs/src/api-testing-js.md                    | 32 ++++++++--
 docs/src/api/class-android.md                 |  8 ++-
 docs/src/api/class-browsercontext.md          |  4 +-
 docs/src/api/class-elementhandle.md           |  4 +-
 docs/src/api/class-frame.md                   |  8 ++-
 docs/src/api/class-page.md                    | 16 +++--
 docs/src/chrome-extensions-js-python.md       |  4 +-
 docs/src/other-locators.md                    |  4 +-
 docs/src/pom.md                               | 18 +++++-
 ...-workers-experimental-network-events-js.md |  4 +-
 docs/src/test-annotations-js.md               |  5 +-
 docs/src/test-api/class-test.md               |  5 +-
 docs/src/test-assertions-js.md                |  6 +-
 docs/src/test-configuration-js.md             |  3 +-
 docs/src/test-reporter-api/class-reporter.md  |  4 +-
 docs/src/test-reporters-js.md                 |  4 +-
 docs/src/test-use-options-js.md               |  6 +-
 docs/src/webview2.md                          | 13 +++-
 packages/playwright-core/types/types.d.ts     | 64 ++++++++++++++-----
 packages/playwright-test/types/test.d.ts      |  5 +-
 .../playwright-test/types/testReporter.d.ts   |  4 +-
 utils/doclint/linting-code-snippets/cli.js    |  1 +
 23 files changed, 177 insertions(+), 57 deletions(-)

diff --git a/docs/src/accessibility-testing-js.md b/docs/src/accessibility-testing-js.md
index 10e8fe30a3..f31cf79af8 100644
--- a/docs/src/accessibility-testing-js.md
+++ b/docs/src/accessibility-testing-js.md
@@ -71,7 +71,9 @@ For example, you can use [`AxeBuilder.include()`](https://github.com/dequelabs/a
 `AxeBuilder.analyze()` will scan the page *in its current state* when you call it. To scan parts of a page that are revealed based on UI interactions, use [Locators](./locators.md) to interact with the page before invoking `analyze()`:
 
 ```js
-test('navigation menu flyout should not have automatically detectable accessibility violations', async ({ page }) => {
+test('navigation menu should not have automatically detectable accessibility violations', async ({
+  page,
+}) => {
   await page.goto('https://your-site.com/');
 
   await page.getByRole('button', { name: 'Navigation Menu' }).click();
@@ -126,7 +128,9 @@ This is usually the simplest option, but it has some important downsides:
 Here is an example of excluding one element from being scanned in one specific test:
 
 ```js
-test('should not have any accessibility violations outside of elements with known issues', async ({ page }) => {
+test('should not have any accessibility violations outside of elements with known issues', async ({
+  page,
+}) => {
   await page.goto('https://your-site.com/page-with-known-issues');
 
   const accessibilityScanResults = await new AxeBuilder({ page })
@@ -146,7 +150,9 @@ If your application contains many different pre-existing violations of a specifi
 You can find the rule IDs to pass to `disableRules()` in the `id` property of the violations you want to suppress. A [complete list of axe's rules](https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md) can be found in `axe-core`'s documentation.
 
 ```js
-test('should not have any accessibility violations outside of rules with known issues', async ({ page }) => {
+test('should not have any accessibility violations outside of rules with known issues', async ({
+  page,
+}) => {
   await page.goto('https://your-site.com/page-with-known-issues');
 
   const accessibilityScanResults = await new AxeBuilder({ page })
diff --git a/docs/src/api-testing-js.md b/docs/src/api-testing-js.md
index 7c7fe1d94f..c8f56c24fa 100644
--- a/docs/src/api-testing-js.md
+++ b/docs/src/api-testing-js.md
@@ -242,7 +242,9 @@ test('last created issue should be on the server', async ({ page }) => {
   await page.getByText('Submit new issue').click();
   const issueId = page.url().substr(page.url().lastIndexOf('/'));
 
-  const newIssue = await apiContext.get(`https://api.github.com/repos/${USER}/${REPO}/issues/${issueId}`);
+  const newIssue = await apiContext.get(
+      `https://api.github.com/repos/${USER}/${REPO}/issues/${issueId}`
+  );
   expect(newIssue.ok()).toBeTruthy();
   expect(newIssue.json()).toEqual(expect.objectContaining({
     title: 'Bug report 1'
@@ -288,19 +290,26 @@ The main difference is that [APIRequestContext] accessible via [`property: Brows
 automatically update browser cookies if [APIResponse] has `Set-Cookie` header:
 
 ```js
-test('context request will share cookie storage with its browser context', async ({ page, context }) => {
+test('context request will share cookie storage with its browser context', async ({
+  page,
+  context,
+}) => {
   await context.route('https://www.github.com/', async route => {
     // Send an API request that shares cookie storage with the browser context.
     const response = await context.request.fetch(route.request());
     const responseHeaders = response.headers();
 
     // The response will have 'Set-Cookie' header.
-    const responseCookies = new Map(responseHeaders['set-cookie'].split('\n').map(c => c.split(';', 2)[0].split('=')));
+    const responseCookies = new Map(responseHeaders['set-cookie']
+        .split('\n')
+        .map(c => c.split(';', 2)[0].split('=')));
     // The response will have 3 cookies in 'Set-Cookie' header.
     expect(responseCookies.size).toBe(3);
     const contextCookies = await context.cookies();
     // The browser context will already contain all the cookies from the API response.
-    expect(new Map(contextCookies.map(({ name, value }) => [name, value]))).toEqual(responseCookies);
+    expect(new Map(contextCookies.map(({ name, value }) =>
+      [name, value])
+    )).toEqual(responseCookies);
 
     route.fulfill({
       response,
@@ -315,14 +324,21 @@ If you don't want [APIRequestContext] to use and update cookies from the browser
 create a new instance of [APIRequestContext] which will have its own isolated cookies:
 
 ```js
-test('global context request has isolated cookie storage', async ({ page, context, browser, playwright }) => {
+test('global context request has isolated cookie storage', async ({
+  page,
+  context,
+  browser,
+  playwright
+}) => {
   // Create a new instance of APIRequestContext with isolated cookie storage.
   const request = await playwright.request.newContext();
   await context.route('https://www.github.com/', async route => {
     const response = await request.fetch(route.request());
     const responseHeaders = response.headers();
 
-    const responseCookies = new Map(responseHeaders['set-cookie'].split('\n').map(c => c.split(';', 2)[0].split('=')));
+    const responseCookies = new Map(responseHeaders['set-cookie']
+        .split('\n')
+        .map(c => c.split(';', 2)[0].split('=')));
     // The response will have 3 cookies in 'Set-Cookie' header.
     expect(responseCookies.size).toBe(3);
     const contextCookies = await context.cookies();
@@ -335,7 +351,9 @@ test('global context request has isolated cookie storage', async ({ page, contex
     const browserContext2 = await browser.newContext({ storageState });
     const contextCookies2 = await browserContext2.cookies();
     // The new browser context will already contain all the cookies from the API response.
-    expect(new Map(contextCookies2.map(({ name, value }) => [name, value]))).toEqual(responseCookies);
+    expect(
+        new Map(contextCookies2.map(({ name, value }) => [name, value]))
+    ).toEqual(responseCookies);
 
     route.fulfill({
       response,
diff --git a/docs/src/api/class-android.md b/docs/src/api/class-android.md
index 67b96c331a..6f6d4c7ed1 100644
--- a/docs/src/api/class-android.md
+++ b/docs/src/api/class-android.md
@@ -40,8 +40,12 @@ const { _android: android } = require('playwright');
     const webview = await device.webView({ pkg: 'org.chromium.webview_shell' });
 
     // Fill the input box.
-    await device.fill({ res: 'org.chromium.webview_shell:id/url_field' }, 'github.com/microsoft/playwright');
-    await device.press({ res: 'org.chromium.webview_shell:id/url_field' }, 'Enter');
+    await device.fill({
+      res: 'org.chromium.webview_shell:id/url_field',
+    }, 'github.com/microsoft/playwright');
+    await device.press({
+      res: 'org.chromium.webview_shell:id/url_field',
+    }, 'Enter');
 
     // Work with WebView's page as usual.
     const page = await webview.page();
diff --git a/docs/src/api/class-browsercontext.md b/docs/src/api/class-browsercontext.md
index 307407f4ca..322c3a5072 100644
--- a/docs/src/api/class-browsercontext.md
+++ b/docs/src/api/class-browsercontext.md
@@ -768,7 +768,9 @@ const crypto = require('crypto');
 (async () => {
   const browser = await webkit.launch({ headless: false });
   const context = await browser.newContext();
-  await context.exposeFunction('sha256', text => crypto.createHash('sha256').update(text).digest('hex'));
+  await context.exposeFunction('sha256', text =>
+    crypto.createHash('sha256').update(text).digest('hex'),
+  );
   const page = await context.newPage();
   await page.setContent(`
     <script>
diff --git a/docs/src/api/class-elementhandle.md b/docs/src/api/class-elementhandle.md
index 03c3b70181..4e2192bc7c 100644
--- a/docs/src/api/class-elementhandle.md
+++ b/docs/src/api/class-elementhandle.md
@@ -466,7 +466,9 @@ value.
 
 ```js
 const feedHandle = await page.$('.feed');
-expect(await feedHandle.$$eval('.tweet', nodes => nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!']);
+expect(await feedHandle.$$eval('.tweet', nodes =>
+  nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!'],
+);
 ```
 
 ```java
diff --git a/docs/src/api/class-frame.md b/docs/src/api/class-frame.md
index 6cd0c5132b..77abb712c2 100644
--- a/docs/src/api/class-frame.md
+++ b/docs/src/api/class-frame.md
@@ -677,7 +677,9 @@ Console.WriteLine(await frame.EvaluateAsync<int>("1 + 2")); // prints "3"
 
 ```js
 const bodyHandle = await frame.evaluate('document.body');
-const html = await frame.evaluate(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+const html = await frame.evaluate(([body, suffix]) =>
+  body.innerHTML + suffix, [bodyHandle, 'hello'],
+);
 await bodyHandle.dispose();
 ```
 
@@ -782,7 +784,9 @@ var docHandle = await frame.EvaluateHandleAsync("document"); // Handle for the `
 
 ```js
 const aHandle = await frame.evaluateHandle(() => document.body);
-const resultHandle = await frame.evaluateHandle(([body, suffix]) => body.innerHTML + suffix, [aHandle, 'hello']);
+const resultHandle = await frame.evaluateHandle(([body, suffix]) =>
+  body.innerHTML + suffix, [aHandle, 'hello'],
+);
 console.log(await resultHandle.jsonValue());
 await resultHandle.dispose();
 ```
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index afac224905..df9f15459c 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -1508,7 +1508,9 @@ Console.WriteLine(await page.EvaluateAsync<int>("1 + 2")); // prints "3"
 
 ```js
 const bodyHandle = await page.evaluate('document.body');
-const html = await page.evaluate<string, HTMLElement>(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
+  body.innerHTML + suffix, [bodyHandle, 'hello']
+);
 await bodyHandle.dispose();
 ```
 
@@ -1920,7 +1922,9 @@ const crypto = require('crypto');
 (async () => {
   const browser = await webkit.launch({ headless: false });
   const page = await browser.newPage();
-  await page.exposeFunction('sha256', text => crypto.createHash('sha256').update(text).digest('hex'));
+  await page.exposeFunction('sha256', text =>
+    crypto.createHash('sha256').update(text).digest('hex'),
+  );
   await page.setContent(`
     <script>
       async function onClick() {
@@ -4440,7 +4444,9 @@ await page.getByText('trigger request').click();
 const request = await requestPromise;
 
 // Alternative way with a predicate. Note no await.
-const requestPromise = page.waitForRequest(request => request.url() === 'https://example.com' && request.method() === 'GET');
+const requestPromise = page.waitForRequest(request =>
+  request.url() === 'https://example.com' && request.method() === 'GET',
+);
 await page.getByText('trigger request').click();
 const request = await requestPromise;
 ```
@@ -4577,7 +4583,9 @@ await page.getByText('trigger response').click();
 const response = await responsePromise;
 
 // Alternative way with a predicate. Note no await.
-const responsePromise = page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200);
+const responsePromise = page.waitForResponse(response =>
+  response.url() === 'https://example.com' && response.status() === 200
+);
 await page.getByText('trigger response').click();
 const response = await responsePromise;
 ```
diff --git a/docs/src/chrome-extensions-js-python.md b/docs/src/chrome-extensions-js-python.md
index 52fcb95682..30cfc88a68 100644
--- a/docs/src/chrome-extensions-js-python.md
+++ b/docs/src/chrome-extensions-js-python.md
@@ -221,7 +221,9 @@ const pathToExtension = path.join(__dirname, 'my-extension');
 const context = await chromium.launchPersistentContext('', {
   headless: false,
   args: [
-    `--headless=new`, // the new headless arg for chrome v109+. Use '--headless=chrome' as arg for browsers v94-108.
+    // the new headless arg for chrome v109+. Use '--headless=chrome'
+    // as arg for browsers v94-108.
+    `--headless=new`,
     `--disable-extensions-except=${pathToExtension}`,
     `--load-extension=${pathToExtension}`,
   ],
diff --git a/docs/src/other-locators.md b/docs/src/other-locators.md
index f50b986228..a45bb3b882 100644
--- a/docs/src/other-locators.md
+++ b/docs/src/other-locators.md
@@ -632,7 +632,9 @@ elements that can be selected by one of the selectors in that list.
 
 ```js
 // Waits for either confirmation dialog or load spinner.
-await page.locator(`//span[contains(@class, 'spinner__loading')]|//div[@id='confirmation']`).waitFor();
+await page.locator(
+    `//span[contains(@class, 'spinner__loading')]|//div[@id='confirmation']`
+).waitFor();
 ```
 
 ```java
diff --git a/docs/src/pom.md b/docs/src/pom.md
index 341f26fdf7..15a647cc67 100644
--- a/docs/src/pom.md
+++ b/docs/src/pom.md
@@ -25,7 +25,11 @@ exports.PlaywrightDevPage = class PlaywrightDevPage {
     this.page = page;
     this.getStartedLink = page.locator('a', { hasText: 'Get started' });
     this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });
-    this.pomLink = page.locator('li', { hasText: 'Guides' }).locator('a', { hasText: 'Page Object Model' });
+    this.pomLink = page.locator('li', {
+      hasText: 'Guides',
+    }).locator('a', {
+      hasText: 'Page Object Model',
+    });
     this.tocList = page.locator('article div.markdown ul > li > a');
   }
 
@@ -59,7 +63,11 @@ export class PlaywrightDevPage {
     this.page = page;
     this.getStartedLink = page.locator('a', { hasText: 'Get started' });
     this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });
-    this.pomLink = page.locator('li', { hasText: 'Guides' }).locator('a', { hasText: 'Page Object Model' });
+    this.pomLink = page.locator('li', {
+      hasText: 'Guides',
+    }).locator('a', {
+      hasText: 'Page Object Model',
+    });
     this.tocList = page.locator('article div.markdown ul > li > a');
   }
 
@@ -88,7 +96,11 @@ class PlaywrightDevPage {
     this.page = page;
     this.getStartedLink = page.locator('a', { hasText: 'Get started' });
     this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });
-    this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
+    this.pomLink = page.locator('li', {
+      hasText: 'Playwright Test',
+    }).locator('a', {
+      hasText: 'Page Object Model',
+    });
     this.tocList = page.locator('article div.markdown ul > li > a');
   }
   async getStarted() {
diff --git a/docs/src/service-workers-experimental-network-events-js.md b/docs/src/service-workers-experimental-network-events-js.md
index 83c164c035..049c64640a 100644
--- a/docs/src/service-workers-experimental-network-events-js.md
+++ b/docs/src/service-workers-experimental-network-events-js.md
@@ -42,7 +42,9 @@ await page.evaluate(async () => {
   const registration = await window.navigator.serviceWorker.getRegistration();
   if (registration.active?.state === 'activated')
     return;
-  await new Promise(res => window.navigator.serviceWorker.addEventListener('controllerchange', res));
+  await new Promise(res =>
+    window.navigator.serviceWorker.addEventListener('controllerchange', res),
+  );
 });
 ```
 
diff --git a/docs/src/test-annotations-js.md b/docs/src/test-annotations-js.md
index 9272b97215..a11cd60fa5 100644
--- a/docs/src/test-annotations-js.md
+++ b/docs/src/test-annotations-js.md
@@ -162,7 +162,10 @@ It's also possible to add custom metadata in the form of annotations to your tes
 ```js title="example.spec.ts"
 
 test('user profile', async ({ page }) => {
-  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/<some-issue>' });
+  test.info().annotations.push({
+    type: 'issue',
+    description: 'https://github.com/microsoft/playwright/issues/<some-issue>',
+  });
   // ...
 });
 ```
diff --git a/docs/src/test-api/class-test.md b/docs/src/test-api/class-test.md
index c2330f77f2..82afec4a40 100644
--- a/docs/src/test-api/class-test.md
+++ b/docs/src/test-api/class-test.md
@@ -889,7 +889,10 @@ Returns information about the currently running test. This method can only be ca
 ```js
 test('example test', async ({ page }) => {
   // ...
-  await test.info().attach('screenshot', { body: await page.screenshot(), contentType: 'image/png' });
+  await test.info().attach('screenshot', {
+    body: await page.screenshot(),
+    contentType: 'image/png',
+  });
 });
 ```
 
diff --git a/docs/src/test-assertions-js.md b/docs/src/test-assertions-js.md
index 3e83e08d12..583d5ff1eb 100644
--- a/docs/src/test-assertions-js.md
+++ b/docs/src/test-assertions-js.md
@@ -203,7 +203,8 @@ await expect.poll(async () => {
   const response = await page.request.get('https://api.example.com');
   return response.status();
 }, {
-  // Probe, wait 1s, probe, wait 2s, probe, wait 10s, probe, wait 10s, probe, .... Defaults to [100, 250, 500, 1000].
+  // Probe, wait 1s, probe, wait 2s, probe, wait 10s, probe, wait 10s, probe
+  // ... Defaults to [100, 250, 500, 1000].
   intervals: [1_000, 2_000, 10_000],
   timeout: 60_000
 }).toBe(200);
@@ -227,7 +228,8 @@ await expect(async () => {
   const response = await page.request.get('https://api.example.com');
   expect(response.status()).toBe(200);
 }).toPass({
-  // Probe, wait 1s, probe, wait 2s, probe, wait 10s, probe, wait 10s, probe, .... Defaults to [100, 250, 500, 1000].
+  // Probe, wait 1s, probe, wait 2s, probe, wait 10s, probe, wait 10s, probe
+  // ... Defaults to [100, 250, 500, 1000].
   intervals: [1_000, 2_000, 10_000],
   timeout: 60_000
 });
diff --git a/docs/src/test-configuration-js.md b/docs/src/test-configuration-js.md
index 50a47245c7..995decb80e 100644
--- a/docs/src/test-configuration-js.md
+++ b/docs/src/test-configuration-js.md
@@ -133,7 +133,8 @@ export default defineConfig({
     },
 
     toMatchSnapshot: {
-      // An acceptable ratio of pixels that are different to the total amount of pixels, between 0 and 1.
+      // An acceptable ratio of pixels that are different to the
+      // total amount of pixels, between 0 and 1.
       maxDiffPixelRatio: 0.1,
     },
   },
diff --git a/docs/src/test-reporter-api/class-reporter.md b/docs/src/test-reporter-api/class-reporter.md
index 6b782e175a..fa713cbec0 100644
--- a/docs/src/test-reporter-api/class-reporter.md
+++ b/docs/src/test-reporter-api/class-reporter.md
@@ -36,7 +36,9 @@ module.exports = MyReporter;
 ```
 
 ```js tab=js-ts title="my-awesome-reporter.ts"
-import type { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@playwright/test/reporter';
+import type {
+  Reporter, FullConfig, Suite, TestCase, TestResult, FullResult
+} from '@playwright/test/reporter';
 
 class MyReporter implements Reporter {
   constructor(options: { customOption?: string } = {}) {
diff --git a/docs/src/test-reporters-js.md b/docs/src/test-reporters-js.md
index c39be9232c..d3bf180685 100644
--- a/docs/src/test-reporters-js.md
+++ b/docs/src/test-reporters-js.md
@@ -289,7 +289,9 @@ export default defineConfig({
 You can create a custom reporter by implementing a class with some of the reporter methods. Learn more about the [Reporter] API.
 
 ```js title="my-awesome-reporter.ts"
-import type { FullConfig, FullResult, Reporter, Suite, TestCase, TestResult } from '@playwright/test/reporter';
+import type {
+  FullConfig, FullResult, Reporter, Suite, TestCase, TestResult
+} from '@playwright/test/reporter';
 
 class MyReporter implements Reporter {
   onBegin(config: FullConfig, suite: Suite) {
diff --git a/docs/src/test-use-options-js.md b/docs/src/test-use-options-js.md
index 9912b35dc9..0202ba776d 100644
--- a/docs/src/test-use-options-js.md
+++ b/docs/src/test-use-options-js.md
@@ -224,9 +224,9 @@ export default defineConfig({
 An example test illustrating the initial context options are set:
 
 ```js
-import { test, expect } from '@playwright/test';
-
-test('should inherit use options on context when using built-in browser fixture', async ({ browser }) => {
+test('should inherit use options on context when using built-in browser fixture', async ({
+  browser,
+}) => {
   const context = await browser.newContext();
   const page = await context.newPage();
   expect(await page.evaluate(() => navigator.userAgent)).toBe('some custom ua');
diff --git a/docs/src/webview2.md b/docs/src/webview2.md
index 033bee166d..d17c17a867 100644
--- a/docs/src/webview2.md
+++ b/docs/src/webview2.md
@@ -75,13 +75,20 @@ import os from 'os';
 import path from 'path';
 import childProcess from 'child_process';
 
-const EXECUTABLE_PATH = path.join(__dirname, '../../webview2-app/bin/Debug/net6.0-windows/webview2.exe');
+const EXECUTABLE_PATH = path.join(
+    __dirname,
+    '../../webview2-app/bin/Debug/net6.0-windows/webview2.exe',
+);
 
 export const test = base.extend({
   browser: async ({ playwright }, use, testInfo) => {
     const cdpPort = 10000 + testInfo.workerIndex;
-    fs.accessSync(EXECUTABLE_PATH, fs.constants.X_OK); // Make sure that the executable exists and is executable
-    const userDataDir = path.join(fs.realpathSync.native(os.tmpdir()), `playwright-webview2-tests/user-data-dir-${testInfo.workerIndex}`);
+    // Make sure that the executable exists and is executable
+    fs.accessSync(EXECUTABLE_PATH, fs.constants.X_OK);
+    const userDataDir = path.join(
+        fs.realpathSync.native(os.tmpdir()),
+        `playwright-webview2-tests/user-data-dir-${testInfo.workerIndex}`,
+    );
     const webView2Process = childProcess.spawn(EXECUTABLE_PATH, [], {
       shell: true,
       env: {
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 6631353f8f..5aca08febf 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -112,7 +112,9 @@ export interface Page {
    *
    * ```js
    * const bodyHandle = await page.evaluate('document.body');
-   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
+   *   body.innerHTML + suffix, [bodyHandle, 'hello']
+   * );
    * await bodyHandle.dispose();
    * ```
    *
@@ -159,7 +161,9 @@ export interface Page {
    *
    * ```js
    * const bodyHandle = await page.evaluate('document.body');
-   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
+   *   body.innerHTML + suffix, [bodyHandle, 'hello']
+   * );
    * await bodyHandle.dispose();
    * ```
    *
@@ -2316,7 +2320,9 @@ export interface Page {
    * (async () => {
    *   const browser = await webkit.launch({ headless: false });
    *   const page = await browser.newPage();
-   *   await page.exposeFunction('sha256', text => crypto.createHash('sha256').update(text).digest('hex'));
+   *   await page.exposeFunction('sha256', text =>
+   *     crypto.createHash('sha256').update(text).digest('hex'),
+   *   );
    *   await page.setContent(`
    *     <script>
    *       async function onClick() {
@@ -4552,7 +4558,9 @@ export interface Page {
    * const request = await requestPromise;
    *
    * // Alternative way with a predicate. Note no await.
-   * const requestPromise = page.waitForRequest(request => request.url() === 'https://example.com' && request.method() === 'GET');
+   * const requestPromise = page.waitForRequest(request =>
+   *   request.url() === 'https://example.com' && request.method() === 'GET',
+   * );
    * await page.getByText('trigger request').click();
    * const request = await requestPromise;
    * ```
@@ -4582,7 +4590,9 @@ export interface Page {
    * const response = await responsePromise;
    *
    * // Alternative way with a predicate. Note no await.
-   * const responsePromise = page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200);
+   * const responsePromise = page.waitForResponse(response =>
+   *   response.url() === 'https://example.com' && response.status() === 200
+   * );
    * await page.getByText('trigger response').click();
    * const response = await responsePromise;
    * ```
@@ -4768,7 +4778,9 @@ export interface Frame {
    *
    * ```js
    * const bodyHandle = await frame.evaluate('document.body');
-   * const html = await frame.evaluate(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+   * const html = await frame.evaluate(([body, suffix]) =>
+   *   body.innerHTML + suffix, [bodyHandle, 'hello'],
+   * );
    * await bodyHandle.dispose();
    * ```
    *
@@ -4811,7 +4823,9 @@ export interface Frame {
    *
    * ```js
    * const bodyHandle = await frame.evaluate('document.body');
-   * const html = await frame.evaluate(([body, suffix]) => body.innerHTML + suffix, [bodyHandle, 'hello']);
+   * const html = await frame.evaluate(([body, suffix]) =>
+   *   body.innerHTML + suffix, [bodyHandle, 'hello'],
+   * );
    * await bodyHandle.dispose();
    * ```
    *
@@ -4853,7 +4867,9 @@ export interface Frame {
    *
    * ```js
    * const aHandle = await frame.evaluateHandle(() => document.body);
-   * const resultHandle = await frame.evaluateHandle(([body, suffix]) => body.innerHTML + suffix, [aHandle, 'hello']);
+   * const resultHandle = await frame.evaluateHandle(([body, suffix]) =>
+   *   body.innerHTML + suffix, [aHandle, 'hello'],
+   * );
    * console.log(await resultHandle.jsonValue());
    * await resultHandle.dispose();
    * ```
@@ -4895,7 +4911,9 @@ export interface Frame {
    *
    * ```js
    * const aHandle = await frame.evaluateHandle(() => document.body);
-   * const resultHandle = await frame.evaluateHandle(([body, suffix]) => body.innerHTML + suffix, [aHandle, 'hello']);
+   * const resultHandle = await frame.evaluateHandle(([body, suffix]) =>
+   *   body.innerHTML + suffix, [aHandle, 'hello'],
+   * );
    * console.log(await resultHandle.jsonValue());
    * await resultHandle.dispose();
    * ```
@@ -8197,7 +8215,9 @@ export interface BrowserContext {
    * (async () => {
    *   const browser = await webkit.launch({ headless: false });
    *   const context = await browser.newContext();
-   *   await context.exposeFunction('sha256', text => crypto.createHash('sha256').update(text).digest('hex'));
+   *   await context.exposeFunction('sha256', text =>
+   *     crypto.createHash('sha256').update(text).digest('hex'),
+   *   );
    *   const page = await context.newPage();
    *   await page.setContent(`
    *     <script>
@@ -9119,7 +9139,9 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
    *
    * ```js
    * const feedHandle = await page.$('.feed');
-   * expect(await feedHandle.$$eval('.tweet', nodes => nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!']);
+   * expect(await feedHandle.$$eval('.tweet', nodes =>
+   *   nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!'],
+   * );
    * ```
    *
    * @param selector A selector to query for.
@@ -9148,7 +9170,9 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
    *
    * ```js
    * const feedHandle = await page.$('.feed');
-   * expect(await feedHandle.$$eval('.tweet', nodes => nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!']);
+   * expect(await feedHandle.$$eval('.tweet', nodes =>
+   *   nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!'],
+   * );
    * ```
    *
    * @param selector A selector to query for.
@@ -9177,7 +9201,9 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
    *
    * ```js
    * const feedHandle = await page.$('.feed');
-   * expect(await feedHandle.$$eval('.tweet', nodes => nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!']);
+   * expect(await feedHandle.$$eval('.tweet', nodes =>
+   *   nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!'],
+   * );
    * ```
    *
    * @param selector A selector to query for.
@@ -9206,7 +9232,9 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
    *
    * ```js
    * const feedHandle = await page.$('.feed');
-   * expect(await feedHandle.$$eval('.tweet', nodes => nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!']);
+   * expect(await feedHandle.$$eval('.tweet', nodes =>
+   *   nodes.map(n => n.innerText))).toEqual(['Hello!', 'Hi!'],
+   * );
    * ```
    *
    * @param selector A selector to query for.
@@ -13711,8 +13739,12 @@ export {};
  *     const webview = await device.webView({ pkg: 'org.chromium.webview_shell' });
  *
  *     // Fill the input box.
- *     await device.fill({ res: 'org.chromium.webview_shell:id/url_field' }, 'github.com/microsoft/playwright');
- *     await device.press({ res: 'org.chromium.webview_shell:id/url_field' }, 'Enter');
+ *     await device.fill({
+ *       res: 'org.chromium.webview_shell:id/url_field',
+ *     }, 'github.com/microsoft/playwright');
+ *     await device.press({
+ *       res: 'org.chromium.webview_shell:id/url_field',
+ *     }, 'Enter');
  *
  *     // Work with WebView's page as usual.
  *     const page = await webview.page();
diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts
index caa14b73e5..5c24dd1c33 100644
--- a/packages/playwright-test/types/test.d.ts
+++ b/packages/playwright-test/types/test.d.ts
@@ -3351,7 +3351,10 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * ```js
    * test('example test', async ({ page }) => {
    *   // ...
-   *   await test.info().attach('screenshot', { body: await page.screenshot(), contentType: 'image/png' });
+   *   await test.info().attach('screenshot', {
+   *     body: await page.screenshot(),
+   *     contentType: 'image/png',
+   *   });
    * });
    * ```
    *
diff --git a/packages/playwright-test/types/testReporter.d.ts b/packages/playwright-test/types/testReporter.d.ts
index 50a122fbd4..6c12894bcb 100644
--- a/packages/playwright-test/types/testReporter.d.ts
+++ b/packages/playwright-test/types/testReporter.d.ts
@@ -316,7 +316,9 @@ export interface FullResult {
  *
  * ```js
  * // my-awesome-reporter.ts
- * import type { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@playwright/test/reporter';
+ * import type {
+ *   Reporter, FullConfig, Suite, TestCase, TestResult, FullResult
+ * } from '@playwright/test/reporter';
  *
  * class MyReporter implements Reporter {
  *   constructor(options: { customOption?: string } = {}) {
diff --git a/utils/doclint/linting-code-snippets/cli.js b/utils/doclint/linting-code-snippets/cli.js
index d15d1a3709..7f762d4b98 100644
--- a/utils/doclint/linting-code-snippets/cli.js
+++ b/utils/doclint/linting-code-snippets/cli.js
@@ -142,6 +142,7 @@ class JSLintingService extends LintingService {
         rules: {
           'notice/notice': 'off',
           '@typescript-eslint/no-unused-vars': 'off',
+          'max-len': ['error', { code: 100 }],
         },
       }
     });