From df847dd4a0634066c4718167172051838c61260b Mon Sep 17 00:00:00 2001 From: TheComeUpCode <60989153+TheComeUpCode@users.noreply.github.com> Date: Thu, 30 Oct 2025 22:21:16 +0000 Subject: [PATCH 1/3] Create documentation for handling stale elements in k6 Added guidance on handling stale or dynamic elements in k6 browser tests. --- .../recommended-practices/wait-dom-changes.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md new file mode 100644 index 0000000000..f9b9617b6e --- /dev/null +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md @@ -0,0 +1,10 @@ +--- +title: 'Handling Stale or Dynamic Elements After Navigation' +description: 'Wait for elements to appear in k6 browser tests to avoid interacting with stale or dynamic content' +weight: 01 +--- + +# How To Handle Stale or Dynamic Elements After Navigation +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//javascript-api/k6-browser/locator/) such as `wait` or `page.waitForSelector` 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. + +## Example From 232667cb530fedab2acbdc4454eb84c8117cb9e9 Mon Sep 17 00:00:00 2001 From: TheComeUpCode <60989153+TheComeUpCode@users.noreply.github.com> Date: Thu, 30 Oct 2025 22:23:38 +0000 Subject: [PATCH 2/3] Include example for handling dynamic DOM elements Added example code for waiting on DOM changes in k6 tests. --- .../recommended-practices/wait-dom-changes.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md index f9b9617b6e..3c1052451f 100644 --- a/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md @@ -8,3 +8,33 @@ weight: 01 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//javascript-api/k6-browser/locator/) such as `wait` or `page.waitForSelector` 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. ## Example +{{< code >}} + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + await page.goto('https://test.k6.io/browser.php'); + const text = page.locator('#input-text-hidden'); + await text.waitFor({ + state: 'hidden', + }); +} +``` + +{{< /code >}} From 1af3a8db1c6a9508b94273c92254ce0d0c704bf6 Mon Sep 17 00:00:00 2001 From: TheComeUpCode <60989153+TheComeUpCode@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:40:50 +0000 Subject: [PATCH 3/3] Update docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md Co-authored-by: Ankur --- .../using-k6-browser/recommended-practices/wait-dom-changes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md index 3c1052451f..902c6def49 100644 --- a/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md @@ -5,7 +5,7 @@ weight: 01 --- # How To Handle Stale or Dynamic Elements After Navigation -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//javascript-api/k6-browser/locator/) such as `wait` or `page.waitForSelector` 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. +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//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. ## Example {{< code >}}