Feat: Support for e2e test using Playwright (#41)

* feat: support for e2e test using Playwright
* fix: new splash query issue fixed
* fix: better test and optimised
* fix: added this as pre push
* patch: pausing tests after push
* fix: preventing new tabs test from failing
* patch: only manual trigger

Author: tushar-prox

.github/workflows/tests.yml

@@ -0,0 +1,51 @@
+name: E2E Tests
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies (clean)
+        run: npm ci
+
+      - name: Install Playwright (Chromium only + system deps)
+        run: npx playwright install --with-deps chromium
+
+      - name: Run tests (headed via XVFB)
+        env:
+          DEBUG: pw:api
+        run: xvfb-run --auto-servernum -- npm test
+
+      - name: Upload Playwright HTML report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          retention-days: 7
+          if-no-files-found: ignore
+
+      - name: Upload test results and traces
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: test-results
+          retention-days: 7
+          if-no-files-found: ignore

.gitignore

@@ -65,3 +65,9 @@ secret.js
 backup/*
 
 *.zip
+
+# Playwright test artifacts
+playwright-report/
+test-results/
+# (optional if you enable blob reporter)
+blob-report/

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

README.md

@@ -126,6 +126,32 @@ GoTo is available on [Chrome Web Store](https://chrome.google.com/webstore/detai
 1. Clone this repo
 ```git clone https://github.com/tusharv/GoTo```
 
+## Testing (E2E)
+
+This repo includes Playwright end-to-end tests that load the extension and verify key flows.
+
+Prereqs: Node 18+ (or 20+) installed.
+
+Install and run:
+
+```bash
+npm install
+npm run test:install
+npm test
+```
+
+Useful variants:
+
+```bash
+# Headed (visible browser)
+npm run test:headed
+
+# Playwright UI mode
+npm run test:ui
+```
+
+CI runs these in GitHub Actions via `xvfb-run` to support headed Chromium.
+
 2. Add `secret.js` in your `src/js`
 ```JavaScript
 var secret = {

package-lock.json

@@ -4,7 +4,11 @@
   "description": "GoTo and Search popular sites from your NewTab",
   "main": "src/js/background.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:install": "playwright install chromium",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -21,5 +25,9 @@
   "bugs": {
     "url": "https://github.com/tusharv/GoTo/issues"
   },
-  "homepage": "https://github.com/tusharv/GoTo#readme"
+  "homepage": "https://github.com/tusharv/GoTo#readme",
+  "devDependencies": {
+    "@playwright/test": "^1.47.2",
+    "husky": "^9.0.11"
+  }
 }

package.json

@@ -0,0 +1,24 @@
+// @ts-check
+const { defineConfig } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: 'tests/e2e',
+  timeout: 60000,
+  fullyParallel: false,
+  retries: 0,
+  reporter: [
+    ['github'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }]
+  ],
+  outputDir: 'test-results',
+  use: {
+    headless: false, // Extensions require headed mode
+    viewport: { width: 1280, height: 800 },
+    ignoreHTTPSErrors: true,
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure'
+  },
+});
+
+

playwright.config.js

@@ -3,17 +3,26 @@ let config = {};
 
 // Load config from JSON file and initialize UI
 (async () => {
-	try {
-		const response = await fetch(chrome.runtime.getURL('config.json'));
-		config = await response.json();
-		// Initialize UI after config is loaded
-		if (typeof init === 'function') {
-			init();
-		}
-	} catch (error) {
-		console.error('Error loading config:', error);
-		// Keep empty config as fallback
-	}
+    try {
+        const response = await fetch(chrome.runtime.getURL('config.json'));
+        config = await response.json();
+        // Initialize UI after config is loaded and DOM is ready
+        const startInit = () => { if (typeof init === 'function') init(); };
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', startInit, { once: true });
+        } else {
+            startInit();
+        }
+    } catch (error) {
+        console.error('Error loading config:', error);
+        // Keep empty config as fallback
+        const startInit = () => { if (typeof init === 'function') init(); };
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', startInit, { once: true });
+        } else {
+            startInit();
+        }
+    }
 })();
 
 let tableContainner;

src/js/options.js

@@ -15,6 +15,9 @@
   "permissions": [
     "storage"
   ],
+  "host_permissions": [
+    "https://api.unsplash.com/*"
+  ],
   "action": {
     "default_icon": {
       "16": "image/icon16.png",
@@ -30,7 +33,7 @@
     "128": "image/icon128.png"
   },
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' https://api.unsplash.com"
   },
   "web_accessible_resources": [
     {

src/manifest.json

@@ -0,0 +1,43 @@
+const path = require('path');
+const { test, expect } = require('@playwright/test');
+const { launchContextWithExtension } = require('./helpers/extension');
+
+test.describe('Background messaging', () => {
+  let context;
+  let extensionId;
+  let page;
+
+  test.beforeAll(async () => {
+    const root = path.resolve(__dirname, '../../');
+    const launched = await launchContextWithExtension(root);
+    context = launched.context;
+    extensionId = launched.extensionId;
+    page = await context.newPage();
+  });
+
+  test.afterAll(async () => {
+    await context.close();
+  });
+
+  test('responds to testConfig message', async () => {
+    await page.goto(`chrome-extension://${extensionId}/page/options.html`);
+    const result = await page.evaluate(() => new Promise(resolve => {
+      chrome.runtime.sendMessage({ action: 'testConfig' }, res => resolve(res));
+    }));
+    expect(result).toBeTruthy();
+    expect(result.success).toBe(true);
+    expect(result.configKeys).toContain('git');
+  });
+
+  test('handles refreshConfig message', async () => {
+    await page.goto(`chrome-extension://${extensionId}/page/options.html`);
+    const result = await page.evaluate(() => new Promise(resolve => {
+      chrome.runtime.sendMessage({ action: 'refreshConfig' }, res => resolve(res));
+    }));
+    // Background returns { success: true } for refreshConfig
+    expect(result).toBeTruthy();
+    expect(result.success).toBe(true);
+  });
+});
+
+