Importazione e Inizializzazione per Playwright

Una volta installato Axe DevTools for Web, è necessario importarlo nel proprio ambiente di test e inizializzare il pacchetto.

Prerequisiti

Per importare e inizializzare Axe DevTools for Web, deve prima essere installato. Se non lo hai ancora fatto, leggi la guida su come installarlo da un bundle, dal tuo repository di artifact, o dall'Agora di Deque. È inoltre necessario avere una versione di Playwright scaricata e configurata a propria scelta.

Importazione e Inizializzazione

Importa sia Axe DevTools per Web che Playwright. La sintassi dipende dal linguaggio e dal sistema di moduli utilizzati nel tuo progetto. Scegli quella che corrisponde al tuo progetto:

JavaScript con moduli CommonJS

Questa è l'impostazione predefinita per un progetto Node.js senza "type": "module" nel suo package.json.

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

JavaScript con moduli ES

Usa questa sintassi in un progetto con "type": "module" nel suo package.json, o in file .mjs.

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

TypeScript

TypeScript utilizza la stessa sintassi import dei moduli ES. @axe-devtools/playwright include le proprie dichiarazioni di tipo, quindi non occorre installare un pacchetto @types/ separato. I risultati della scansione sono tipizzati come AxeResults, esportati da axe-core:

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

Inizializzare Playwright

Una volta importato Axe DevTools for Web, puoi inizializzare il driver. Ogni scansione richiede una propria istanza di Axe DevTools for Web, quindi la inizializzerai mentre scrivi i test.

Il codice di inizializzazione è lo stesso in JavaScript e TypeScript, ad eccezione del fatto che TypeScript può inferire o annotare i tipi restituiti da Playwright. 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, con i tipi scritti espressamente:

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

Prossimi Passi

Una volta installato, importato e inizializzato Axe DevTools for Web, sei pronto per passare alla scansione dell'accessibilità e alla scrittura dei test di accessibilità. Per farlo, consulta la guida su scrivere test.

Risoluzione dei Problemi

Se hai problemi con l'importazione o l'inizializzazione di Axe DevTools for Web, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro supporto, o inviaci un'email. Saremo felici di aiutarti.