Update k6 browser docs to align with k6 v0.44.0 release

.vale/Vocab/docs/accept.txt

@@ -199,3 +199,8 @@ metallb
 Dockerfile
 Avro
 Ethereum
+webvital
+variadic
+shm
+srgb
+kwallet

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/02 BrowserContext.md

@@ -13,6 +13,7 @@ If a [page](/javascript-api/k6-experimental/browser/page/) opens another page, e
 | Method                                                                                                                                          | Description                                                                                                |
 |-------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
 | [BrowserContext.browser()](/javascript-api/k6-experimental/browser/browsercontext/browser-instance/)                                                                 | Returns the [Browser](/javascript-api/k6-experimental/browser/browser-class/) instance that this `BrowserContext` belongs to. |
+| [BrowserContext.addCookies()](/javascript-api/k6-experimental/browser/browsercontext/addcookies/)                                                                    | Adds cookies into the `BrowserContext`. |
 | [BrowserContext.clearCookies()](/javascript-api/k6-experimental/browser/browsercontext/clearcookies/) <BWIPT id="442"/>                                     | Clear the `BrowserContext`'s cookies.                                                                      |
 | [BrowserContext.clearPermissions()](/javascript-api/k6-experimental/browser/browsercontext/clearpermissions) <BWIPT id="443"/>                              | Clears all permission overrides for the `BrowserContext`.                                                  |
 | [BrowserContext.close()](/javascript-api/k6-experimental/browser/browsercontext/close)                                                                      | Close the `BrowserContext` and all its [page](/javascript-api/k6-experimental/browser/page/)s.                          |

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/02 BrowserContext/addCookies.md

@@ -0,0 +1,32 @@
+---
+title: 'addCookies()'
+excerpt: 'Clears context cookies.'
+---
+
+Adds cookies into the `BrowserContext`. All pages within this context will have these cookies installed.
+
+### Example
+
+<CodeGroup labels={[]}>
+
+```javascript
+import { chromium } from 'k6/experimental/browser';
+
+export default async function () {
+  const browser = chromium.launch();
+  const context = browser.newContext();
+
+  context.addCookies([
+    {
+      name: 'myCookie',
+      value: 'hello world',
+      url: 'https://test.k6.io/',
+    },
+  ]);
+
+  const page = context.newPage();
+  await page.goto('https://test.k6.io/');
+}
+```
+
+</CodeGroup>

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/02 BrowserContext/clearCookies.md

@@ -11,3 +11,22 @@ This feature has **known issues**. For details, refer to
 </Blockquote>
 
 Clears the `BrowserContext`'s cookies.
+
+### Example
+
+<CodeGroup labels={[]}>
+
+```javascript
+import { chromium } from 'k6/experimental/browser';
+
+export default async function () {
+  const browser = chromium.launch();
+  const context = browser.newContext();
+  const page = context.newPage();
+
+  await page.goto('https://test.k6.io/');
+  context.clearCookies();
+}
+```
+
+</CodeGroup>

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/03 BrowserType.md

@@ -7,7 +7,7 @@ The `BrowserType` is the entry point into launching a browser process; `chromium
 
 | Method                                                                                  | Description                                                                  |
 |-----------------------------------------------------------------------------------------|------------------------------------------------------------------------------|
-| browserType.connect([options]) <BWIPT id="17"/>                                         | Connect attaches k6 browser to an existing browser instance.                 |
+| [browserType.connect(wsURL, [options])](/javascript-api/k6-browser/api/browsertype/connect/) | Connect attaches k6 browser to an existing browser instance. |
 | [browserType.executablePath()](/javascript-api/k6-experimental/browser/browsertype/executablepath/) | Returns the path where the extension expects to find the browser executable. |
 | [browserType.launch([options])](/javascript-api/k6-experimental/browser/browsertype/launch/)        | Launches a new browser process.                                              |
 | browserType.launchPersistentContext(userDataDir, [options]) <BWIPT id="16"/>            | Launches the browser with persistent storage.                                |

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/03 BrowserType/connect--options--.md

@@ -0,0 +1,49 @@
+---
+title: 'connect(wsURL, [options])'
+excerpt: 'Browser module: BrowserType.connect method'
+---
+
+Connects to an existing browser instance.
+
+| Parameter         | Type     | Default | Description                                                                                                                                                                                                                                                           |
+|-------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| debug             | boolean  | `false` | All CDP messages and internal fine grained logs will be logged if set to `true`.                                                                                                                                                                                      |
+| slowMo            | string   | `null`  | Slow down input actions and navigation by the specified time e.g. `'500ms'`.                                                                                                                                                                                          |
+| timeout           | string   | `'30s'` | Default timeout to use for various actions and navigation.                                                                                                                                                                                                            |
+
+
+### Returns
+
+| Type   | Description                                            |
+|--------|--------------------------------------------------------|
+| object | [Browser](/javascript-api/k6-browser/api/browser/) object |
+
+
+## Example
+
+<CodeGroup labels={[]}>
+
+```javascript
+import { chromium } from 'k6/experimental/browser';
+
+export default async function () {
+  const wsURL = 'ws://localhost:9222/devtools/browser/a7ee4f2d-35cf-4478-a333-f597e1532ab0';
+  const browser = chromium.connect(wsURL, {
+    debug: true,
+    slowMo: '500ms',
+    timeout: '30s',
+  });
+  const context = browser.newContext();
+  const page = context.newPage();
+
+  try {
+    await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
+    page.screenshot({ path: `example-chromium.png` });
+  } finally {
+    page.close();
+    browser.close();
+  }
+}
+```
+
+</CodeGroup>

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/03 BrowserType/launch--options--.md

@@ -57,7 +57,6 @@ The starting '--' have been omitted from the argument names in these lists.
 | no-service-autorun | `true` | Disables the service process from adding itself as an autorun process. This does not delete existing autorun registrations, it just prevents the service from registering a new one. |
 | no-startup-window | `true` | Does not automatically open a browser window on startup (used when launching Chrome for the purpose of hosting background apps). |
 | no-default-browser-check | `true` | Disables the default browser check. Useful for UI/browser tests where we want to avoid having the default browser info-bar displayed. |
-| no-sandbox | `true` | Disables the sandbox for all process types that are normally sandboxed. Meant to be used as a browser-level switch for testing purposes only. |
 | headless | `true`/`false` | Run in headless mode, i.e., without a UI or display server dependencies. Set by [launch options](/javascript-api/k6-experimental/browser/browsertype/launch/) (default true).  |
 | auto-open-devtools-for-tabs | `true`/`false` | This flag makes Chrome auto-open the DevTools window for each tab. It is intended to be used by developers and automation, not to require user interaction for opening DevTools. Set by [launch options](/javascript-api/k6-experimental/browser/browsertype/launch/) (default false). |
 | window-size | `800,600` | Sets the initial window size. Provided as string in the format "800,600". |

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/04-element-handle.md

@@ -52,31 +52,29 @@ excerpt: "Browser module: ElementHandle Class"
 import { check } from 'k6';
 import { chromium } from 'k6/experimental/browser';
 
-export default async function() {
+export default async function () {
   const browser = chromium.launch({
     headless: false,
-    slowMo: '500ms' // slow down by 500ms
+    slowMo: '500ms', // slow down by 500ms
   });
   const context = browser.newContext();
   const page = context.newPage();
 
   // Goto front page, find login link and click it
   try {
     await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator('a[href="/my_messages.php"]').click(),
-    ]);
+    const messagesLink = page.locator('a[href="/my_messages.php"]');
+
+    await Promise.all([page.waitForNavigation(), messagesLink.click()]);
     // Enter login credentials and login
     page.locator('input[name="login"]').type('admin');
     page.locator('input[name="password"]').type('123');
-
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator('input[type="submit"]').click(),
-    ]);
+
+    const submitButton = page.locator('input[type="submit"]');
+
+    await Promise.all([page.waitForNavigation(), submitButton.click()]);
     check(page, {
-      'header': page.locator('h2').textContent() == 'Welcome, admin!',
+      header: page.locator('h2').textContent() == 'Welcome, admin!',
     });
   } finally {
     page.close();

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/08 Locator/click--options--.md

@@ -30,21 +30,41 @@ Mouse click on the chosen element.
 
 </TableWithNestedRows>
 
-### Example
+### Examples
 
-<CodeGroup labels={[]}>
+<CodeGroup labels={["Click action without navigation"]}>
 
 ```javascript
 import { chromium } from 'k6/experimental/browser';
 
 export default async function () {
   const browser = chromium.launch();
   const page = browser.newPage();
-  
+
   await page.goto('https://test.k6.io/browser.php');
-  const button = page.locator("#counter-button");
-  button.click();
+  const button = page.locator('#counter-button');
+  await button.click();
 }
 ```
 
 </CodeGroup>
+
+When a click action results in a page navigation, remember to work with `Promise.all()` and `page.waitForNavigation()` to properly handle the asynchronous operation.
+
+<CodeGroup labels={["Click action with navigation"]}>
+
+```javascript
+import { chromium } from 'k6/experimental/browser';
+
+export default async function () {
+  const browser = chromium.launch();
+  const page = browser.newPage();
+
+  await page.goto('https://test.k6.io/');
+  const messagesLink = page.locator('a[href="/my_messages.php"]');
+
+  await Promise.all([page.waitForNavigation(), messagesLink.click()]);
+}
+```
+
+</CodeGroup>

src/data/markdown/docs/02 javascript api/07 k6-experimental/01 browser/10-page.md

@@ -75,7 +75,7 @@ excerpt: "Browser module: Page Class"
 import { check } from 'k6';
 import { chromium } from 'k6/experimental/browser';
 
-export default async function() {
+export default async function () {
   const browser = chromium.launch({
     headless: false,
   });
@@ -85,20 +85,18 @@ export default async function() {
   // Goto front page, find login link and click it
   try {
     await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator('a[href="/my_messages.php"]').click(),
-    ]);
+    const messagesLink = page.locator('a[href="/my_messages.php"]');
+
+    await Promise.all([page.waitForNavigation(), messagesLink.click()]);
     // Enter login credentials and login
     page.locator('input[name="login"]').type('admin');
     page.locator('input[name="password"]').type('123');
-
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator('input[type="submit"]').click(),
-    ]);
+
+    const submitButton = page.locator('input[type="submit"]');
+
+    await Promise.all([page.waitForNavigation(), submitButton.click()]);
     check(page, {
-      'header': page.locator('h2').textContent() == 'Welcome, admin!',
+      header: page.locator('h2').textContent() == 'Welcome, admin!',
     });
   } finally {
     page.close();

src/data/markdown/translated-guides/en/03 Using k6 browser/01 Overview.md

@@ -26,7 +26,7 @@ The main use case for the browser module is to test performance on the browser l
 
 ```javascript
 import { chromium } from 'k6/experimental/browser';
-import { check } from 'k6'
+import { check } from 'k6';
 
 export default async function () {
   const browser = chromium.launch({ headless: false });
@@ -38,13 +38,12 @@ export default async function () {
     page.locator('input[name="login"]').type('admin');
     page.locator('input[name="password"]').type('123');
 
-    await Promise.all([
-      page.waitForNavigation(),
-      page.locator('input[type="submit"]').click(),
-    ]);
+    const submitButton = page.locator('input[type="submit"]');
+
+    await Promise.all([page.waitForNavigation(), submitButton.click()]);
 
     check(page, {
-      'header': page.locator('h2').textContent() == 'Welcome, admin!',
+      header: page.locator('h2').textContent() == 'Welcome, admin!',
     });
   } finally {
     page.close();
@@ -87,23 +86,34 @@ default ✓ [===============================] 1 VUs  00m01.9s/10m0s  1/1 iters,
 
      ✓ header
 
-     browser_dom_content_loaded.......: avg=7.31ms  min=122µs   med=5.59ms  max=16.22ms  p(90)=14.1ms   p(95)=15.16ms
-     browser_first_contentful_paint...: avg=16.8ms  min=14.78ms med=16.8ms  max=18.81ms  p(90)=18.41ms  p(95)=18.61ms
-     browser_first_paint..............: avg=16.75ms min=14.73ms med=16.75ms max=18.78ms  p(90)=18.37ms  p(95)=18.58ms
-     browser_loaded...................: avg=7.23ms  min=1.13ms  med=4.56ms  max=16.01ms  p(90)=13.72ms  p(95)=14.87ms
-     checks...........................: 100.00% ✓ 1        ✗ 0
-     data_received....................: 5.8 kB  3.0 kB/s
-     data_sent........................: 2.6 kB  1.3 kB/s
-     http_req_connecting..............: avg=40.4ms  min=0s      med=0s      max=202ms    p(90)=121.2ms  p(95)=161.59ms
-     http_req_duration................: avg=117.6ms min=649µs   med=96.27ms max=298.96ms p(90)=218.15ms p(95)=258.55ms
-     http_req_receiving...............: avg=75.4ms  min=0s      med=94ms    max=95ms     p(90)=95ms     p(95)=95ms
-     http_req_sending.................: avg=0s      min=0s      med=0s      max=0s       p(90)=0s       p(95)=0s
-     http_req_tls_handshaking.........: avg=21.6ms  min=0s      med=0s      max=108ms    p(90)=64.8ms   p(95)=86.39ms
-     http_reqs........................: 5       2.568486/s
-     iteration_duration...............: avg=1.94s   min=1.94s   med=1.94s   max=1.94s    p(90)=1.94s    p(95)=1.94s
-     iterations.......................: 1       0.513697/s
-     vus..............................: 1       min=1      max=1
-     vus_max..........................: 1       min=1      max=1
+     browser_dom_content_loaded.............................: avg=63.74ms  min=2.11ms   med=21.66ms  max=167.44ms p(90)=138.28ms p(95)=152.86ms
+     browser_first_paint....................................: avg=72.62ms  min=41.31ms  med=72.62ms  max=103.94ms p(90)=97.67ms  p(95)=100.8ms
+     browser_loaded.........................................: avg=63.16ms  min=6.52ms   med=15.98ms  max=166.98ms p(90)=136.78ms p(95)=151.88ms
+     checks.................................................: 100.00% ✓ 1        ✗ 0
+     data_received..........................................: 5.8 kB  659 B/s
+     data_sent..............................................: 2.6 kB  291 B/s
+     http_req_connecting....................................: avg=48ms     min=0s       med=0s       max=240ms    p(90)=144ms    p(95)=191.99ms
+     http_req_duration......................................: avg=155.01ms min=3.09ms   med=121.84ms max=405.52ms p(90)=294.59ms p(95)=350.05ms
+     http_req_receiving.....................................: avg=92.6ms   min=0s       med=108ms    max=138ms    p(90)=127.2ms  p(95)=132.6ms
+     http_req_sending.......................................: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s
+     http_req_tls_handshaking...............................: avg=22.4ms   min=0s       med=0s       max=112ms    p(90)=67.2ms   p(95)=89.59ms
+     http_reqs..............................................: 5       0.566242/s
+     iteration_duration.....................................: avg=8.82s    min=8.82s    med=8.82s    max=8.82s    p(90)=8.82s    p(95)=8.82s
+     iterations.............................................: 1       0.113248/s
+     vus....................................................: 1       min=1      max=1
+     vus_max................................................: 1       min=1      max=1
+     webvital_cumulative_layout_shift.......................: avg=0        min=0        med=0        max=0        p(90)=0        p(95)=0
+     webvital_cumulative_layout_shift_good..................: 1       0.113248/s
+     webvital_first_contentful_paint........................: avg=415.35ms min=302ms    med=415.35ms max=528.7ms  p(90)=506.03ms p(95)=517.36ms
+     webvital_first_contentful_paint_good...................: 2       0.226497/s
+     webvital_first_input_delay.............................: avg=5.59ms   min=5.59ms   med=5.59ms   max=5.59ms   p(90)=5.59ms   p(95)=5.59ms
+     webvital_first_input_delay_good........................: 1       0.113248/s
+     webvital_interaction_to_next_paint.....................: avg=248ms    min=248ms    med=248ms    max=248ms    p(90)=248ms    p(95)=248ms
+     webvital_interaction_to_next_paint_needs_improvement...: 1       0.113248/s
+     webvital_largest_content_paint.........................: avg=528.7ms  min=528.7ms  med=528.7ms  max=528.7ms  p(90)=528.7ms  p(95)=528.7ms
+     webvital_largest_content_paint_good....................: 1       0.113248/s
+     webvital_time_to_first_byte............................: avg=320.59ms min=247.09ms med=320.59ms max=394.1ms  p(90)=379.4ms  p(95)=386.75ms
+     webvital_time_to_first_byte_good.......................: 2       0.226497/s
 ```
 
 </CodeGroup>

src/data/markdown/translated-guides/en/03 Using k6 browser/02 Running browser tests.md

@@ -58,13 +58,21 @@ To run a simple local script:
 
 2. Then, run the test on your terminal with this command:
 
-  <CodeGroup labels={["CLI"]}>
+<CodeGroup labels={["Bash", "Windows: CMD", "Windows: PowerShell"]} lineNumbers={[false]}>
 
-  ```bash
-  $ K6_BROWSER_ENABLED=true k6 run script.js
-  ```
+```bash
+$ K6_BROWSER_ENABLED=true k6 run script.js
+```
 
-  </CodeGroup>
+```bash
+C:\k6> set "K6_BROWSER_ENABLED=true" && k6 run script.js
+```
+
+```bash
+PS C:\k6> $env:K6_BROWSER_ENABLED=true ; k6 run script.js
+```
+
+</CodeGroup>
 
 ## Interact with elements on your webpage
 
@@ -132,7 +140,9 @@ export default async function () {
     page.locator('input[name="login"]').type('admin');
     page.locator('input[name="password"]').type('123');
 
-    await Promise.all([page.waitForNavigation(), page.locator('input[type="submit"]').click()]);
+    const submitButton = page.locator('input[type="submit"]');
+
+    await Promise.all([page.waitForNavigation(), submitButton.click()]);
 
     check(page, {
       header: page.locator('h2').textContent() == 'Welcome, admin!',