From 7dbc947abd7596a10bc7625a0443417acefe6403 Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Sat, 23 Aug 2025 17:51:04 +0200 Subject: [PATCH] feat: add playwright --- .gitignore | 8 +- package-lock.json | 64 +++++++++++++++ package.json | 4 +- playwright.config.ts | 79 +++++++++++++++++++ .../tests/reactiveCrossFramework.spec.ts | 10 +++ 5 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 playwright.config.ts create mode 100644 src/frontends/tests/reactiveCrossFramework.spec.ts diff --git a/.gitignore b/.gitignore index 41f86ea..c680351 100644 --- a/.gitignore +++ b/.gitignore @@ -33,4 +33,10 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json # Finder (MacOS) folder config .DS_Store -.astro \ No newline at end of file +.astro + +# Playwright +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/package-lock.json b/package-lock.json index ffe1ecb..e4730f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "vue": "3.5.19" }, "devDependencies": { + "@playwright/test": "^1.55.0", "@types/node": "24.3.0", "@types/react": "19.1.10", "@types/react-dom": "19.1.7", @@ -1407,6 +1408,22 @@ "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==", "license": "MIT" }, + "node_modules/@playwright/test": { + "version": "1.55.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0.tgz", + "integrity": "sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.55.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@polka/url": { "version": "1.0.0-next.29", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz", @@ -7520,6 +7537,53 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.55.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0.tgz", + "integrity": "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.55.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.55.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz", + "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.6", "funding": [ diff --git a/package.json b/package.json index 5b48ace..9d5523a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "astro build", "preview": "astro preview", "astro": "astro", - "test": "vitest" + "test": "vitest", + "test:e2e": "playwright test" }, "dependencies": { "@astrojs/react": "4.3.0", @@ -32,6 +33,7 @@ "vue": "3.5.19" }, "devDependencies": { + "@playwright/test": "^1.55.0", "@types/node": "24.3.0", "@types/react": "19.1.10", "@types/react-dom": "19.1.7", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..b51563c --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,79 @@ +import { defineConfig, devices } from "@playwright/test"; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: "./src/frontends/tests", + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* 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", + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: "http://localhost:4321", + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: "on-first-retry", + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] }, + }, + + { + name: "firefox", + use: { ...devices["Desktop Firefox"] }, + }, + + { + name: "webkit", + use: { ...devices["Desktop Safari"] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: "npm run dev", + url: "http://localhost:4321", + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/src/frontends/tests/reactiveCrossFramework.spec.ts b/src/frontends/tests/reactiveCrossFramework.spec.ts new file mode 100644 index 0000000..21f6e0b --- /dev/null +++ b/src/frontends/tests/reactiveCrossFramework.spec.ts @@ -0,0 +1,10 @@ +import { test, expect } from "@playwright/test"; + +test("components load", async ({ page }) => { + await page.goto("/"); + await page.waitForSelector(".vue astro-island"); + + await expect(page.locator(".vue .title")).toHaveText("vue"); + await expect(page.locator(".react .title")).toHaveText("react"); + await expect(page.locator(".svelte .title")).toHaveText("svelte"); +});