diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md index 4c4ed6eeed..8d06ec3c0c 100644 --- a/docs/sources/k6/next/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md @@ -1,7 +1,7 @@ --- title: 'Use Page.close to clean up test resources' description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources' -weight: 01 +weight: 650 --- # Use Page.close to clean up test resources 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/handle-dynamic-elements.md similarity index 52% rename from docs/sources/k6/next/using-k6-browser/recommended-practices/wait-dom-changes.md rename to docs/sources/k6/next/using-k6-browser/recommended-practices/handle-dynamic-elements.md index 902c6def49..6434f2d983 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/handle-dynamic-elements.md @@ -1,14 +1,18 @@ --- -title: 'Handling Stale or Dynamic Elements After Navigation' +title: 'Handle 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 +weight: 50 --- -# 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 `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. +# Handle stale or dynamic elements after navigation + +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. + +To avoid these issues, wait for specific elements to appear before you continue 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 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. ## Example -{{< code >}} ```javascript import { browser } from 'k6/browser'; @@ -36,5 +40,3 @@ export default async function () { }); } ``` - -{{< /code >}} diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md index cda24fc2b5..a8157c4f70 100644 --- a/docs/sources/k6/next/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md @@ -3,7 +3,7 @@ title: 'Hybrid approach to performance' heading: 'Hybrid performance with k6 browser' head_title: 'Hybrid performance with k6 browser' description: 'An example on how to implement a hybrid approach to performance with k6 browser' -weight: 200 +weight: 100 --- # Hybrid performance with k6 browser diff --git a/docs/sources/k6/next/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md b/docs/sources/k6/next/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md index a0b3118851..842c17ecb5 100644 --- a/docs/sources/k6/next/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md +++ b/docs/sources/k6/next/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md @@ -1,7 +1,7 @@ --- title: "Prevent cookie banners from blocking interactions" description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability." -weight: 100 +weight: 350 --- # Prevent cookie banners from blocking interactions diff --git a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/elementhandle/click.md b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/elementhandle/click.md index d94e564c49..23597e4301 100644 --- a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/elementhandle/click.md +++ b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/elementhandle/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/frame/click.md b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/frame/click.md index 2e909947c1..ba25067d19 100644 --- a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/frame/click.md +++ b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/frame/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/locator/click.md b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/locator/click.md index 0a847b6d12..0cee80aa84 100644 --- a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/locator/click.md +++ b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/locator/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6/latest/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/page/click.md b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/page/click.md index 6ce992b448..551ff9e1ce 100644 --- a/docs/sources/k6/v1.1.x/javascript-api/k6-browser/page/click.md +++ b/docs/sources/k6/v1.1.x/javascript-api/k6-browser/page/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md index 4c4ed6eeed..8d06ec3c0c 100644 --- a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md +++ b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md @@ -1,7 +1,7 @@ --- title: 'Use Page.close to clean up test resources' description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources' -weight: 01 +weight: 650 --- # Use Page.close to clean up test resources diff --git a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md new file mode 100644 index 0000000000..6434f2d983 --- /dev/null +++ b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md @@ -0,0 +1,42 @@ +--- +title: 'Handle 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: 50 +--- + +# Handle stale or dynamic elements after navigation + +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. + +To avoid these issues, wait for specific elements to appear before you continue 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 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. + +## Example + +```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', + }); +} +``` diff --git a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md index cda24fc2b5..a8157c4f70 100644 --- a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md +++ b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md @@ -3,7 +3,7 @@ title: 'Hybrid approach to performance' heading: 'Hybrid performance with k6 browser' head_title: 'Hybrid performance with k6 browser' description: 'An example on how to implement a hybrid approach to performance with k6 browser' -weight: 200 +weight: 100 --- # Hybrid performance with k6 browser diff --git a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md index a0b3118851..842c17ecb5 100644 --- a/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md +++ b/docs/sources/k6/v1.1.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md @@ -1,7 +1,7 @@ --- title: "Prevent cookie banners from blocking interactions" description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability." -weight: 100 +weight: 350 --- # Prevent cookie banners from blocking interactions diff --git a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/elementhandle/click.md b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/elementhandle/click.md index d94e564c49..23597e4301 100644 --- a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/elementhandle/click.md +++ b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/elementhandle/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/frame/click.md b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/frame/click.md index 2e909947c1..ba25067d19 100644 --- a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/frame/click.md +++ b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/frame/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/locator/click.md b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/locator/click.md index 0a847b6d12..0cee80aa84 100644 --- a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/locator/click.md +++ b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/locator/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6/latest/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/page/click.md b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/page/click.md index 6ce992b448..551ff9e1ce 100644 --- a/docs/sources/k6/v1.2.x/javascript-api/k6-browser/page/click.md +++ b/docs/sources/k6/v1.2.x/javascript-api/k6-browser/page/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md index 4c4ed6eeed..8d06ec3c0c 100644 --- a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md +++ b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md @@ -1,7 +1,7 @@ --- title: 'Use Page.close to clean up test resources' description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources' -weight: 01 +weight: 650 --- # Use Page.close to clean up test resources diff --git a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md new file mode 100644 index 0000000000..6434f2d983 --- /dev/null +++ b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md @@ -0,0 +1,42 @@ +--- +title: 'Handle 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: 50 +--- + +# Handle stale or dynamic elements after navigation + +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. + +To avoid these issues, wait for specific elements to appear before you continue 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 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. + +## Example + +```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', + }); +} +``` diff --git a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md index cda24fc2b5..a8157c4f70 100644 --- a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md +++ b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md @@ -3,7 +3,7 @@ title: 'Hybrid approach to performance' heading: 'Hybrid performance with k6 browser' head_title: 'Hybrid performance with k6 browser' description: 'An example on how to implement a hybrid approach to performance with k6 browser' -weight: 200 +weight: 100 --- # Hybrid performance with k6 browser diff --git a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md index a0b3118851..842c17ecb5 100644 --- a/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md +++ b/docs/sources/k6/v1.2.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md @@ -1,7 +1,7 @@ --- title: "Prevent cookie banners from blocking interactions" description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability." -weight: 100 +weight: 350 --- # Prevent cookie banners from blocking interactions diff --git a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/elementhandle/click.md b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/elementhandle/click.md index d94e564c49..23597e4301 100644 --- a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/elementhandle/click.md +++ b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/elementhandle/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/frame/click.md b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/frame/click.md index 2e909947c1..ba25067d19 100644 --- a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/frame/click.md +++ b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/frame/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/locator/click.md b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/locator/click.md index 0a847b6d12..0cee80aa84 100644 --- a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/locator/click.md +++ b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/locator/click.md @@ -20,7 +20,7 @@ Mouse click on the chosen element. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6/latest/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/page/click.md b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/page/click.md index 6ce992b448..551ff9e1ce 100644 --- a/docs/sources/k6/v1.3.x/javascript-api/k6-browser/page/click.md +++ b/docs/sources/k6/v1.3.x/javascript-api/k6-browser/page/click.md @@ -21,7 +21,7 @@ This method clicks on an element matching a `selector`. | options.button | string | `left` | The mouse button (`left`, `middle` or `right`) to use during the action. | | options.clickCount | number | `1` | The number of times the action is performed. | | options.delay | number | `0` | Milliseconds to wait between `mousedown` and `mouseup`. | -| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). | +| options.force | boolean | `false` | Setting this to `true` will bypass the actionability checks (`visible`, `stable`, `enabled`). Avoid using `force: true` in `click` actions, as it may mask underlying test design or app issues. It bypasses normal user interaction checks, and elements may not be clickable due to [cookie banner interference](https://grafana.com/docs/k6//using-k6-browser/recommended-practices/prevent-cookie-banners-blocking/). | | options.modifiers | string[] | `null` | `Alt`, `Control`, `Meta` or `Shift` modifiers keys pressed during the action. If not specified, currently pressed modifiers are used. | | options.noWaitAfter | boolean | `false` | If set to `true` and a navigation occurs from performing this action, it will not wait for it to complete. | | options.position | object | `null` | A point to use relative to the top left corner of the element. If not supplied, a visible point of the element is used. | diff --git a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md index 4c4ed6eeed..8d06ec3c0c 100644 --- a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md +++ b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md @@ -1,7 +1,7 @@ --- title: 'Use Page.close to clean up test resources' description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources' -weight: 01 +weight: 650 --- # Use Page.close to clean up test resources diff --git a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md new file mode 100644 index 0000000000..6434f2d983 --- /dev/null +++ b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md @@ -0,0 +1,42 @@ +--- +title: 'Handle 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: 50 +--- + +# Handle stale or dynamic elements after navigation + +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. + +To avoid these issues, wait for specific elements to appear before you continue 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 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. + +## Example + +```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', + }); +} +``` diff --git a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md index cda24fc2b5..a8157c4f70 100644 --- a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md +++ b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md @@ -3,7 +3,7 @@ title: 'Hybrid approach to performance' heading: 'Hybrid performance with k6 browser' head_title: 'Hybrid performance with k6 browser' description: 'An example on how to implement a hybrid approach to performance with k6 browser' -weight: 200 +weight: 100 --- # Hybrid performance with k6 browser diff --git a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md index a0b3118851..842c17ecb5 100644 --- a/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md +++ b/docs/sources/k6/v1.3.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md @@ -1,7 +1,7 @@ --- title: "Prevent cookie banners from blocking interactions" description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability." -weight: 100 +weight: 350 --- # Prevent cookie banners from blocking interactions diff --git a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md index 4c4ed6eeed..8d06ec3c0c 100644 --- a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md +++ b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/clean-up-test-resources-page-close.md @@ -1,7 +1,7 @@ --- title: 'Use Page.close to clean up test resources' description: 'Use Page.close in your browser tests to ensure k6 properly flushes metrics and cleans up resources' -weight: 01 +weight: 650 --- # Use Page.close to clean up test resources diff --git a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md new file mode 100644 index 0000000000..6434f2d983 --- /dev/null +++ b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/handle-dynamic-elements.md @@ -0,0 +1,42 @@ +--- +title: 'Handle 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: 50 +--- + +# Handle stale or dynamic elements after navigation + +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. + +To avoid these issues, wait for specific elements to appear before you continue 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 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. + +## Example + +```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', + }); +} +``` diff --git a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md index cda24fc2b5..a8157c4f70 100644 --- a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md +++ b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/hybrid-approach-to-performance.md @@ -3,7 +3,7 @@ title: 'Hybrid approach to performance' heading: 'Hybrid performance with k6 browser' head_title: 'Hybrid performance with k6 browser' description: 'An example on how to implement a hybrid approach to performance with k6 browser' -weight: 200 +weight: 100 --- # Hybrid performance with k6 browser diff --git a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md index a0b3118851..842c17ecb5 100644 --- a/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md +++ b/docs/sources/k6/v1.4.x/using-k6-browser/recommended-practices/prevent-cookie-banners-blocking.md @@ -1,7 +1,7 @@ --- title: "Prevent cookie banners from blocking interactions" description: "How to reveal and dismiss cookie banners in k6 browser tests to prevent blocked interactions and improve test reliability." -weight: 100 +weight: 350 --- # Prevent cookie banners from blocking interactions