Importeren en Initialiseren voor Playwright

Zodra je Axe DevTools voor Web hebt geïnstalleerd, moet je het in je testomgeving importeren en het pakket initialiseren.

Vereisten

Om Axe DevTools voor Web te importeren en te initialiseren, moet het eerst worden geïnstalleerd. Als je dit nog niet hebt gedaan, lees dan de handleiding over hoe je het installeert vanuit een bundel, van je artifact repository, of van Deque's Agora. Je hebt ook een gedownloade en geconfigureerde versie van Playwright naar keuze nodig.

Importeren en Initialiseren

Importeer zowel Axe DevTools voor Web als Playwright. De syntax hangt af van de taal en het modulesysteem dat je project gebruikt. Kies degene die bij je project past:

JavaScript met CommonJS-modules

Dit is de standaard voor een Node.js-project zonder "type": "module" in zijn package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

JavaScript met ES-modules

Gebruik deze syntax in een project met "type": "module" in zijn package.json, of in .mjs bestanden.

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript gebruikt dezelfde import-syntax als ES-modules. @axe-devtools/playwright levert zijn eigen typeverklaringen mee, dus er is geen apart @types/-pakket nodig om te installeren. Scanresultaten zijn getypt als AxeResults, die axe-core exporteert:

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Playwright initialiseren

Zodra je Axe DevTools voor Web hebt geïmporteerd, kun je de driver initialiseren. Elke scan vereist zijn eigen instantie van Axe DevTools voor Web, dus je zult dat initialiseren terwijl je tests schrijft.

De initiatiecode is hetzelfde in JavaScript en TypeScript, behalve dat TypeScript de types kan afleiden of annoteren die Playwright retourneert. In JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

In TypeScript, met de types uitgeschreven:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Volgende Stappen

Zodra je Axe DevTools voor Web hebt geïnstalleerd, geïmporteerd en geïnitialiseerd, ben je klaar om door te gaan met scannen op toegankelijkheid en het schrijven van toegankelijkheidstests. Om dat te doen, zie de handleiding over tests schrijven.

Problemen oplossen

Als je problemen hebt met het importeren of initialiseren van Axe DevTools voor Web, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze helpdesk, of stuur ons een e-mail. We helpen je graag.