From aa68aa8833f01446f129afca7e0de18e4183bb36 Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Sat, 28 Sep 2024 15:18:09 -0700 Subject: [PATCH] test: Setup playwright testing --- README.md | 14 +++++++++- flake.nix | 10 ++++++- package-lock.json | 62 ++++++++++++++++++++++------------------- package.json | 2 +- src/routes/+page.svelte | 6 ++-- tests/home.spec.ts | 7 +++++ tests/test.ts | 6 ---- 7 files changed, 66 insertions(+), 41 deletions(-) create mode 100644 tests/home.spec.ts delete mode 100644 tests/test.ts diff --git a/README.md b/README.md index e10ac61..0898a1f 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,21 @@ directory. The website will be built statically in `build/`. Note that changing ## Developing -Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then start the dev server with +Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then +start the dev server with ```bash npm run dev [-- --open] ``` +### Testing + +To run tests +``` bash +npx playwright test +``` + +All tests must have the suffix `.spec.[jt]s`. Be cautious while updating +`playwright` since the versions in `nixpkgs` and `node` must exactly match. + + diff --git a/flake.nix b/flake.nix index d98fc0b..57199f3 100644 --- a/flake.nix +++ b/flake.nix @@ -21,6 +21,7 @@ "x86_64-darwin" ]; perSystem = { system, pkgs, ... }: let + nodejs = pkgs.nodejs_22; module = { lib, config, @@ -61,8 +62,15 @@ }; }; devShells.default = pkgs.mkShell { + packages = [ + pkgs.playwright-driver.browsers + ]; + PLAYWRIGHT_NODEJS_PATH = "${nodejs}/bin/node"; + PLAYWRIGHT_BROWSERS_PATH = "${pkgs.playwright-driver.browsers}"; + PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = 1; + PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS = 1; buildInputs = [ - pkgs.nodejs_22 + nodejs ]; }; }; diff --git a/package-lock.json b/package-lock.json index 3a8c52b..a3b3f37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "tailwind-variants": "^0.2.1" }, "devDependencies": { - "@playwright/test": "^1.28.1", + "@playwright/test": "^1.40.0", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-static": "^3.0.5", "@sveltejs/kit": "^2.0.0", @@ -759,36 +759,20 @@ } }, "node_modules/@playwright/test": { - "version": "1.47.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.0.tgz", - "integrity": "sha512-SgAdlSwYVpToI4e/IH19IHHWvoijAYH5hu2MWSXptRypLSnzj51PcGD+rsOXFayde4P9ZLi+loXVwArg6IUkCA==", + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz", + "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==", + "deprecated": "Please update to the latest version of Playwright to test up-to-date browsers.", "dev": true, + "license": "Apache-2.0", "dependencies": { - "playwright": "1.47.0" + "playwright": "1.40.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=18" - } - }, - "node_modules/@playwright/test/node_modules/playwright": { - "version": "1.47.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.0.tgz", - "integrity": "sha512-jOWiRq2pdNAX/mwLiwFYnPHpEZ4rM+fRSQpRHwEwZlP2PUANvL3+aJOF/bvISMhFD30rqMxUB4RJx9aQbfh4Ww==", - "dev": true, - "dependencies": { - "playwright-core": "1.47.0" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=18" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@polka/url": { @@ -3485,16 +3469,36 @@ "node": ">= 6" } }, - "node_modules/playwright-core": { - "version": "1.47.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.0.tgz", - "integrity": "sha512-1DyHT8OqkcfCkYUD9zzUTfg7EfTd+6a8MkD/NWOvjo0u/SCNd5YmY/lJwFvUZOxJbWNds+ei7ic2+R/cRz/PDg==", + "node_modules/playwright": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz", + "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==", "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.40.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz", + "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==", + "dev": true, + "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=18" + "node": ">=16" } }, "node_modules/postcss": { diff --git a/package.json b/package.json index 855fcfb..019d7fd 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "prepare": "svelte-kit sync" }, "devDependencies": { - "@playwright/test": "^1.28.1", + "@playwright/test": "^1.40.0", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-static": "^3.0.5", "@sveltejs/kit": "^2.0.0", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3f3b409..89861ee 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -65,7 +65,7 @@ -
+
@@ -86,7 +86,7 @@
-
+
{ + await page.goto('/'); + await expect(page.locator('main')).toBeVisible(); + await expect(page.locator('#background')).toBeVisible(); +}); diff --git a/tests/test.ts b/tests/test.ts deleted file mode 100644 index 9985ce1..0000000 --- a/tests/test.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { expect, test } from '@playwright/test'; - -test('home page has expected h1', async ({ page }) => { - await page.goto('/'); - await expect(page.locator('h1')).toBeVisible(); -});