Importation et initialisation pour Playwright

Une fois que vous avez installé Axe DevTools for Web, vous devez l'importer dans votre configuration de test et initialiser le package.

Prérequis

Pour importer et initialiser Axe DevTools for Web, il doit d'abord être installé. Si ce n'est pas encore fait, lisez le guide sur comment l'installer à partir d'un bundle, depuis votre dépôt d'artefacts ou depuis l'Agora de Deque. Vous avez également besoin d'une version téléchargée et configurée de Playwright de votre choix.

Importation et Initialisation

Importez à la fois Axe DevTools pour le Web et Playwright. La syntaxe dépend du langage et du système de modules utilisés par votre projet. Choisissez celui qui correspond à votre projet :

JavaScript avec modules CommonJS

C'est la valeur par défaut pour un projet Node.js sans "type": "module" dans son package.json.

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

JavaScript avec modules ES

Utilisez cette syntaxe dans un projet avec "type": "module" dans son package.json, ou dans des fichiers .mjs.

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

TypeScript

TypeScript utilise la même syntaxe import que les modules ES. @axe-devtools/playwright inclut ses propres déclarations de types, il n'y a donc pas de paquet @types/ séparé à installer. Les résultats de l'analyse sont typés comme AxeResults, que axe-core exporte :

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

Initialisation de Playwright

Une fois que vous avez importé Axe DevTools for Web, vous pouvez initialiser le pilote. Chaque analyse nécessite sa propre instance de Axe DevTools for Web, vous devrez donc l'initialiser lors de l'écriture des tests.

Le code d'initialisation est le même en JavaScript et en TypeScript, sauf que TypeScript peut inférer ou annoter les types que Playwright retourne. En 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();

En TypeScript, avec les types écrits :

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();

Prochaines étapes

Une fois que vous avez installé, importé et initialisé Axe DevTools for Web, vous êtes prêt à passer à l'analyse de l'accessibilité et à l'écriture de tests d'accessibilité. Pour ce faire, consultez le guide sur rédaction des tests.

Dépannage

Si vous rencontrez des difficultés avec l'importation ou l'initialisation de Axe DevTools for Web, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons ravis de vous aider.