Skip to content

Commit 9be3f01

Browse files
heitortsergentheitortsergent
committed
Apply to previous versions
1 parent f503240 commit 9be3f01

16 files changed

+180
-12
lines changed

‎docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Use Page.close to clean up test resources'
33
description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources'
4-
weight: 01
4+
weight: 650
55
---
66

77
# Use Page.close to clean up test resources

‎docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: 'Handle stale or dynamic elements after navigation'
3+
description: 'Wait for elements to appear in k6 browser tests to avoid interacting with stale or dynamic content'
4+
weight: 50
5+
---
6+
7+
# Handle stale or dynamic elements after navigation
8+
9+
Modern websites often update the DOM asynchronously after navigation or user interactions. Waiting for navigation to complete isn't sufficient, as test scripts may still fail or attempt to interact with elements that aren't yet available.
10+
11+
To avoid these issues, wait for specific elements to appear before you continue your test. Use [locator APIs](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) such as `waitFor` to ensure elements are ready for interaction.
12+
13+
This approach is especially important when you test single-page applications (SPAs) or any pages with dynamic content, where elements may be added, removed, or updated asynchronously.
14+
15+
## Example
16+
17+
```javascript
18+
import { browser } from 'k6/browser';
19+
20+
export const options = {
21+
scenarios: {
22+
browser: {
23+
executor: 'shared-iterations',
24+
options: {
25+
browser: {
26+
type: 'chromium',
27+
},
28+
},
29+
},
30+
},
31+
};
32+
33+
export default async function () {
34+
const page = await browser.newPage();
35+
36+
await page.goto('https://test.k6.io/browser.php');
37+
const text = page.locator('#input-text-hidden');
38+
await text.waitFor({
39+
state: 'hidden',
40+
});
41+
}
42+
```

‎docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 'Hybrid approach to performance'
33
heading: 'Hybrid performance with k6 browser'
44
head_title: 'Hybrid performance with k6 browser'
55
description: 'An example on how to implement a hybrid approach to performance with k6 browser'
6-
weight: 200
6+
weight: 100
77
---
88

99
# Hybrid performance with k6 browser

‎docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Prevent cookie banners from blocking interactions"
33
description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability."
4-
weight: 100
4+
weight: 350
55
---
66

77
# Prevent cookie banners from blocking interactions

‎docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Use Page.close to clean up test resources'
33
description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources'
4-
weight: 01
4+
weight: 650
55
---
66

77
# Use Page.close to clean up test resources

‎docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: 'Handle stale or dynamic elements after navigation'
3+
description: 'Wait for elements to appear in k6 browser tests to avoid interacting with stale or dynamic content'
4+
weight: 50
5+
---
6+
7+
# Handle stale or dynamic elements after navigation
8+
9+
Modern websites often update the DOM asynchronously after navigation or user interactions. Waiting for navigation to complete isn't sufficient, as test scripts may still fail or attempt to interact with elements that aren't yet available.
10+
11+
To avoid these issues, wait for specific elements to appear before you continue your test. Use [locator APIs](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) such as `waitFor` to ensure elements are ready for interaction.
12+
13+
This approach is especially important when you test single-page applications (SPAs) or any pages with dynamic content, where elements may be added, removed, or updated asynchronously.
14+
15+
## Example
16+
17+
```javascript
18+
import { browser } from 'k6/browser';
19+
20+
export const options = {
21+
scenarios: {
22+
browser: {
23+
executor: 'shared-iterations',
24+
options: {
25+
browser: {
26+
type: 'chromium',
27+
},
28+
},
29+
},
30+
},
31+
};
32+
33+
export default async function () {
34+
const page = await browser.newPage();
35+
36+
await page.goto('https://test.k6.io/browser.php');
37+
const text = page.locator('#input-text-hidden');
38+
await text.waitFor({
39+
state: 'hidden',
40+
});
41+
}
42+
```

‎docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 'Hybrid approach to performance'
33
heading: 'Hybrid performance with k6 browser'
44
head_title: 'Hybrid performance with k6 browser'
55
description: 'An example on how to implement a hybrid approach to performance with k6 browser'
6-
weight: 200
6+
weight: 100
77
---
88

99
# Hybrid performance with k6 browser

‎docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Prevent cookie banners from blocking interactions"
33
description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability."
4-
weight: 100
4+
weight: 350
55
---
66

77
# Prevent cookie banners from blocking interactions

‎docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Use Page.close to clean up test resources'
33
description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources'
4-
weight: 01
4+
weight: 650
55
---
66

77
# Use Page.close to clean up test resources

‎docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: 'Handle stale or dynamic elements after navigation'
3+
description: 'Wait for elements to appear in k6 browser tests to avoid interacting with stale or dynamic content'
4+
weight: 50
5+
---
6+
7+
# Handle stale or dynamic elements after navigation
8+
9+
Modern websites often update the DOM asynchronously after navigation or user interactions. Waiting for navigation to complete isn't sufficient, as test scripts may still fail or attempt to interact with elements that aren't yet available.
10+
11+
To avoid these issues, wait for specific elements to appear before you continue your test. Use [locator APIs](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) such as `waitFor` to ensure elements are ready for interaction.
12+
13+
This approach is especially important when you test single-page applications (SPAs) or any pages with dynamic content, where elements may be added, removed, or updated asynchronously.
14+
15+
## Example
16+
17+
```javascript
18+
import { browser } from 'k6/browser';
19+
20+
export const options = {
21+
scenarios: {
22+
browser: {
23+
executor: 'shared-iterations',
24+
options: {
25+
browser: {
26+
type: 'chromium',
27+
},
28+
},
29+
},
30+
},
31+
};
32+
33+
export default async function () {
34+
const page = await browser.newPage();
35+
36+
await page.goto('https://test.k6.io/browser.php');
37+
const text = page.locator('#input-text-hidden');
38+
await text.waitFor({
39+
state: 'hidden',
40+
});
41+
}
42+
```

0 commit comments

Comments
 (0)