feat: add clock example (#15)

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.DS_Store

package-lock.json

@@ -9,22 +9,22 @@
       "version": "0.0.1",
       "license": "Apache-2.0",
       "devDependencies": {
-        "@playwright/test": "^1.44.0"
+        "@playwright/test": "^1.45.0"
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.44.0",
+      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
-      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.44.0"
+        "playwright": "1.45.0"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/fsevents": {
@@ -42,33 +42,33 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.44.0",
+      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
-      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.44.0"
+        "playwright-core": "1.45.0"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.44.0",
+      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
-      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
+      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     }
   }

package.json

@@ -4,6 +4,6 @@
   "description": "This repo is used to demonstrate various testing scenarios with [Playwright](https://playwright.dev/) 🎭 with node.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@playwright/test": "^1.44.0"
+    "@playwright/test": "^1.45.0"
   }
 }

tests/clock/clock.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test("set fixed time", async ({ page }) => {
+  await page.clock.setFixedTime(new Date("2024-02-02T10:00:00"));
+  await page.goto("https://demo.playwright.dev/clock");
+  await expect(page.getByTestId("clock")).toHaveText("10:00:00");
+});
+
+test("manually advance time", async ({ page }) => {
+  await page.clock.install({ time: new Date("2024-02-02T08:00:00") });
+  await page.goto("https://demo.playwright.dev/clock");
+
+  await page.clock.pauseAt(new Date("2024-02-02T10:00:00"));
+  await expect(page.getByTestId("clock")).toHaveText("10:00:00");
+
+  await page.clock.fastForward("30:00");
+  await expect(page.getByTestId("clock")).toHaveText("10:30:00");
+});
+
+test("test inactivity monitoring", async ({ page }) => {
+  await page.clock.install();
+  await page.goto("https://demo.playwright.dev/timer");
+
+  await expect(page.getByText("Flash offer")).toBeVisible();
+
+  await page.clock.fastForward("05:00");
+
+  await expect(page.getByText("Offer Expired")).toBeVisible();
+});

tests/clock/readme.md

@@ -0,0 +1,20 @@
+---
+name: Playwright - Clock API
+description: "This sample demonstrates how to test a clock using Playwright's clock API with fixed time, manually advancing time and testing inactivity monitoring"
+page_type: sample
+languages:
+- typescript
+- javascript
+products:
+- playwright
+urlFragment: clock
+---
+
+# Clock API
+
+This sample demonstrates how to test a clock using Playwright's clock API with fixed time, manually advancing time and testing inactivity monitoring.
+
+For more information about the sample see:
+
+- [Clock guide](https://playwright.dev/docs/clock)
+- [Release video on the Clock API](https://youtu.be/54_aC-rVKHg)