Skip to content

Commit 3786f03

Browse files
ka3deka3de
authored
Merge pull request #1131 from grafana/update-k6-browser-docs
Update k6 browser docs to align with k6 v0.44.0 release
2 parents 3d6de43 + fa9d976 commit 3786f03

File tree

14 files changed

+320
-66
lines changed

14 files changed

+320
-66
lines changed

‎.vale/Vocab/docs/accept.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,3 +199,8 @@ metallb
199199
Dockerfile
200200
Avro
201201
Ethereum
202+
webvital
203+
variadic
204+
shm
205+
srgb
206+
kwallet

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ If a [page](/javascript-api/k6-experimental/browser/page/) opens another page, e
1313
| Method | Description |
1414
|-------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
1515
| [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. |
16+
| [BrowserContext.addCookies()](/javascript-api/k6-experimental/browser/browsercontext/addcookies/) | Adds cookies into the `BrowserContext`. |
1617
| [BrowserContext.clearCookies()](/javascript-api/k6-experimental/browser/browsercontext/clearcookies/) <BWIPT id="442"/> | Clear the `BrowserContext`'s cookies. |
1718
| [BrowserContext.clearPermissions()](/javascript-api/k6-experimental/browser/browsercontext/clearpermissions) <BWIPT id="443"/> | Clears all permission overrides for the `BrowserContext`. |
1819
| [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‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: 'addCookies()'
3+
excerpt: 'Clears context cookies.'
4+
---
5+
6+
Adds cookies into the `BrowserContext`. All pages within this context will have these cookies installed.
7+
8+
### Example
9+
10+
<CodeGroup labels={[]}>
11+
12+
```javascript
13+
import { chromium } from 'k6/experimental/browser';
14+
15+
export default async function () {
16+
const browser = chromium.launch();
17+
const context = browser.newContext();
18+
19+
context.addCookies([
20+
{
21+
name: 'myCookie',
22+
value: 'hello world',
23+
url: 'https://test.k6.io/',
24+
},
25+
]);
26+
27+
const page = context.newPage();
28+
await page.goto('https://test.k6.io/');
29+
}
30+
```
31+
32+
</CodeGroup>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,22 @@ This feature has **known issues**. For details, refer to
1111
</Blockquote>
1212

1313
Clears the `BrowserContext`'s cookies.
14+
15+
### Example
16+
17+
<CodeGroup labels={[]}>
18+
19+
```javascript
20+
import { chromium } from 'k6/experimental/browser';
21+
22+
export default async function () {
23+
const browser = chromium.launch();
24+
const context = browser.newContext();
25+
const page = context.newPage();
26+
27+
await page.goto('https://test.k6.io/');
28+
context.clearCookies();
29+
}
30+
```
31+
32+
</CodeGroup>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ The `BrowserType` is the entry point into launching a browser process; `chromium
77

88
| Method | Description |
99
|-----------------------------------------------------------------------------------------|------------------------------------------------------------------------------|
10-
| browserType.connect([options]) <BWIPT id="17"/> | Connect attaches k6 browser to an existing browser instance. |
10+
| [browserType.connect(wsURL, [options])](/javascript-api/k6-browser/api/browsertype/connect/) | Connect attaches k6 browser to an existing browser instance. |
1111
| [browserType.executablePath()](/javascript-api/k6-experimental/browser/browsertype/executablepath/) | Returns the path where the extension expects to find the browser executable. |
1212
| [browserType.launch([options])](/javascript-api/k6-experimental/browser/browsertype/launch/) | Launches a new browser process. |
1313
| 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‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: 'connect(wsURL, [options])'
3+
excerpt: 'Browser module: BrowserType.connect method'
4+
---
5+
6+
Connects to an existing browser instance.
7+
8+
| Parameter | Type | Default | Description |
9+
|-------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
10+
| debug | boolean | `false` | All CDP messages and internal fine grained logs will be logged if set to `true`. |
11+
| slowMo | string | `null` | Slow down input actions and navigation by the specified time e.g. `'500ms'`. |
12+
| timeout | string | `'30s'` | Default timeout to use for various actions and navigation. |
13+
14+
15+
### Returns
16+
17+
| Type | Description |
18+
|--------|--------------------------------------------------------|
19+
| object | [Browser](/javascript-api/k6-browser/api/browser/) object |
20+
21+
22+
## Example
23+
24+
<CodeGroup labels={[]}>
25+
26+
```javascript
27+
import { chromium } from 'k6/experimental/browser';
28+
29+
export default async function () {
30+
const wsURL = 'ws://localhost:9222/devtools/browser/a7ee4f2d-35cf-4478-a333-f597e1532ab0';
31+
const browser = chromium.connect(wsURL, {
32+
debug: true,
33+
slowMo: '500ms',
34+
timeout: '30s',
35+
});
36+
const context = browser.newContext();
37+
const page = context.newPage();
38+
39+
try {
40+
await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
41+
page.screenshot({ path: `example-chromium.png` });
42+
} finally {
43+
page.close();
44+
browser.close();
45+
}
46+
}
47+
```
48+
49+
</CodeGroup>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ The starting '--' have been omitted from the argument names in these lists.
5757
| 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. |
5858
| no-startup-window | `true` | Does not automatically open a browser window on startup (used when launching Chrome for the purpose of hosting background apps). |
5959
| 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. |
60-
| 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. |
6160
| 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). |
6261
| 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). |
6362
| 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‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,31 +52,29 @@ excerpt: "Browser module: ElementHandle Class"
5252
import { check } from 'k6';
5353
import { chromium } from 'k6/experimental/browser';
5454

55-
export default async function() {
55+
export default async function () {
5656
const browser = chromium.launch({
5757
headless: false,
58-
slowMo: '500ms' // slow down by 500ms
58+
slowMo: '500ms', // slow down by 500ms
5959
});
6060
const context = browser.newContext();
6161
const page = context.newPage();
6262

6363
// Goto front page, find login link and click it
6464
try {
6565
await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
66-
await Promise.all([
67-
page.waitForNavigation(),
68-
page.locator('a[href="/my_messages.php"]').click(),
69-
]);
66+
const messagesLink = page.locator('a[href="/my_messages.php"]');
67+
68+
await Promise.all([page.waitForNavigation(), messagesLink.click()]);
7069
// Enter login credentials and login
7170
page.locator('input[name="login"]').type('admin');
7271
page.locator('input[name="password"]').type('123');
73-
74-
await Promise.all([
75-
page.waitForNavigation(),
76-
page.locator('input[type="submit"]').click(),
77-
]);
72+
73+
const submitButton = page.locator('input[type="submit"]');
74+
75+
await Promise.all([page.waitForNavigation(), submitButton.click()]);
7876
check(page, {
79-
'header': page.locator('h2').textContent() == 'Welcome, admin!',
77+
header: page.locator('h2').textContent() == 'Welcome, admin!',
8078
});
8179
} finally {
8280
page.close();

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

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,41 @@ Mouse click on the chosen element.
3030

3131
</TableWithNestedRows>
3232

33-
### Example
33+
### Examples
3434

35-
<CodeGroup labels={[]}>
35+
<CodeGroup labels={["Click action without navigation"]}>
3636

3737
```javascript
3838
import { chromium } from 'k6/experimental/browser';
3939

4040
export default async function () {
4141
const browser = chromium.launch();
4242
const page = browser.newPage();
43-
43+
4444
await page.goto('https://test.k6.io/browser.php');
45-
const button = page.locator("#counter-button");
46-
button.click();
45+
const button = page.locator('#counter-button');
46+
await button.click();
4747
}
4848
```
4949

5050
</CodeGroup>
51+
52+
When a click action results in a page navigation, remember to work with `Promise.all()` and `page.waitForNavigation()` to properly handle the asynchronous operation.
53+
54+
<CodeGroup labels={["Click action with navigation"]}>
55+
56+
```javascript
57+
import { chromium } from 'k6/experimental/browser';
58+
59+
export default async function () {
60+
const browser = chromium.launch();
61+
const page = browser.newPage();
62+
63+
await page.goto('https://test.k6.io/');
64+
const messagesLink = page.locator('a[href="/my_messages.php"]');
65+
66+
await Promise.all([page.waitForNavigation(), messagesLink.click()]);
67+
}
68+
```
69+
70+
</CodeGroup>

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ excerpt: "Browser module: Page Class"
7575
import { check } from 'k6';
7676
import { chromium } from 'k6/experimental/browser';
7777

78-
export default async function() {
78+
export default async function () {
7979
const browser = chromium.launch({
8080
headless: false,
8181
});
@@ -85,20 +85,18 @@ export default async function() {
8585
// Goto front page, find login link and click it
8686
try {
8787
await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
88-
await Promise.all([
89-
page.waitForNavigation(),
90-
page.locator('a[href="/my_messages.php"]').click(),
91-
]);
88+
const messagesLink = page.locator('a[href="/my_messages.php"]');
89+
90+
await Promise.all([page.waitForNavigation(), messagesLink.click()]);
9291
// Enter login credentials and login
9392
page.locator('input[name="login"]').type('admin');
9493
page.locator('input[name="password"]').type('123');
95-
96-
await Promise.all([
97-
page.waitForNavigation(),
98-
page.locator('input[type="submit"]').click(),
99-
]);
94+
95+
const submitButton = page.locator('input[type="submit"]');
96+
97+
await Promise.all([page.waitForNavigation(), submitButton.click()]);
10098
check(page, {
101-
'header': page.locator('h2').textContent() == 'Welcome, admin!',
99+
header: page.locator('h2').textContent() == 'Welcome, admin!',
102100
});
103101
} finally {
104102
page.close();

0 commit comments

Comments
 (0)