Improve waiting on new tabs in tests by monitoring console messages

src/popup.ts

@@ -2,6 +2,7 @@ import * as browser from 'webextension-polyfill'
 
 document.querySelector('#settings').addEventListener('click', () => {
  browser.runtime.openOptionsPage()
+ console.log('open options page')
 })
 
 const defaults = {

src/sites.ts

@@ -685,11 +685,7 @@ const sites: Sites = {
  },
  'www.stimme.de': {
  testSetup: async (page) => {
- const buttonHandle = await page.evaluateHandle('document.querySelector("#cmpwrapper")?.shadowRoot?.querySelector("#cmpwelcomebtnyes")')
- if (buttonHandle) {
- const buttonElement = buttonHandle.asElement()
- await buttonElement.click.bind(buttonElement)()
- }
+ await page.locator('#cmpwrapper').evaluate((node) => node.shadowRoot.querySelector('#cmpwelcomebtnyes').click())
  },
  examples: [
  {

tests/extension.spec.ts

@@ -1,29 +1,45 @@
+import { type Page } from '@playwright/test'
 import { expect, test } from './fixtures'
 
 const EXAMPLE_URL = 'https://www.zeit.de/2021/11/soziale-ungleichheit-identitaetspolitik-diskriminierung-armut-bildung'
 
-test('content script', async ({ page, context }) => {
+const waitForConsoleMessage = async (backgroundPage: Page, prefix: string) => {
+ while (true) {
+ const consoleEvent = await backgroundPage.waitForEvent('console')
+ if (consoleEvent.text().startsWith(prefix)) {
+ await backgroundPage.waitForTimeout(50)
+ return true
+ }
+ }
+}
+
+test('content script', async ({ page, context, backgroundPage }) => {
+ const newTabCreated = waitForConsoleMessage(backgroundPage, 'tab created')
+
  await page.goto(EXAMPLE_URL)
  const shadowNode = await page.locator('.article-body > div:last-child').first()
  const shadowHTML = await shadowNode.evaluate(node => node.shadowRoot.innerHTML)
  await expect(shadowHTML).toContain('BibBot')
  await expect(shadowHTML).toContain('Pressedatenbank wird aufgerufen...')
  // library login page is opened in a new tab
  // but not as a popup from current page, instead via the background script
- await page.waitForTimeout(300)
+ await newTabCreated
  const pages = context.pages()
  console.log(pages.map(p => p.url()))
  const newPage = pages.find(p => p.url().indexOf('https://www.voebb.de/oidcp/authorize') !== -1)
  expect(newPage).toBeTruthy()
 })
 
 test('popup page', async ({ page, extensionId, context }) => {
+ const optionsPageOpen = waitForConsoleMessage(page, 'open options page')
+
  await page.goto(`chrome-extension:https://${extensionId}/popup/popup.html`)
  await expect(page.locator('body')).toContainText('BibBot')
  const settingsLink = await page.locator('#settings')
  await expect(settingsLink).toHaveText('Einstellungen')
  await settingsLink.click()
- await page.waitForTimeout(300)
+
+ await optionsPageOpen
  const pages = context.pages()
  console.log(pages.map(p => p.url()))
  const newPage = pages.find(p => p.url().indexOf(`chrome-extension:https://${extensionId}/options/options.html`) !== -1)

tests/fixtures.ts

@@ -1,9 +1,10 @@
-import { test as base, chromium, type BrowserContext } from '@playwright/test'
+import { test as base, chromium, type BrowserContext, type Page } from '@playwright/test'
 import path from 'path'
 
 export const test = base.extend<{
  context: BrowserContext;
  extensionId: string;
+ backgroundPage: Page;
 }>({
  // eslint-disable-next-line no-empty-pattern
  context: async ({}, use) => {
@@ -18,6 +19,14 @@ export const test = base.extend<{
  await use(context)
  await context.close()
  },
+ backgroundPage: async ({ context }, use) => {
+ // for manifest v2:
+ let [background] = context.backgroundPages()
+ if (!background) {
+ background = await context.waitForEvent('backgroundpage')
+ }
+ await use(background)
+ },
  extensionId: async ({ context }, use) => {
  // for manifest v2:
  let [background] = context.backgroundPages()