diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e1bbb26..aade667 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,5 +49,5 @@ jobs: # practices and SEO at 100, no layout shift, a page under 250 KB. - name: Browser tests and Lighthouse run: | - npx playwright install --with-deps chromium + npx playwright install --with-deps chromium webkit npm test diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d04c62e..d678eb6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -19,7 +19,8 @@ and hold no text of their own, except section headings. theme follows the clock, so change the hour, or set `data-season` and `data-time` on `` in the browser's inspector. 3. Before pushing: `npm run format`, then `npm run build && npm test`. - The first time, `npx playwright install chromium` downloads the test browser. + The first time, `npx playwright install chromium webkit` downloads the test + browsers: Chrome, and Safari's engine. 4. Open a pull request into `develop`. CI runs the same checks; it must pass. 5. To publish, merge `develop` into `master`. `deploy.yml` builds and deploys. @@ -29,7 +30,7 @@ and hold no text of their own, except section headings. | ---------------------------------- | ------------------------------- | -------------------------- | | Formatting | Prettier, no diff | `npm run format` | | Types | `astro check`, strict, 0 errors | `npm run build` | -| Browser tests | All pass | `tests/` | +| Browser tests (Chrome, Safari) | All pass | `tests/` | | Lighthouse performance | ≥ 95 | `tests/lighthouse.spec.ts` | | Accessibility, best practices, SEO | 100 | `tests/lighthouse.spec.ts` | | Layout shift (CLS) | ≤ 0.01 | `tests/lighthouse.spec.ts` | diff --git a/playwright.config.ts b/playwright.config.ts index b98a709..ac9ca9c 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -16,14 +16,21 @@ export default defineConfig({ timezoneId: 'Europe/Brussels', locale: 'en-GB', }, + // Every test in Chrome and in Safari's engine, which draws some things its + // own way: it once cropped the name's T while it faded in. projects: [ { - name: 'site', + name: 'chrome', testIgnore: 'lighthouse.spec.ts', use: { ...devices['Desktop Chrome'] }, }, + { + name: 'safari', + testIgnore: 'lighthouse.spec.ts', + use: { ...devices['Desktop Safari'] }, + }, // Last, alone: performance is not measured while other tests run. - { name: 'lighthouse', testMatch: 'lighthouse.spec.ts', dependencies: ['site'] }, + { name: 'lighthouse', testMatch: 'lighthouse.spec.ts', dependencies: ['chrome', 'safari'] }, ], webServer: { command: `npm run preview -- --port ${port} --ignore-lock`,