Importação e Inicialização para Playwright

Depois de instalar o Axe DevTools for Web, você precisa importá-lo para sua configuração de testes e inicializar o pacote.

Pré-requisitos

Para importar e inicializar o Axe DevTools for Web, ele precisa estar instalado primeiro. Se ainda não fez isso, leia o guia sobre como instalá-lo a partir de um pacote, do seu repositório de artefatos, ou do Agora da Deque. Você também precisa de uma versão do Playwright baixada e configurada à sua escolha.

Importação e Inicialização

Importe tanto o Axe DevTools para Web quanto o Playwright. A sintaxe depende da linguagem e do sistema de módulos que seu projeto utiliza. Escolha aquele que corresponde ao seu projeto:

JavaScript com módulos CommonJS

Este é o padrão para um projeto Node.js sem "type": "module" no seu package.json.

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

JavaScript com módulos ES

Use esta sintaxe em um projeto com "type": "module" no seu package.json, ou em arquivos .mjs.

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

TypeScript

O TypeScript usa a mesma sintaxe import que os módulos ES. @axe-devtools/playwright fornece suas próprias declarações de tipo, então não há um pacote @types/ separado para instalar. Os resultados da análise são tipados como AxeResults, que o axe-core exporta:

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

Inicializando o Playwright

Depois de importar o Axe DevTools for Web, você pode inicializar o driver. Cada varredura requer sua própria instância do Axe DevTools for Web, então você vai inicializá-la enquanto escreve os testes.

O código de inicialização é o mesmo em JavaScript e TypeScript, exceto que o TypeScript pode inferir ou anotar os tipos retornados pelo Playwright. Em 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();

Em TypeScript, com os tipos escritos:

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

Próximos Passos

Depois de instalar, importar e inicializar o Axe DevTools for Web, você está pronto para passar a escanear a acessibilidade e escrever testes de acessibilidade. Para isso, veja o guia sobre escrevendo testes.

Solução de Problemas

Se você tiver problemas com qualquer uma das importações ou inicializações do Axe DevTools for Web, entre em contato diretamente com seu representante da Deque, nos alcance via nossa central de suporte, ou envie-nos um email. Ficaremos felizes em ajudar.