test: setup playwright for e2e testing (#262)

* test: setup playwright for e2e testing

* add headless arg

* Moved to different folder

* Added e2e to eslint ignore

* Added script to run e2e in package.json

* Removed some comments

* Stopped vitest from running e2e test

* Change spacing to 4

* Updated spacing for config and added firefox

* Commented back

* Added firefox back

* Update playwright.config.ts

---------

Co-authored-by: Brian Douglas <bdougie@users.noreply.github.com>

.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
 		jest: true,
 		es2021: true,
 	},
-	ignorePatterns: ["test", "dist", "build", "public", "/**/node_modules/*", ".eslintrc.js", "vite.config.ts", "vite-env.d.ts", "postcss.config.js", "tailwind.config.js", "vitest.config.ts"],
+	ignorePatterns: ["test", "dist", "build", "public", "/**/node_modules/*", ".eslintrc.js", "vite.config.ts", "vite-env.d.ts", "postcss.config.js", "tailwind.config.js", "vitest.config.ts", "playwright.config.ts", "e2e"],
 	rules: {
 		"indent": "off",
 		"@typescript-eslint/indent": "error",
@@ -449,4 +449,4 @@ module.exports = {
 			"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"],
 		},
 	},
-};
+};

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, beta ]
+  pull_request:
+    branches: [ main, beta ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - 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@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/open-popup.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from './popupFixture';
+
+test('popup page', async ({ page, extensionId }) => {
+    await page.goto(`chrome-extension://${extensionId}/index.html`);
+    expect(page.locator('body')).toBeTruthy();
+});

e2e/popupFixture.ts

@@ -0,0 +1,30 @@
+import { test as base, chromium, type BrowserContext } from "@playwright/test";
+import path from "path";
+
+export const test = base.extend<{
+    context: BrowserContext;
+    extensionId: string;
+}>({
+    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("serviceworker");
+
+        const extensionId = background.url().split("/")[2];
+        await use(extensionId);
+    },
+});
+
+export const expect = test.expect;

package.json

@@ -12,6 +12,7 @@
     "lint": "eslint . --report-unused-disable-directives",
     "format": "npm run lint -- --fix",
     "test": "vitest run",
+    "e2e": "npx playwright test",
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",
+    "@playwright/test": "^1.37.1",
     "@types/chrome": "^0.0.237",
     "@types/node": "^20.1.4",
     "@types/node-emoji": "^1.8.2",

playwright.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './e2e',
+    /* 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'] },
+      //  },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: 'npm run dev',
+        url: 'http://127.0.0.1:3000',
+        reuseExistingServer: !process.env.CI,
+    },
+});

vitest.config.ts

@@ -4,5 +4,6 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   test: {
     environment: "jsdom",
+    include: ["test/**/*.test.ts"],
   },
-});
+});