Skip to content

Commit 31a7c42

Browse files
Update wait-dom-changes.md
1 parent 1f804b7 commit 31a7c42

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
---
2-
title: 'Handling Stale or Dynamic Elements After Navigation'
2+
title: 'Handle stale or dynamic elements after navigation'
33
description: 'Wait for elements to appear in k6 browser tests to avoid interacting with stale or dynamic content'
4-
weight: 01
4+
weight: 50
55
---
66

7-
# How To Handle Stale or Dynamic Elements After Navigation
8-
Modern websites often update the DOM asynchronously after navigation or user interactions. Waiting for navigation to complete is not sufficient, as test scripts may still fail or attempt to interact with elements that are not yet available. Instead, wait for specific elements to appear before continuing 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. This is especially important when testing SPAs or any pages with dynamic content, where elements may be added, removed, or updated asynchronously.
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.
914

1015
## Example
11-
{{< code >}}
1216

1317
```javascript
1418
import { browser } from 'k6/browser';
@@ -36,5 +40,3 @@ export default async function () {
3640
});
3741
}
3842
```
39-
40-
{{< /code >}}

0 commit comments

Comments
 (0)