Instructies voor Playwright en TypeScript

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Uw tests configureren met Playwright en TypeScript

Not for use with personal data

Installeer op het hoofdniveau van je testmap het @axe-core/watcher pakket en al zijn afhankelijkheden met behulp van npm of je voorkeurspakketmanager (bijvoorbeeld, yarn of pnpm).
```
npm install --save-dev @axe-core/watcher
```
Importeer in uw testbestand of -bestanden de playwrightConfig() functie, de wrapPlaywright() functie, en de PlaywrightController klasse uit @axe-core/watcher/playwright:
```
import {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} from '@axe-core/watcher/playwright';
```

In uw testopzetcode (meestal in een before of beforeAll blok), omring alle bestaande code voor het maken van een browserContext instantie met een oproep naar playwrightConfig() , terwijl u uw API-sleutel opgeeft:


const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

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: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    /**
     * 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']
  })
);

Zorg ervoor dat u ACCESSIBILITY_API_KEY en PROJECT_ID in uw omgeving instelt op uw persoonlijke API-sleutel (te vinden in uw axe-account, **API-SLEUTELS** tab) en uw project-ID (weergegeven bovenaan deze instructies toen u uw project aanmaakte of beschikbaar op de projectpagina door te kiezen voor **Project configureren** onder **Instellingen**).

Zodra u een page instantie heeft, maak een instantie van de PlaywrightController klasse en omring uw 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);

Zorg er ten slotte voor dat alle testresultaten van axe Watcher worden verwerkt. Voeg hiervoor het volgende codeblok toe aan uw testopruimcode (meestal in een afterEach blok):
```
afterEach(async () => {
  await controller.flush()
})
```

Instructies voor Playwright en TypeScript

Is this page helpful?

Help us improve this page

Still need help?