Istruzioni per Playwright e JavaScript

Link to Istruzioni per Playwright e JavaScript copied to clipboard

Configurazione dei test con Playwright e JavaScript

Not for use with personal data

Nella radice della cartella di test, installa il pacchetto @axe-core/watcher e tutte le sue dipendenze utilizzando npm o il tuo gestore di pacchetti preferito (ad esempio, Yarn o pnpm).
```
npm install --save-dev @axe-core/watcher
```
Nel file o nei file di test, importa la funzione playwrightConfig(), la funzione wrapPlaywright() e la classe PlaywrightController da @axe-core/watcher:
```
const {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} = require('@axe-core/watcher')
```

Nel codice di configurazione del test (in genere in un blocco before o beforeAll ), inserisci qualsiasi codice esistente per creare un'istanza browserContext con una chiamata a playwrightConfig mentre fornisci la tua chiave API:

const browserContext = await playwright.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: process.env.API_KEY
    },
    /**
     * 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']
  })
);

Una volta che hai un'istanza di pagina , crea un'istanza della classe PlaywrightController e avvolgi il tuo 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);

Infine, assicurarsi che tutti i risultati dei test di axe Watcher siano stati completamente elaborati. Per fare ciò, aggiungi il seguente blocco di codice al tuo codice di smantellamento del test (in genere in un blocco afterEach ):
```
afterEach(async () => {
  await controller.flush()
})
```

Istruzioni per Playwright e JavaScript

Is this page helpful?

Help us improve this page

Try axe® Developer Hub

Still need help?