From ce94eff2628cef55b9eca3cdfb22b8f37f594234 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Wed, 4 Dec 2024 15:37:32 -0300 Subject: [PATCH] Update all content-* tests --- examples/content-css-modules/template.spec.ts | 56 ++++++++++--- examples/content-env/template.spec.ts | 58 +++++++++---- examples/content-esm/template.spec.mjs | 62 ++++++++++---- .../content-extension-config/manifest.json | 4 +- .../content-extension-config/template.spec.ts | 81 ++++++++++++------- .../content-less-modules/template.spec.ts | 56 ++++++++++--- examples/content-less/template.spec.ts | 56 ++++++++++--- examples/content-main-world/template.spec.ts | 43 +++++++--- examples/content-preact/template.spec.ts | 70 +++++++++------- examples/content-react-svgr/template.spec.ts | 68 +++++++++------- examples/content-react/template.spec.ts | 51 ++++-------- .../content-sass-modules/template.spec.ts | 56 ++++++++++--- examples/content-sass/template.spec.ts | 56 ++++++++++--- examples/content-tailwind/template.spec.ts | 72 ++++++++++------- examples/content-typescript/template.spec.ts | 56 ++++++++++--- examples/content-vue/template.spec.ts | 70 +++++++++------- examples/content/template.spec.ts | 56 ++++++++++--- programs/create/package.json | 2 +- 18 files changed, 655 insertions(+), 318 deletions(-) diff --git a/examples/content-css-modules/template.spec.ts b/examples/content-css-modules/template.spec.ts index 47cd9410..2f41c3ee 100644 --- a/examples/content-css-modules/template.spec.ts +++ b/examples/content-css-modules/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-css-modules' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-env/template.spec.ts b/examples/content-env/template.spec.ts index 1d4fa400..2f41c3ee 100644 --- a/examples/content-env/template.spec.ts +++ b/examples/content-env/template.spec.ts @@ -1,8 +1,12 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' -const exampleDir = 'examples/content-env' +const exampleDir = 'examples/content-css-modules' const pathToExtension = path.join(__dirname, `dist/chrome`) const test = extensionFixtures(pathToExtension, true) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-esm/template.spec.mjs b/examples/content-esm/template.spec.mjs index c223f969..df15b2dd 100644 --- a/examples/content-esm/template.spec.mjs +++ b/examples/content-esm/template.spec.mjs @@ -1,15 +1,17 @@ import path from 'path' import {fileURLToPath} from 'url' import {execSync} from 'child_process' -import {extensionFixtures} from '../extension-fixtures.mjs' -import {takeScreenshot} from '../extension-fixtures.mjs' +import { + getShadowRootElement, + extensionFixtures, + takeScreenshot +} from '../extension-fixtures.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) -const exampleDir = 'examples/content-esm' +const exampleDir = 'examples/content-css-modules' const pathToExtension = path.join(__dirname, `dist/chrome`) - const test = extensionFixtures(pathToExtension, true) test.beforeAll(async () => { @@ -18,34 +20,60 @@ test.beforeAll(async () => { }) }) -test('should exist an element with the class name .content_script', async ({ +test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-extension-config/manifest.json b/examples/content-extension-config/manifest.json index 6c0b80cc..2f9d1adf 100644 --- a/examples/content-extension-config/manifest.json +++ b/examples/content-extension-config/manifest.json @@ -10,9 +10,7 @@ }, "content_scripts": [ { - "matches": [ - "" - ], + "matches": [""], "js": ["./content/scripts.tsx"] } ], diff --git a/examples/content-extension-config/template.spec.ts b/examples/content-extension-config/template.spec.ts index e85365b6..26c46e1e 100644 --- a/examples/content-extension-config/template.spec.ts +++ b/examples/content-extension-config/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-extension-config' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,59 +20,78 @@ 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() + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + + // Check that the Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() + + // Verify if the Shadow DOM contains children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) 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).toContainText('This is a content script') + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const textContent = await h2.evaluate((node) => node.textContent) + test.expect(textContent).toContain('This is a content script') }) 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() + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const color = await h2.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + 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 shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + const imagesHandle = await shadowRootHandle.evaluateHandle( + (shadow: ShadowRoot) => Array.from(shadow.querySelectorAll('img')) + ) + + const imageHandles = await imagesHandle.getProperties() const results: boolean[] = [] - for (const image of imageElements) { - const naturalWidth = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalWidth : 0 - }, - await image.elementHandle() + for (const [, imageHandle] of imageHandles) { + const naturalWidth = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalWidth ) - - const naturalHeight = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalHeight : 0 - }, - await image.elementHandle() + const naturalHeight = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalHeight ) - const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0 results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-less-modules/template.spec.ts b/examples/content-less-modules/template.spec.ts index b65b9b6c..9d685ad7 100644 --- a/examples/content-less-modules/template.spec.ts +++ b/examples/content-less-modules/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-less-modules' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-less/template.spec.ts b/examples/content-less/template.spec.ts index 928cfdce..28231355 100644 --- a/examples/content-less/template.spec.ts +++ b/examples/content-less/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-less' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-main-world/template.spec.ts b/examples/content-main-world/template.spec.ts index d8bace88..1db3f7fa 100644 --- a/examples/content-main-world/template.spec.ts +++ b/examples/content-main-world/template.spec.ts @@ -1,6 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-main-world' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,24 +16,43 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Main World') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('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 > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + test.expect(color).toEqual('rgb(201, 201, 201)') }) diff --git a/examples/content-preact/template.spec.ts b/examples/content-preact/template.spec.ts index d00120bd..374218b7 100644 --- a/examples/content-preact/template.spec.ts +++ b/examples/content-preact/template.spec.ts @@ -1,6 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-preact' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,57 +16,69 @@ 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() + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + + // Validate that the Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() + + // Verify Shadow DOM has children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) 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') + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const textContent = await h2.evaluate((node) => node.textContent) await test - .expect(h2) - .toContainText( + .expect(textContent) + .toContain( '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() + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const color = await h2.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + 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 shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + const imagesHandle = await shadowRootHandle.evaluateHandle( + (shadow: ShadowRoot) => Array.from(shadow.querySelectorAll('img')) + ) + + const imageHandles = await imagesHandle.getProperties() const results: boolean[] = [] - for (const image of imageElements) { - const naturalWidth = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalWidth : 0 - }, - await image.elementHandle() + for (const [, imageHandle] of imageHandles) { + const naturalWidth = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalWidth ) - - const naturalHeight = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalHeight : 0 - }, - await image.elementHandle() + const naturalHeight = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalHeight ) - const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0 results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) diff --git a/examples/content-react-svgr/template.spec.ts b/examples/content-react-svgr/template.spec.ts index 8d62ebfc..33c76167 100644 --- a/examples/content-react-svgr/template.spec.ts +++ b/examples/content-react-svgr/template.spec.ts @@ -1,6 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-react-svgr' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,53 +16,65 @@ 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() + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + + // Check if Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() + + // Verify if Shadow DOM has children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) 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).toContainText('This is a content script') + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const textContent = await h2.evaluate((node) => node.textContent) + test.expect(textContent).toContain('This is a content script') }) 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() + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const color = await h2.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + 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 shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + const imagesHandle = await shadowRootHandle.evaluateHandle( + (shadow: ShadowRoot) => Array.from(shadow.querySelectorAll('img')) + ) + + const imageHandles = await imagesHandle.getProperties() const results: boolean[] = [] - for (const image of imageElements) { - const naturalWidth = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalWidth : 0 - }, - await image.elementHandle() + for (const [, imageHandle] of imageHandles) { + const naturalWidth = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalWidth ) - - const naturalHeight = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalHeight : 0 - }, - await image.elementHandle() + const naturalHeight = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalHeight ) - const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0 results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) diff --git a/examples/content-react/template.spec.ts b/examples/content-react/template.spec.ts index b6abb7b6..59b8f415 100644 --- a/examples/content-react/template.spec.ts +++ b/examples/content-react/template.spec.ts @@ -1,7 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {type Page, type ElementHandle} from '@playwright/test' -import {extensionFixtures} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-react' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -13,38 +12,20 @@ test.beforeAll(async () => { }) }) -/** - * Utility to access elements inside the Shadow DOM. - * @param page The Playwright Page object. - * @param shadowHostSelector The selector for the Shadow DOM host element. - * @param innerSelector The selector for the element inside the Shadow DOM. - * @returns A Promise resolving to an ElementHandle for the inner element or null if not found. - */ -async function getShadowRootElement( - page: Page, - shadowHostSelector: string, - innerSelector: string -): Promise | null> { - const shadowHost = page.locator(shadowHostSelector) - const shadowRootHandle = await shadowHost.evaluateHandle( - (host: HTMLElement) => host.shadowRoot - ) - - const innerElement = await shadowRootHandle.evaluateHandle( - (shadowRoot: ShadowRoot, selector: string) => - shadowRoot.querySelector(selector), - innerSelector - ) +test('should exist an element with the id extension-root', async ({page}) => { + await page.goto('https://extension.js.org/') + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) - return innerElement.asElement() as ElementHandle | null -} + // Check that the Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() -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() + // Verify if the Shadow DOM contains children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) test('should exist an h2 element with specified content', async ({page}) => { @@ -55,7 +36,7 @@ test('should exist an h2 element with specified content', async ({page}) => { } const textContent = await h2.evaluate((node) => node.textContent) - await test.expect(textContent).toContain('This is a content script') + test.expect(textContent).toContain('This is a content script') }) test('should exist a default color value', async ({page}) => { @@ -68,7 +49,7 @@ test('should exist a default color value', async ({page}) => { const color = await h2.evaluate((node) => window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + test.expect(color).toEqual('rgb(255, 255, 255)') }) test('should load all images successfully', async ({page}) => { @@ -95,5 +76,5 @@ test('should load all images successfully', async ({page}) => { results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) diff --git a/examples/content-sass-modules/template.spec.ts b/examples/content-sass-modules/template.spec.ts index bab47c0d..bae872db 100644 --- a/examples/content-sass-modules/template.spec.ts +++ b/examples/content-sass-modules/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-sass-modules' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-sass/template.spec.ts b/examples/content-sass/template.spec.ts index 71859422..3438e254 100644 --- a/examples/content-sass/template.spec.ts +++ b/examples/content-sass/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-sass' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-tailwind/template.spec.ts b/examples/content-tailwind/template.spec.ts index cef0f7b1..25f20d93 100644 --- a/examples/content-tailwind/template.spec.ts +++ b/examples/content-tailwind/template.spec.ts @@ -1,6 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-tailwind' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,55 +16,67 @@ 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() + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + + // Validate that the Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() + + // Verify Shadow DOM has children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) 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) - .toContainText('This is a content script running Tailwind.css.') + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const textContent = await h2.evaluate((node) => node.textContent) + test + .expect(textContent) + .toContain('This is a content script running 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() + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const color = await h2.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + 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 shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + const imagesHandle = await shadowRootHandle.evaluateHandle( + (shadow: ShadowRoot) => Array.from(shadow.querySelectorAll('img')) + ) + + const imageHandles = await imagesHandle.getProperties() const results: boolean[] = [] - for (const image of imageElements) { - const naturalWidth = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalWidth : 0 - }, - await image.elementHandle() + for (const [, imageHandle] of imageHandles) { + const naturalWidth = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalWidth ) - - const naturalHeight = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalHeight : 0 - }, - await image.elementHandle() + const naturalHeight = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalHeight ) - const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0 results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) diff --git a/examples/content-typescript/template.spec.ts b/examples/content-typescript/template.spec.ts index b9dedf09..0b5be25c 100644 --- a/examples/content-typescript/template.spec.ts +++ b/examples/content-typescript/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content-typescript' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/examples/content-vue/template.spec.ts b/examples/content-vue/template.spec.ts index 38424bfe..8e9a1c81 100644 --- a/examples/content-vue/template.spec.ts +++ b/examples/content-vue/template.spec.ts @@ -1,6 +1,6 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import {extensionFixtures, getShadowRootElement} from '../extension-fixtures' const exampleDir = 'examples/content-vue' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,57 +16,69 @@ 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() + const shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + + // Validate that the Shadow DOM exists + test.expect(shadowRootHandle).not.toBeNull() + + // Verify Shadow DOM has children + const shadowChildrenCount = await shadowRootHandle.evaluate( + (shadowRoot: ShadowRoot) => shadowRoot.children.length + ) + test.expect(shadowChildrenCount).toBeGreaterThan(0) }) 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') + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const textContent = await h2.evaluate((node) => node.textContent) await test - .expect(h2) - .toContainText( + .expect(textContent) + .toContain( 'This is a content script running Vue, 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() + const h2 = await getShadowRootElement(page, '#extension-root', 'h2') + if (!h2) { + throw new Error('h2 element not found in Shadow DOM') + } + const color = await h2.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') ) - await test.expect(color).toEqual('rgb(255, 255, 255)') + 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 shadowRootHandle = await page + .locator('#extension-root') + .evaluateHandle((host: HTMLElement) => host.shadowRoot) + const imagesHandle = await shadowRootHandle.evaluateHandle( + (shadow: ShadowRoot) => Array.from(shadow.querySelectorAll('img')) + ) + + const imageHandles = await imagesHandle.getProperties() const results: boolean[] = [] - for (const image of imageElements) { - const naturalWidth = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalWidth : 0 - }, - await image.elementHandle() + for (const [, imageHandle] of imageHandles) { + const naturalWidth = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalWidth ) - - const naturalHeight = await page.evaluate( - (img) => { - return img ? (img as HTMLImageElement).naturalHeight : 0 - }, - await image.elementHandle() + const naturalHeight = await imageHandle.evaluate( + (img) => (img as HTMLImageElement).naturalHeight ) - const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0 results.push(loadedSuccessfully) } - await test.expect(results.every((result) => result)).toBeTruthy() + test.expect(results.every((result) => result)).toBeTruthy() }) diff --git a/examples/content/template.spec.ts b/examples/content/template.spec.ts index 60ae2646..2dde7bc9 100644 --- a/examples/content/template.spec.ts +++ b/examples/content/template.spec.ts @@ -1,6 +1,10 @@ import path from 'path' import {execSync} from 'child_process' -import {extensionFixtures, takeScreenshot} from '../extension-fixtures' +import { + extensionFixtures, + getShadowRootElement, + takeScreenshot +} from '../extension-fixtures' const exampleDir = 'examples/content' const pathToExtension = path.join(__dirname, `dist/chrome`) @@ -16,30 +20,56 @@ test('should exist an element with the class name content_script', async ({ page }) => { await page.goto('https://extension.js.org/') - const div = page.locator('body > div.content_script') - await test.expect(div).toBeVisible() + const div = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!div) { + throw new Error('div with class content_script not found in Shadow DOM') + } + test.expect(div).not.toBeNull() }) 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 > h1') - await test.expect(h1).toContainText('Welcome to your') + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' + ) + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const textContent = await h1.evaluate((node) => node.textContent) + test.expect(textContent).toContain('Welcome to your') }) test('should exist a default color value', async ({page}) => { await page.goto('https://extension.js.org/') - const h1 = page.locator('body > div.content_script > h1') - const color = await page.evaluate( - (locator) => { - return window.getComputedStyle(locator!).getPropertyValue('color') - }, - await h1.elementHandle() + const h1 = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script > h1' ) - await test.expect(color).toEqual('rgb(201, 201, 201)') + if (!h1) { + throw new Error('h1 element not found in Shadow DOM') + } + const color = await h1.evaluate((node) => + window.getComputedStyle(node as HTMLElement).getPropertyValue('color') + ) + test.expect(color).toEqual('rgb(201, 201, 201)') }) test.skip('takes a screenshot of the page', async ({page}) => { await page.goto('https://extension.js.org/') - await page.waitForSelector('body > div.content_script') + const contentScriptDiv = await getShadowRootElement( + page, + '#extension-root', + 'div.content_script' + ) + if (!contentScriptDiv) { + throw new Error('div.content_script not found in Shadow DOM for screenshot') + } await takeScreenshot(page, path.join(__dirname, 'screenshot.png')) }) diff --git a/programs/create/package.json b/programs/create/package.json index 341e5550..6609be51 100644 --- a/programs/create/package.json +++ b/programs/create/package.json @@ -46,4 +46,4 @@ "tsup": "^8.3.5", "typescript": "5.7.2" } -} \ No newline at end of file +}