Conseils et astuces

Cette page contient un ensemble de trucs et astuces utiles pour tester une extension web.

Si vous définissez une entrée d'action de navigateur default_popup dans votre manifeste d'extension , vous pouvez tester cette page HTML directement, car cliquer sur l'icône d'extension dans la barre supérieure du navigateur ne fonctionnera pas. Au lieu de cela, vous devez ouvrir directement le fichier html popup.

Dans Chrome, cela fonctionne en récupérant l'ID de l'extension et en ouvrant la page pop-up via browser.url('...'). Le comportement sur cette page sera le même que dans le popup. Pour ce faire, nous vous recommandons d'écrire la commande personnalisée suivante:

export async function openExtensionPopup (this: WebdriverIO.Browser, extensionName: string, popupUrl = 'index.html') {
  if ((this.capabilities as Capabilities.Capabilities).browserName !== 'chrome') {
    throw new Error('This command only works with Chrome')
  }
  await this.url('chrome://extensions/')

  const extensions = await this.$$('>>> extensions-item')
  const extension = await extensions.find(async (ext) => (
    await ext.$('#name').getText()) === extensionName
  )

  if (!extension) {
    const installedExtensions = await extensions.map((ext) => ext.$('#name').getText())
    throw new Error(`Couldn't find extension "${extensionName}", available installed extensions are "${installedExtensions.join('", "')}"`)
  }

  const extId = await extension.getAttribute('id')
  await this.url(`chrome-extension://${extId}/popup/${popupUrl}`)
}

declare global {
  namespace WebdriverIO {
      interface Browser {
        openExtensionPopup: typeof openExtensionPopup
      }
  }
}

Dans votre wdio.conf.js vous pouvez importer ce fichier et enregistrer la commande personnalisée dans votre avant hook, par exemple.:

import type { Options } from '@wdio/testrunner'
import { browser } from '@wdio/globals'

import { openExtensionPopup } from './support/customCommands'

export const config: Options.Testrunner = {
  // ...
  before: () => {
    browser.addCommand('openExtensionPopup', openExtensionPopup)
  }
}

Maintenant, dans votre test, vous pouvez accéder à la page pop-up via :

await browser.openExtensionPopup('My Web Extension')

Tester la popup modale dans Chrome​

Tester la popup modale dans Chrome