Instructions pour Playwright et TypeScript

Link to Instructions pour Playwright et TypeScript copied to clipboard

Configuration de vos tests avec Playwright et TypeScript

Not for use with personal data

Au niveau racine de votre dossier de test, installez le package @axe-core/watcher et toutes ses dépendances à l'aide de npm ou de votre gestionnaire de packages préféré (par exemple, Yarn ou pnpm).
```
npm install --save-dev @axe-core/watcher
```
Dans fichiers de test, votre ou vos, importez la fonction playwrightConfig(), la fonction wrapPlaywright() et la classe PlaywrightController à partir de @axe-core/watcher :
```
import {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} from '@axe-core/watcher';
```

Dans votre code de configuration de test (généralement dans un bloc before ou beforeAll), encapsulez tout code existant pour créer une instance browserContext avec un appel à playwrightConfig tout en fournissant votre clé API :

import { chromium, BrowserContext } from 'playwright';
import { playwrightConfig } from '@axe-core/watcher';

const API_KEY = process.env.API_KEY

const browserContext: BrowserContext = await chromium.launchPersistentContext(
  /**
   * We set userDataDir to an empty string which saves
   * browser data to a temporary directory
   * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
   */
  '',
  playwrightConfig({
    axe: {
      apiKey: API_KEY
    },
    /**
     * We support both headless and headed mode with Chrome.
     * 
     * For headless mode:
     * - Use '--headless=chrome' for browsers v94-108.
     * - Use '--headless=new' for browsers v109+.
     * 
     * For headed mode:
     * - Remove the '--headless' flag.
     * 
     * @see https://playwright.dev/docs/chrome-extensions#headless-mode
     */
    headless: false,
    args: ['--headless=new']
  })
);

Une fois que vous avez une instance de page, créez une instance de la classe PlaywrightController et encapsulez votre browserContext :

// Create a page instance, using your browser context.
let page = await browserContext.newPage();

// Initialize the PlaywrightController by passing in the Playwright page.
const controller = new PlaywrightController(page);

// Use the new wrapped Playwright page instance.
page = wrapPlaywrightPage(page, controller);

Enfin, assurez-vous que tous les résultats des tests d’axe Watcher sont complètement traités. Pour ce faire, ajoutez le bloc de code suivant à votre code de démontage de test (généralement dans un bloc afterEach) :
```
afterEach(async () => {
  await controller.flush()
})
```

Instructions pour Playwright et TypeScript

Is this page helpful?

Help us improve this page

Try axe® Developer Hub

Still need help?