Instructies voor Playwright en JavaScript

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

Je tests configureren met Playwright en JavaScript

Not for use with personal data

note

Axe Watcher vereist een ondersteunde browser: Chrome for Testing (een aparte browserinstallatie, verschillend van Google Chrome), Chromium of Microsoft Edge. Playwright en Puppeteer beheren hun eigen browserdownloads en installeren altijd een versie die Axe Watcher ondersteunt, dus er is niets dat je zelf hoeft te installeren. Zie Browsers instellen en configureren voor gebruik met Axe Watcher voor details.

Installeer in de hoofdmap van je testmap het @axe-core/watcher-pakket en al zijn afhankelijkheden met npm of je voorkeurspakketbeheerder (bijvoorbeeld yarn of pnpm).
```
npm install --save-dev @axe-core/watcher
```
Importeer in je testbestand(en) de playwrightConfig() functie, de wrapPlaywright() functie en de PlaywrightController klasse van @axe-core/watcher/playwright:
```
const {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} = require('@axe-core/watcher/playwright')
```

In je testopzetcode (typisch in een before of beforeAll blok), omwikkel eventuele bestaande code voor het creëren van een browserContext instantie met een aanroep naar playwrightConfig() terwijl je je API-sleutel verstrekt:

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

const browserContext = await playwright.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,
      serverURL: SERVER_URL
    },
    /**
     * 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 je ACCESSIBILITY_API_KEY en PROJECT_ID in je omgeving instelt op je persoonlijke API-sleutel (te vinden in je Axe-account, tabblad **API-SLEUTELS**) en je project-ID (weergegeven bovenaan deze instructies toen je je project maakte of beschikbaar van de Projecten-pagina door **Project configureren** te kiezen onder **Instellingen**). Als je organisatie een regionale, private cloud of on-premises Axe Developer Hub-instantie gebruikt, stel dan ook SERVER_URL in op de basis-URL van die instantie (bijvoorbeeld, https://axe-eu.deque.com); zo niet, laat dan SERVER_URL weg en zal de standaard https://axe.deque.com gebruikt worden.

Zodra je een page instantie hebt, creëer een instantie van de PlaywrightController klasse en omwikkel je 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 geleegd. Voeg hiervoor het volgende codeblok toe aan je test teardown code (meestal in een afterEach-blok):
```
afterEach(async () => {
  await controller.flush()
})
```

Instructies voor Playwright en JavaScript

Is this page helpful?

Help us improve this page

Still need help?