Anweisungen für Playwright und TypeScript

Link to Anweisungen für Playwright und TypeScript copied to clipboard

Konfigurieren Sie Ihre Tests mit Playwright und TypeScript

Not for use with personal data

Installieren Sie auf der Stammebene Ihres Testordners das Paket @axe-core/watcher und alle seine Abhängigkeiten mit npm oder Ihrem bevorzugten Paketmanager (z. B. Yarn oder pnpm).
```
npm install --save-dev @axe-core/watcher
```
Importieren Sie in Ihre Testdatei(en) die Funktion playwrightConfig(), die Funktion wrapPlaywright() und die Klasse PlaywrightController aus @axe-core/watcher:
```
import {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} from '@axe-core/watcher';
```

Umschließen Sie in Ihrem Test-Setup-Code (normalerweise in einem before - oder beforeAll -Block) jeglichen vorhandenen Code zum Erstellen einer browserContext -Instanz mit einem Aufruf von playwrightConfig und geben Sie dabei Ihren API-Schlüssel an:

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']
  })
);

Sobald Sie eine Seiteninstanz haben, erstellen Sie eine Instanz der Klasse PlaywrightController und umschließen Sie Ihren 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);

Stellen Sie abschließend sicher, dass alle Testergebnisse aus Axe Watcher vollständig verarbeitet sind. Fügen Sie dazu den folgenden Codeblock zu Ihrem Test-Teardown-Code hinzu (normalerweise in einem afterEach -Block):
```
afterEach(async () => {
  await controller.flush()
})
```

Anweisungen für Playwright und TypeScript

Is this page helpful?

Help us improve this page

Try axe® Developer Hub

Still need help?