testing playwright

.github/workflows/nodejs.yml

@@ -1,5 +1,5 @@
 name: build
-on: [push]
+on: push
 jobs:
   test:
     runs-on: ubuntu-latest

.github/workflows/playwright.yml

@@ -0,0 +1,24 @@
+name: screenshot
+on: deployment_status
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - run: npm ci
+    - run: npx playwright install --with-deps
+    - run: npx playwright test
+      env:
+        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+    - uses: actions/upload-artifact@v3
+      with:
+        name: playwright-report
+        path: playwright-report/
+    - uses: actions/upload-artifact@v3
+      with:
+        name: test-results
+        path: test-results/

.gitignore

@@ -2,3 +2,7 @@ src/utils/leaderboards.json
 node_modules
 *npm-debug.log
 .DS_Store
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -23,7 +23,9 @@
     "progress": "^2.0.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.40.1",
     "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
@@ -73,4 +75,4 @@
       }
     }
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  reporter: 'html',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

tests/screenshot.spec.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+
+test('create screenshot', async ({ page }) => {
+  await page.goto(
+    'https://shahata.github.io/adventofcode-solver/src/2023/events.html',
+  );
+  await page.waitForTimeout(1000);
+  await page.screenshot({
+    path: 'test-results/screenshot.png',
+    clip: { x: 0, y: 0, width: 1030, height: 420 },
+  });
+});