use short npm script names

.github/workflows/format-lint-test.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Check formatting
-        run: npm run format:check
+        run: npm run format
 
   lint:
     runs-on: ubuntu-latest
@@ -25,7 +25,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Lint code
-        run: npm run lint:check
+        run: npm run lint
 
   test:
     timeout-minutes: 10
@@ -45,9 +45,28 @@ jobs:
         run: npm run test
 
       # Upload test results on failure
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-pages-artifact@v3
         if: failure()
         with:
-          name: playwright-report
           path: playwright-report/
-          retention-days: 30
+
+  deploy-test-result:
+    if: always() && needs.test.result == 'failure'
+    needs: test
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -3,10 +3,10 @@
   "scripts": {
     "build": "./build.js",
     "watch": "./build.js -w",
-    "lint:check": "biome lint . && tsc --noEmit",
-    "format:check": "biome format .",
-    "format:fix": "biome format --write .",
-    "test": "PW_TEST_HTML_REPORT_OPEN='never' npx playwright test"
+    "format": "biome format .",
+    "lint": "biome lint . && tsc --noEmit",
+    "test": "PW_TEST_HTML_REPORT_OPEN='never' npx playwright test",
+    "format:fix": "biome format --write ."
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",

src/components/Overview.tsx

@@ -49,9 +49,9 @@ export function Overview({ totalUsage }: Props) {
 
   return (
     <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
+      <CardHeader className="items-center pb-0" id="overview-header">
         <CardTitle className="text-lg">Top 5 sites</CardTitle>
-        <CardDescription id="overview-date">{formattedDate}</CardDescription>
+        <CardDescription>{formattedDate}</CardDescription>
       </CardHeader>
       <CardContent className="flex-1 pb-0">
         <ChartContainer

tests/example.spec.ts

@@ -40,7 +40,7 @@ test("Extension in New Tab page", async ({ page }) => {
   await expect(page).toHaveScreenshot({
     mask: [
       page.locator("section > div:last-child > div:first-child svg"),
-      page.locator("#overview-date"),
+      page.locator("#overview-header"),
       page.locator("#favicon"),
     ],
   });