Add playwright test

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

@@ -28,6 +28,7 @@ jobs:
         run: npm run lint:check
 
   test:
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -36,5 +37,17 @@ jobs:
           node-version: '20'
       - name: Install dependencies
         run: npm ci
+      - name: Build extension
+        run: npm run build
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
       - name: Run tests
         run: npm run test
+
+      # Upload test results on failure
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,2 +1,6 @@
 node_modules
 dist
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

build.js

@@ -22,7 +22,7 @@ const context = await esbuild.context({
   ],
   outdir: "dist",
   target: ["es2020"],
-  loader: { ".js": "jsx" },
+  loader: { ".js": "jsx", ".ttf": "file" },
   plugins: [
     {
       name: "clean-dist",

package.json

@@ -6,10 +6,11 @@
     "lint:check": "biome lint .",
     "format:check": "biome format .",
     "format:fix": "biome format --write .",
-    "test": "echo \"For now, we don't have any tests.\""
+    "test": "PW_TEST_HTML_REPORT_OPEN='never' npx playwright test"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
+    "@playwright/test": "^1.45.3",
     "@types/chrome": "^0.0.269",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * 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",
+  /* 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://127.0.0.1:3000',
+
+    /* 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 start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/css/tailwind.css

@@ -78,4 +78,8 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+  @font-face {
+    font-family: "Inter";
+    src: url("./Inter.ttf") format("truetype");
+  }
 }

src/newtab/App.tsx

@@ -50,7 +50,7 @@ export default function App() {
   }, [todayUsage]);
 
   return (
-    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950">
+    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950 font-sans">
       <section className="flex gap-5 flex-col lg:flex-row h-fit">
         <Card>
           <CardHeader>

tailwind.config.ts

@@ -54,7 +54,7 @@ module.exports = {
         sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        sans: ["Inter", ...fontFamily.sans],
       },
       keyframes: {
         "accordion-down": {

tests/example.spec.ts

@@ -0,0 +1,46 @@
+import { test as base, type BrowserContext } from "@playwright/test";
+import { chromium } from "playwright";
+import path from "node:path";
+
+// @ts-ignore: stop typescript from bitching about import.meta
+const __dirname = path.dirname(import.meta.filename);
+
+const test = base.extend<{ context: BrowserContext; extensionId: string }>({
+  // biome-ignore lint: not use what this object destructuring is for
+  context: async ({}, use) => {
+    const pathToExtension = path.join(__dirname, "../dist");
+    const context = await chromium.launchPersistentContext("", {
+      headless: false,
+      args: [
+        "--headless=new",
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`,
+      ],
+    });
+    await use(context);
+    await context.close();
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers();
+    if (!background) {
+      background = await context.waitForEvent("backgroundpage");
+    }
+    const exntesionId = background.url().split("/")[2];
+    await use(exntesionId);
+  },
+});
+
+const expect = test.expect;
+
+test("Extension in New Tab page", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
+  await page.waitForTimeout(3000);
+  await page.goto("chrome://newtab");
+  await expect(page).toHaveTitle("New Tab");
+  await expect(page).toHaveScreenshot({
+    mask: [
+      page.locator("section > div:last-child > div:first-child svg"),
+      page.locator("section > div:first-child ul li button img"),
+    ],
+  });
+});