-
-
Notifications
You must be signed in to change notification settings - Fork 93
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
1,011 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)'); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)'); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)'); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)'); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)'); | ||
}) | ||
|
Oops, something went wrong.