Add local e2e testing (#175)

.github/workflows/e2e.yml

@@ -0,0 +1,35 @@
+name: e2e tests
+
+on:
+    push:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+    - uses: actions/checkout@v4
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm install
+    - name: Run compiler
+      run: pnpm compile
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run e2e tests
+      run: pnpm test:e2e
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: e2e-report
+        path: e2e-report/
+        retention-days: 15

.gitignore

@@ -61,3 +61,8 @@ __TEST__
 /examples/**/yarn.lock
 /examples/**/pnpm-lock.yaml
 /examples/**/extension-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/e2e-report/

e2e/content-css-module.spec.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-css-module';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name content_script-box', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('body > div.content_script-box');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h1 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  await test.expect(h1).toHaveText('Change the background-color ⬇');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h1.elementHandle());
+  await test.expect(color).toEqual('rgb(51, 51, 51)');
+})

e2e/content-extension-config.spec.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-extension-config';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name extension-root', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('#extension-root');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h2 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  await test.expect(h2).toHaveText('This is a content script running React, TypeScript, and Tailwind.css');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h2.elementHandle());
+  await test.expect(color).toEqual('rgb(255, 255, 255)');
+})
+
+test('should load all images successfully', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const images = page.locator('#extension-root img');
+  const imageElements = await images.all();
+
+  const results: boolean[] = [];
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalWidth : 0;
+    }, await image.elementHandle());
+
+    const naturalHeight = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalHeight : 0;
+    }, await image.elementHandle());
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0;
+    results.push(loadedSuccessfully);
+  }
+
+  await test.expect(results.every(result => result)).toBeTruthy();
+})

e2e/content-less.spec.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-less';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name content_script-box', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('body > div.content_script-box');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h1 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  await test.expect(h1).toHaveText('Change the background-color ⬇');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h1.elementHandle());
+  await test.expect(color).toEqual('rgb(51, 51, 51)');
+})

e2e/content-main-world.spec.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-main-world';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name content_script-box', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('body > div.content_script-box');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h1 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  await test.expect(h1).toHaveText('Main World');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h1.elementHandle());
+  await test.expect(color).toEqual('rgb(51, 51, 51)');
+})

e2e/content-preact.spec.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-preact';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name extension-root', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('#extension-root');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h2 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  await test.expect(h2).toHaveText('This is a content script running Preact, TypeScript, and Tailwind.css.');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h2.elementHandle());
+  await test.expect(color).toEqual('rgb(255, 255, 255)');
+})
+
+test('should load all images successfully', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const images = page.locator('#extension-root img');
+  const imageElements = await images.all();
+
+  const results: boolean[] = [];
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalWidth : 0;
+    }, await image.elementHandle());
+
+    const naturalHeight = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalHeight : 0;
+    }, await image.elementHandle());
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0;
+    results.push(loadedSuccessfully);
+  }
+
+  await test.expect(results.every(result => result)).toBeTruthy();
+})

e2e/content-react.spec.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-react';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name extension-root', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('#extension-root');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h2 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  await test.expect(h2).toHaveText('This is a content script running React, TypeScript, and Tailwind.css');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h2 = page.locator('#extension-root h2');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h2.elementHandle());
+  await test.expect(color).toEqual('rgb(255, 255, 255)');
+})
+
+test('should load all images successfully', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const images = page.locator('#extension-root img');
+  const imageElements = await images.all();
+
+  const results: boolean[] = [];
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalWidth : 0;
+    }, await image.elementHandle());
+
+    const naturalHeight = await page.evaluate(img => {
+      return img ? (img as HTMLImageElement).naturalHeight : 0;
+    }, await image.elementHandle());
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0;
+    results.push(loadedSuccessfully);
+  }
+
+  await test.expect(results.every(result => result)).toBeTruthy();
+})

e2e/content-sass-module.spec.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-sass-module';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name content_script-box', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('body > div.content_script-box');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h1 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  await test.expect(h1).toHaveText('Change the background-color ⬇');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h1.elementHandle());
+  await test.expect(color).toEqual('rgb(51, 51, 51)');
+})

e2e/content-sass.spec.ts

@@ -0,0 +1,33 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { extensionFixtures } from './extension-fixtures';
+
+const exampleDir = 'examples/content-sass';
+const pathToExtension = path.join(__dirname, `../${exampleDir}/dist/chrome`);
+const test = extensionFixtures(pathToExtension, true);
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, { cwd: path.join(__dirname, '..') });
+})
+
+test('should exist an element with the class name content_script-box', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const div = page.locator('body > div.content_script-box');
+  await test.expect(div).toBeVisible();
+})
+
+test('should exist an h1 element with specified content', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  await test.expect(h1).toHaveText('Change the background-color ⬇');
+})
+
+test('should exist a default color value', async ({ page }) => {
+  await page.goto('https://extension.js.org/');
+  const h1 = page.locator('body > div.content_script-box > h1');
+  const color = await page.evaluate((locator) => {
+    return window.getComputedStyle(locator!).getPropertyValue('color');
+  }, await h1.elementHandle());
+  await test.expect(color).toEqual('rgb(51, 51, 51)');
+})
+