Merge pull request #5 from twm/playwright-projects

Playwright: Desktop, Tablet and Phone projects
twm · Sep 2, 2024 · 8c3b2a9 · 8c3b2a9
2 parents 3f20e44 + deb8528
commit 8c3b2a9
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,6 +1,32 @@
 import type { PlaywrightTestConfig } from "@playwright/test"
+import { devices } from "@playwright/test"
 
 const config: PlaywrightTestConfig = {
+    projects: [
+        {
+            name: "Desktop",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "Tablet",
+            use: { ...devices["Galaxy Tab S4"] },
+        },
+        {
+            name: "Phone", // Galaxy S22
+            use: {
+                userAgent:
+                    "Mozilla/5.0 (Android 14; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0",
+                viewport: {
+                    width: 432,
+                    height: 779,
+                },
+                deviceScaleFactor: 2.5,
+                isMobile: false, // Should be true, but not supported by Firefox.
+                hasTouch: true,
+                defaultBrowserType: "firefox",
+            },
+        },
+    ],
     webServer: {
         command: "npm run build && npm run preview",
         port: 4173,

diff --git a/tests/test.ts b/tests/test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test"
 
-test("home page has expected title", async ({ page }) => {
+test("calculator layout", async ({ page }) => {
     await page.goto("/")
     const title = "Picture Frame Calculator"
     await expect(page.locator("h1")).toHaveText(title)

diff --git a/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png
diff --git a/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png
diff --git a/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png
diff --git a/tests/test.ts-snapshots/home-page-has-expected-title-1-linux.png b/tests/test.ts-snapshots/home-page-has-expected-title-1-linux.png