Update all content-* tests

extension-js · Dec 4, 2024 · e4d57f6 · e4d57f6
1 parent af86a02
commit e4d57f6
Show file tree

Hide file tree

Showing 18 changed files with 636 additions and 299 deletions.
diff --git 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')
+  }
+  await 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)
+  await 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'
+  )
+  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.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
@@ -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')
+  }
+  await 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)
+  await 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'
+  )
+  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.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
@@ -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
@@ -10,9 +10,7 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "<all_urls>"
-      ],
+      "matches": ["<all_urls>"],
       "js": ["./content/scripts.tsx"]
     }
   ],

diff --git 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,50 +20,62 @@ 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
+  await test.expect(shadowRootHandle).not.toBeNull()
+
+  // Verify if the Shadow DOM contains children
+  const shadowChildrenCount = await shadowRootHandle.evaluate(
+    (shadowRoot: ShadowRoot) => shadowRoot.children.length
+  )
+  await 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)
+  await 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('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)
   }
@@ -69,6 +85,13 @@ test('should load all images successfully', async ({page}) => {
 
 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'))
 })