You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/sources/v0.52.x/using-k6-browser/recommended-practices/simulate-user-input-delay.md
+13-12Lines changed: 13 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,12 @@
1
1
---
2
-
title: 'Simulating user input delay'
2
+
title: 'Simulate user input delay'
3
3
description: 'A guide on how to simulate user input delay.'
4
4
weight: 04
5
5
---
6
6
7
-
We will demonstrate how best to work with `sleep` in `k6` and the various `wait*` prepended methods that are available in `k6/browser` to simulate user input delay, wait for navigations, and wait for element state changes. By the end of this page, you should be able to successfully use the correct API where necessary.
7
+
# Simulate user input delay
8
+
9
+
On this page, you'll learn how to best work with `sleep` in `k6` and the various `wait*` prepended methods available in `k6/browser` to simulate user input delay, wait for navigations, and wait for element state changes. By the end of this page, you should be able to successfully use the correct API where necessary.
8
10
9
11
{{< admonition type="note" >}}
10
12
@@ -17,15 +19,14 @@ While using the `sleep` or `page.waitForTimeout` functions to wait for element s
17
19
[sleep](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6/sleep) is a first class function built into k6. It's main use is to _"suspend VU execution for the specified duration"_ which is most useful when you want to simulate user input delay, such as:
18
20
19
21
- Navigating to a page.
20
-
- Sleeping for a 1 second, which is to simulate a user looking for a specific element on the page.
22
+
- Sleeping for one second to simulate a user looking for a specific element on the page.
21
23
- Clicking on the element.
22
-
- etc.
23
24
24
25
{{< admonition type="warning" >}}
25
26
26
-
`sleep` is a synchronous function that blocks the JS event loop, which means that all asynchronous work will also be suspended until the`sleep` completes.
27
+
`sleep` is a synchronous function that blocks the JavaScript event loop, which means that all asynchronous work will also be suspended until `sleep` completes.
27
28
28
-
The browser module predominantly provides asynchronous APIs, and so it's best to avoid working with `sleep`, and instead **we recommend you use [page.waitForTimeout](#pagewaitfortimeout)**.
29
+
The browser module predominantly provides asynchronous APIs, so it's best to avoid working with `sleep`. Instead, _use the [page.waitForTimeout](#pagewaitfortimeout) function_.
29
30
30
31
{{< /admonition >}}
31
32
@@ -39,11 +40,11 @@ In the browser modules there are various asynchronous APIs that can be used to w
39
40
|[page.waitForLoadState](#pagewaitforloadstate)| Waits for the specified page life cycle event. |
40
41
|[page.waitForNavigation](#pagewaitfornavigation)| Waits for the navigation to complete after one starts. |
41
42
|[locator.waitFor](#locatorwaitfor)| Wait for the element to be in a particular state. |
42
-
|[page.waitForTimeout](#pagewaitfortimeout)| Waits the given time. **Use this instead of `sleep` in your frontend tests.**|
43
+
|[page.waitForTimeout](#pagewaitfortimeout)| Waits the given time. _Use this instead of `sleep` in your frontend tests_.|
43
44
44
45
## page.waitForFunction
45
46
46
-
[page.waitForFunction](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforfunction) is useful when you want more control over when a test progresses with a javascript function that returns true when a condition (or many conditions) is met. It can be used to poll for changes in the dom or non dom elements and variables.
47
+
[page.waitForFunction](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforfunction) is useful when you want more control over when a test progresses with a javascript function that returns true when a condition (or many conditions) is met. It can be used to poll for changes in the DOM or non-DOM elements and variables.
47
48
48
49
{{< code >}}
49
50
@@ -98,7 +99,7 @@ export default async function () {
98
99
99
100
## page.waitForLoadState
100
101
101
-
[page.waitForLoadState](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforloadstate) is useful when there’s no explicit navigation, but you need to wait for the page or network to settle. This is mainly used when working with singlepage applications or when no full page reloads happen.
102
+
[page.waitForLoadState](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforloadstate) is useful when there’s no explicit navigation, but you need to wait for the page or network to settle. This is mainly used when working with single-page applications or when no full page reloads happen.
102
103
103
104
{{< code >}}
104
105
@@ -140,7 +141,7 @@ export default async function () {
140
141
141
142
## page.waitForNavigation
142
143
143
-
[page.waitForNavigation](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfornavigation) is a very useful API when performing other actions that could start a page navigation, and they don't automatically wait for a navigation to end. Usually you'll find it in our examples with a `click` API call. Note that [goto](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/goto) is an example of an API that **doesn't** require `waitForNavigation` since it will automatically wait for the navigation to complete before returning.
144
+
[page.waitForNavigation](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfornavigation) is a very useful API when performing other actions that could start a page navigation, and they don't automatically wait for the navigation to end. Usually, you'll find it in our examples with a `click` API call. Note that [goto](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/goto) is an example of an API that _doesn't_ require `waitForNavigation` since it will automatically wait for the navigation to complete before returning.
144
145
145
146
It's important to call this in a [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) along with the API that will cause the navigation to start.
146
147
@@ -187,7 +188,7 @@ export default async function () {
187
188
188
189
## locator.waitFor
189
190
190
-
[locator.waitFor](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/waitfor/) will wait until the element meets the waiting criteria. It's useful when dealing with dynamic websites where elements may take time to appear or change state (they might load after some delay due to async calls, JavaScript execution, etc.).
191
+
[locator.waitFor](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/waitfor/) will wait until the element meets the waiting criteria. It's useful when dealing with dynamic websites where elements may take time to appear or change state. For example, if elements load after some delay due to async calls, or because of slow JavaScript execution.
191
192
192
193
{{< code >}}
193
194
@@ -222,7 +223,7 @@ export default async function () {
222
223
223
224
## page.waitForTimeout
224
225
225
-
[page.waitForTimeout](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfortimeout) will wait the given amount of time. It's functionally the same as k6's [sleep](#What-is-`sleep`) but it is asynchronous which means it will not block the event loop, thus allowing the background tasks to continue to be worked on. We're also planning on instruementing it with tracing to then allow us visualize it in the timeline in grafana cloud k6.
226
+
[page.waitForTimeout](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfortimeout) will wait the given amount of time. It's functionally the same as k6's [sleep](#What-is-`sleep`), but it's asynchronous, which means it will not block the event loop and allows the background tasks to continue to be worked on.
Copy file name to clipboardExpand all lines: docs/sources/v0.53.x/using-k6-browser/recommended-practices/simulate-user-input-delay.md
+19-18Lines changed: 19 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,12 @@
1
1
---
2
-
title: 'Simulating user input delay'
2
+
title: 'Simulate user input delay'
3
3
description: 'A guide on how to simulate user input delay.'
4
4
weight: 04
5
5
---
6
6
7
-
We will demonstrate how best to work with `sleep` in `k6` and the various `wait*` prepended methods that are available in `k6/browser` to simulate user input delay, wait for navigations, and wait for element state changes. By the end of this page, you should be able to successfully use the correct API where necessary.
7
+
# Simulate user input delay
8
+
9
+
On this page, you'll learn how to best work with `sleep` in `k6` and the various `wait*` prepended methods available in `k6/browser` to simulate user input delay, wait for navigations, and wait for element state changes. By the end of this page, you should be able to successfully use the correct API where necessary.
8
10
9
11
{{< admonition type="note" >}}
10
12
@@ -17,33 +19,32 @@ While using the `sleep` or `page.waitForTimeout` functions to wait for element s
17
19
[sleep](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6/sleep) is a first class function built into k6. It's main use is to _"suspend VU execution for the specified duration"_ which is most useful when you want to simulate user input delay, such as:
18
20
19
21
- Navigating to a page.
20
-
- Sleeping for a 1 second, which is to simulate a user looking for a specific element on the page.
22
+
- Sleeping for one second to simulate a user looking for a specific element on the page.
21
23
- Clicking on the element.
22
-
- etc.
23
24
24
25
{{< admonition type="warning" >}}
25
26
26
-
`sleep` is a synchronous function that blocks the JS event loop, which means that all asynchronous work will also be suspended until the`sleep` completes.
27
+
`sleep` is a synchronous function that blocks the JavaScript event loop, which means that all asynchronous work will also be suspended until `sleep` completes.
27
28
28
-
The browser module predominantly provides asynchronous APIs, and so it's best to avoid working with `sleep`, and instead **we recommend you use [page.waitForTimeout](#pagewaitfortimeout)**.
29
+
The browser module predominantly provides asynchronous APIs, so it's best to avoid working with `sleep`. Instead, _use the [page.waitForTimeout](#pagewaitfortimeout) function_.
29
30
30
31
{{< /admonition >}}
31
32
32
33
# What is `wait*`?
33
34
34
35
In the browser modules there are various asynchronous APIs that can be used to wait for certain states:
|[page.waitForFunction](#pagewaitforfunction)| Waits for the given function to return a truthy value. |
40
+
|[page.waitForLoadState](#pagewaitforloadstate)| Waits for the specified page life cycle event. |
41
+
|[page.waitForNavigation](#pagewaitfornavigation)| Waits for the navigation to complete after one starts. |
42
+
|[locator.waitFor](#locatorwaitfor)| Wait for the element to be in a particular state. |
43
+
|[page.waitForTimeout](#pagewaitfortimeout)| Waits the given time. _Use this instead of `sleep` in your frontend tests_.|
43
44
44
45
## page.waitForFunction
45
46
46
-
[page.waitForFunction](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforfunction) is useful when you want more control over when a test progresses with a javascript function that returns true when a condition (or many conditions) is met. It can be used to poll for changes in the dom or non dom elements and variables.
47
+
[page.waitForFunction](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforfunction) is useful when you want more control over when a test progresses with a javascript function that returns true when a condition (or many conditions) is met. It can be used to poll for changes in the DOM or non-DOM elements and variables.
47
48
48
49
{{< code >}}
49
50
@@ -98,7 +99,7 @@ export default async function () {
98
99
99
100
## page.waitForLoadState
100
101
101
-
[page.waitForLoadState](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforloadstate) is useful when there’s no explicit navigation, but you need to wait for the page or network to settle. This is mainly used when working with singlepage applications or when no full page reloads happen.
102
+
[page.waitForLoadState](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitforloadstate) is useful when there’s no explicit navigation, but you need to wait for the page or network to settle. This is mainly used when working with single-page applications or when no full page reloads happen.
102
103
103
104
{{< code >}}
104
105
@@ -140,7 +141,7 @@ export default async function () {
140
141
141
142
## page.waitForNavigation
142
143
143
-
[page.waitForNavigation](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfornavigation) is a very useful API when performing other actions that could start a page navigation, and they don't automatically wait for a navigation to end. Usually you'll find it in our examples with a `click` API call. Note that [goto](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/goto) is an example of an API that **doesn't** require `waitForNavigation` since it will automatically wait for the navigation to complete before returning.
144
+
[page.waitForNavigation](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfornavigation) is a very useful API when performing other actions that could start a page navigation, and they don't automatically wait for the navigation to end. Usually, you'll find it in our examples with a `click` API call. Note that [goto](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/goto) is an example of an API that _doesn't_ require `waitForNavigation` since it will automatically wait for the navigation to complete before returning.
144
145
145
146
It's important to call this in a [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) along with the API that will cause the navigation to start.
146
147
@@ -187,7 +188,7 @@ export default async function () {
187
188
188
189
## locator.waitFor
189
190
190
-
[locator.waitFor](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/waitfor/) will wait until the element meets the waiting criteria. It's useful when dealing with dynamic websites where elements may take time to appear or change state (they might load after some delay due to async calls, JavaScript execution, etc.).
191
+
[locator.waitFor](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/waitfor/) will wait until the element meets the waiting criteria. It's useful when dealing with dynamic websites where elements may take time to appear or change state. For example, if elements load after some delay due to async calls, or because of slow JavaScript execution.
191
192
192
193
{{< code >}}
193
194
@@ -222,7 +223,7 @@ export default async function () {
222
223
223
224
## page.waitForTimeout
224
225
225
-
[page.waitForTimeout](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfortimeout) will wait the given amount of time. It's functionally the same as k6's [sleep](#What-is-`sleep`) but it is asynchronous which means it will not block the event loop, thus allowing the background tasks to continue to be worked on. We're also planning on instruementing it with tracing to then allow us visualize it in the timeline in grafana cloud k6.
226
+
[page.waitForTimeout](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/waitfortimeout) will wait the given amount of time. It's functionally the same as k6's [sleep](#What-is-`sleep`), but it's asynchronous, which means it will not block the event loop and allows the background tasks to continue to be worked on.
0 commit comments