Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

doc(clock): fix code snippets

Browse source
This commit is contained in:
Max Schmitt 2024-07-05 12:01:54 +02:00
parent 1c69d3e175
commit 4e47e2b35f
1 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
docs/src/clock.md
View file

@ -43,7 +43,7 @@ That way the time flows naturally, but `Date.now` always returns a fixed value.
<script> <script>
const renderTime = () => { const renderTime = () => {
document.getElementById('current-time').textContent = document.getElementById('current-time').textContent =
new Date().toLocaleTimeString(); new Date().toLocaleString();
}; };
setInterval(renderTime, 1000); setInterval(renderTime, 1000);
</script> </script>
@ -69,7 +69,7 @@ In this case, you can install the clock and fast forward to the time of interest
<script> <script>
const renderTime = () => { const renderTime = () => {
document.getElementById('current-time').textContent = document.getElementById('current-time').textContent =
new Date().toLocaleTimeString(); new Date().toLocaleString();
}; };
setInterval(renderTime, 1000); setInterval(renderTime, 1000);
</script> </script>
@ -176,6 +176,26 @@ Inactivity monitoring is a common feature in web applications that logs out user
Testing this feature can be tricky because you need to wait for a long time to see the effect. Testing this feature can be tricky because you need to wait for a long time to see the effect.
With the help of the clock, you can speed up time and test this feature quickly. With the help of the clock, you can speed up time and test this feature quickly.
```html
<div id="remaining-time" data-testid="remaining-time"></div>
<script>
const endTime = new Date().getTime() + 5 * 60_000;
const renderTime = () => {
const diffInSeconds = Math.round((endTime - new Date().getTime()) / 1000);
if (diffInSeconds <= 0) {
document.getElementById('remaining-time').textContent =
'You have been logged out due to inactivity.';
} else {
document.getElementById('remaining-time').textContent =
`You will be logged out in ${diffInSeconds} seconds.`;
}
setTimeout(renderTime, 1000);
};
renderTime();
</script>
<button type="button">Interaction</button>
```
```js ```js
// Initial time does not matter for the test, so we can pick current time. // Initial time does not matter for the test, so we can pick current time.
await page.clock.install(); await page.clock.install();
@ -186,7 +206,7 @@ await page.getByRole('button').click();
// Fast forward time 5 minutes as if the user did not do anything. // Fast forward time 5 minutes as if the user did not do anything.
// Fast forward is like closing the laptop lid and opening it after 5 minutes. // Fast forward is like closing the laptop lid and opening it after 5 minutes.
// All the timers due will fire once immediately, as in the real browser. // All the timers due will fire once immediately, as in the real browser.
await page.clock.fastForward('5:00'); await page.clock.fastForward('05:00');
// Check that the user was logged out automatically. // Check that the user was logged out automatically.
await expect(page.getByText('You have been logged out due to inactivity.')).toBeVisible(); await expect(page.getByText('You have been logged out due to inactivity.')).toBeVisible();
@ -202,7 +222,7 @@ await page.get_by_role("button").click()
# Fast forward time 5 minutes as if the user did not do anything. # Fast forward time 5 minutes as if the user did not do anything.
# Fast forward is like closing the laptop lid and opening it after 5 minutes. # Fast forward is like closing the laptop lid and opening it after 5 minutes.
# All the timers due will fire once immediately, as in the real browser. # All the timers due will fire once immediately, as in the real browser.
await page.clock.fast_forward("5:00") await page.clock.fast_forward("05:00")
# Check that the user was logged out automatically. # Check that the user was logged out automatically.
await expect(page.getByText("You have been logged out due to inactivity.")).toBeVisible() await expect(page.getByText("You have been logged out due to inactivity.")).toBeVisible()
@ -218,7 +238,7 @@ page.get_by_role("button").click()
# Fast forward time 5 minutes as if the user did not do anything. # Fast forward time 5 minutes as if the user did not do anything.
# Fast forward is like closing the laptop lid and opening it after 5 minutes. # Fast forward is like closing the laptop lid and opening it after 5 minutes.
# All the timers due will fire once immediately, as in the real browser. # All the timers due will fire once immediately, as in the real browser.
page.clock.fast_forward("5:00") page.clock.fast_forward("05:00")
# Check that the user was logged out automatically. # Check that the user was logged out automatically.
expect(page.get_by_text("You have been logged out due to inactivity.")).to_be_visible() expect(page.get_by_text("You have been logged out due to inactivity.")).to_be_visible()
@ -236,7 +256,7 @@ locator.click();
// Fast forward time 5 minutes as if the user did not do anything. // Fast forward time 5 minutes as if the user did not do anything.
// Fast forward is like closing the laptop lid and opening it after 5 minutes. // Fast forward is like closing the laptop lid and opening it after 5 minutes.
// All the timers due will fire once immediately, as in the real browser. // All the timers due will fire once immediately, as in the real browser.
page.clock().fastForward("5:00"); page.clock().fastForward("05:00");
// Check that the user was logged out automatically. // Check that the user was logged out automatically.
assertThat(page.getByText("You have been logged out due to inactivity.")).isVisible(); assertThat(page.getByText("You have been logged out due to inactivity.")).isVisible();
@ -253,7 +273,7 @@ await page.GetByRole("button").ClickAsync();
// Fast forward time 5 minutes as if the user did not do anything. // Fast forward time 5 minutes as if the user did not do anything.
// Fast forward is like closing the laptop lid and opening it after 5 minutes. // Fast forward is like closing the laptop lid and opening it after 5 minutes.
// All the timers due will fire once immediately, as in the real browser. // All the timers due will fire once immediately, as in the real browser.
await Page.Clock.FastForwardAsync("5:00"); await Page.Clock.FastForwardAsync("05:00");
// Check that the user was logged out automatically. // Check that the user was logged out automatically.
await Expect(Page.GetByText("You have been logged out due to inactivity.")).ToBeVisibleAsync(); await Expect(Page.GetByText("You have been logged out due to inactivity.")).ToBeVisibleAsync();
@ -269,7 +289,7 @@ animation frames in the process to achieve a fine-grained control over the passa
<script> <script>
const renderTime = () => { const renderTime = () => {
document.getElementById('current-time').textContent = document.getElementById('current-time').textContent =
new Date().toLocaleTimeString(); new Date().toLocaleString();
}; };
setInterval(renderTime, 1000); setInterval(renderTime, 1000);
</script> </script>