Setup Playwright UI monitoring to stabilise automated dependency updates

.github/dependabot.yml

@@ -1,11 +1,6 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
 version: 2
 updates:
-  - package-ecosystem: "" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: "monthly"
+      interval: "weekly"

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright tests
+
+on:
+  push:
+    branches: ["master"]
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - run: npm run build-only -- --mode dev
+      - run: npm run test:e2e -- --project=chromium
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

e2e/vue.spec.ts

@@ -1,8 +1,41 @@
 import { test, expect } from '@playwright/test';
 
-// See here how to get started:
-// https://playwright.dev/docs/intro
-test('visits the app root url', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
-})
+test.describe('Home page', () => {
+  test.beforeEach(async ({ context }) => {
+    await context.clearCookies();
+    await context.addInitScript(() => localStorage.clear());
+  });
+
+  test('shows header with logo and city search input', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('header a[href="/about"] img')).toBeVisible();
+    await expect(page.locator('.vs__search')).toBeVisible();
+    await expect(page.locator('.vs__search')).toHaveAttribute('placeholder', 'Enter a city name. Ex: Paris');
+    await expect(page.locator('button[aria-label="Use device location"]')).toBeVisible();
+  });
+
+  test('matches screenshot', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveScreenshot('home.png');
+  });
+});
+
+test.describe('About page', () => {
+  test('shows settings and info sections', async ({ page }) => {
+    await page.goto('/about');
+
+    await expect(page.locator('header a[href="/"]')).toBeVisible();
+    await expect(page.locator('h3').filter({ hasText: 'Models' })).toBeVisible();
+    await expect(page.locator('h3').filter({ hasText: 'Forecast length' })).toBeVisible();
+    await expect(page.locator('h3').filter({ hasText: 'Build date' })).toBeVisible();
+    await expect(page.locator('h3').filter({ hasText: 'Source code' })).toBeVisible();
+    await expect(page.locator('a[href="https://github.com/artonge/meteo"]')).toBeVisible();
+  });
+
+  test('matches screenshot', async ({ page }) => {
+    await page.goto('/about');
+    await expect(page).toHaveScreenshot('about.png');
+  });
+});

playwright.config.ts

@@ -28,7 +28,13 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['html', { open: 'never' }]],
+
+  /* Update snapshots only when missing so the first CI run creates the baselines */
+  updateSnapshots: 'missing',
+
+  /* Store snapshots next to the test files */
+  snapshotPathTemplate: '{testDir}/{testFilePath}-snapshots/{arg}-{projectName}{ext}',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */