From 6c3df2a42064e049283bdf2f2ff864119f0862fe Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Tue, 1 Jul 2025 09:45:59 +0900 Subject: [PATCH 01/10] =?UTF-8?q?update:=20`package.json`=20=E2=80=94=20pl?= =?UTF-8?q?aywright=20and=20types=20to=20devDependencies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 82 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 84 insertions(+) diff --git a/package-lock.json b/package-lock.json index 02ed59a..3ac0b9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,8 @@ "devDependencies": { "@11ty/eleventy": "^3.1.1", "@11ty/eleventy-plugin-rss": "^2.0.4", + "@playwright/test": "^1.53.1", + "@types/node": "^24.0.7", "autoprefixer": "^10.4.21", "postcss": "^8.5.5", "postcss-cli": "^11.0.1", @@ -1042,6 +1044,22 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/@playwright/test": { + "version": "1.53.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.1.tgz", + "integrity": "sha512-Z4c23LHV0muZ8hfv4jw6HngPJkbbtZxTkxPNIg7cJcTc9C28N/p2q7g3JZS2SiKBBHJ3uM1dgDye66bB7LEk5w==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.53.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@rgrove/parse-xml": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz", @@ -1109,6 +1127,16 @@ "license": "MIT", "peer": true }, + "node_modules/@types/node": { + "version": "24.0.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.7.tgz", + "integrity": "sha512-YIEUUr4yf8q8oQoXPpSlnvKNVKDQlPMWrmOcgzoduo7kvA2UF0/BwJ/eMKFTiTtkNL17I0M6Xe2tvwFU7be6iw==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~7.8.0" + } + }, "node_modules/a-sync-waterfall": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", @@ -4291,6 +4319,53 @@ "node": ">=0.10.0" } }, + "node_modules/playwright": { + "version": "1.53.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.1.tgz", + "integrity": "sha512-LJ13YLr/ocweuwxyGf1XNFWIU4M2zUSo149Qbp+A4cpwDjsxRPj7k6H25LBrEHiEwxvRbD8HdwvQmRMSvquhYw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.53.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.53.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.1.tgz", + "integrity": "sha512-Z46Oq7tLAyT0lGoFx4DOuB1IA9D1TPj0QkYxpPVUnGDqHHvDpCftu1J2hM2PiWsNMoZh8+LQaarAWcDfPBc6zg==", + "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/please-upgrade-node": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", @@ -5650,6 +5725,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz", + "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==", + "dev": true, + "license": "MIT" + }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", diff --git a/package.json b/package.json index e2ab73d..2f9a56f 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "devDependencies": { "@11ty/eleventy": "^3.1.1", "@11ty/eleventy-plugin-rss": "^2.0.4", + "@playwright/test": "^1.53.1", + "@types/node": "^24.0.7", "autoprefixer": "^10.4.21", "postcss": "^8.5.5", "postcss-cli": "^11.0.1", From 69ab32bdec0dcd79c5dc30a8f1fd451545a9f48d Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Tue, 1 Jul 2025 09:47:16 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20`playwright`=20=E2=80=94=20settin?= =?UTF-8?q?g=20up=20for=20testing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/playwright.yml | 27 +++++++++++ .gitignore | 9 +++- playwright.config.ts | 81 ++++++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 playwright.config.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..3eb1314 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 4899580..60b0dd0 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,11 @@ # /src/blog/example/* -.cache \ No newline at end of file +.cache + +# Playwright +node_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..4c768ff --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,81 @@ +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(path.dirname("/"), '.env') }); + + +const localhost = "http://localhost:8080" +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './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', { open: 'never' }]], + /* 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: localhost, + + /* 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: localhost, + reuseExistingServer: !process.env.CI, + }, +}); From 6b1774fab3ececa1c6b0bbcc6db481219f0b2027 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Tue, 1 Jul 2025 09:47:53 +0900 Subject: [PATCH 03/10] create: `landing-page.spec.ts` --- tests/landing-page.spec.ts | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 tests/landing-page.spec.ts diff --git a/tests/landing-page.spec.ts b/tests/landing-page.spec.ts new file mode 100644 index 0000000..54a6944 --- /dev/null +++ b/tests/landing-page.spec.ts @@ -0,0 +1,31 @@ +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('/'); + await expect(page).toHaveTitle(/EmptyWork/); +}); + +test('find a curriculum vitae and download', async ({ page, browserName }, testInfo) => { + const isHeaded = testInfo.project.name.includes('headed') + + await page.goto('/'); + + if (browserName === 'chromium' && isHeaded) { + const [popup] = await Promise.all([ + page.waitForEvent('popup'), + await page.getByRole('link', { name: 'Open PDF of my Curriculum' }).click(), + ]); + await popup.waitForLoadState('domcontentloaded'); + const url = popup.url(); + return expect(url).toMatch(/\.pdf$/); + } + + const [download] = await Promise.all([ + page.waitForEvent('download'), + page.getByRole('link', { name: 'Open PDF of my Curriculum' }).click(), + ]); + + const fileName = download.suggestedFilename(); + expect(fileName).toMatch(/\.pdf$/); + +}); From 4b00c346f4fb0a66a1c6653d25d6d5a163de9615 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Tue, 1 Jul 2025 10:09:05 +0900 Subject: [PATCH 04/10] =?UTF-8?q?update:=20`hero.njk`=20=E2=80=94=20conver?= =?UTF-8?q?t=20to=20download=20on=20click?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- playwright.config.ts | 6 +++--- src/_includes/sections/hero.njk | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index 4c768ff..08b93b4 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -4,9 +4,9 @@ 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(path.dirname("/"), '.env') }); +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(path.dirname("/"), '.env') }); const localhost = "http://localhost:8080" diff --git a/src/_includes/sections/hero.njk b/src/_includes/sections/hero.njk index 8bde749..31fd9e0 100644 --- a/src/_includes/sections/hero.njk +++ b/src/_includes/sections/hero.njk @@ -78,10 +78,10 @@