Instruções para Playwright e TypeScript

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

Configurando seus testes com Playwright e TypeScript

Not for use with personal data

  1. No nível raiz da sua pasta de testes, instale o @axe-core/watcher pacote e todas as suas dependências usando npm ou o seu gerenciador de pacotes preferido (por exemplo, yarn ou pnpm).

    npm install --save-dev @axe-core/watcher

  2. No seu arquivo ou arquivos de teste, importe a playwrightConfig() função, a wrapPlaywright() função e a PlaywrightController classe de @axe-core/watcher/playwright:

    import {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} from '@axe-core/watcher/playwright';

  3. No código de configuração do seu teste (geralmente em um before ou beforeAll bloco), envolva qualquer código existente para criar uma instância de browserContext com uma chamada para playwrightConfig() enquanto fornece sua chave de API:

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

const browserContext: BrowserContext = await 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
    },
    /**
     * 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']
  })
);

    Certifique-se de definir ACCESSIBILITY_API_KEY e PROJECT_ID no seu ambiente como a sua chave de API pessoal (encontrada na sua conta do axe, na aba **API KEYS** ) e o seu ID de projeto (mostrado no topo destas instruções quando você criou seu projeto ou disponível na página de Projetos, escolhendo **Configurar projeto** em **Configurações**).

  4. Uma vez que você tenha uma instância de page , crie uma instância da classe PlaywrightController e envolva seu 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);

  5. Finalmente, certifique-se de que todos os resultados dos testes do axe Watcher sejam descarregados. Para fazer isso, adicione o seguinte bloco de código ao seu código de desmontagem de teste (geralmente em um bloco afterEach ):

    afterEach(async () => {
  await controller.flush()
})

Is this page helpful?

Help us improve this page

Still need help?