Exemples de code pour le paquet @axe-devtools/reporter

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

Exemples de code montrant comment utiliser le paquet @axe-devtools/reporter avec d'autres paquets Axe DevTools Node

Not for use with personal data

Cet article fournit des exemples de code qui démontrent comment utiliser le paquet @axe-devtools/reporter avec d'autres paquets Axe DevTools Node.

note

La classe AxeDevToolsReporter hérite de la classe AxeDevToolsLogger, vous pouvez appeler les méthodes du logger en utilisant la classe AxeDevToolsReporter, spécifiquement la méthode logTestResult.

JavaScript pour Navigateurs

L'exemple de code dans cette section montre une implémentation d'un test React avec la React Testing Library et la conversion des résultats en un rapport HTML.

Paquets utilisés :

  • @axe-devtools/browser
  • @axe-devtools/reporter
import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import { Reporter } from '@axe-devtools/reporter';
import "babel-polyfill"

const axeReporter = new Reporter("AxeDevTools-Badcomp-Results", "./test-results/");

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ axe DevTools reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
       axeReporter.logTestResult("badComp", results);
       expect(results.violations.length).toBe(0);
       done();
     });
   });

  afterAll(async (done)  => {
    await axeReporter.buildHTML('./test-results/'); 
    done();
  });
});

Pour plus d'informations sur le paquet Node browser (@axe-devtools/browser), voir la documentation ou un exemple prêt à l'emploi sur GitHub.

Playwright

Paquets utilisés :

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

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

Pour plus d'informations sur le paquet Node Playwright (@axe-devtools/playwright), voir la documentation ou un exemple prêt à l'emploi sur GitHub.

Puppeteer

Paquets utilisés :

  • @axe-devtools/puppeteer
  • @axe-devtools/reporter
const puppeteer = require('puppeteer');
const rimraf = require('rimraf');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //launch reporter
    reporter = new Reporter('puppeteer', './a11y_Results');

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    browser.close();
})();

Pour plus d'informations sur le paquet Node Puppeteer (@axe-devtools/puppeteer), voir la documentation ou un exemple prêt à l'emploi sur GitHub.

WebdriverIO

Paquets utilisés :

  • @axe-devtools/webdriverio
  • @axe-devtools/reporter
const rimraf = require('rimraf');
const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //initialize driver
    const client = webdriverio.remote({
      desiredCapabilities: {
        browserName: 'chrome'
      }
    });
    await client.init();
  
    //initialize axe DevTools
    const axeDevTools = new AxeDevToolsWebdriverIO({ client });
    
    //initialize reporter
    reporter = new Reporter('webdriverio', './a11y_Results');

    //access test page
    await client.url('https://broken-workshop.dequelabs.com');

    //scan page
    const results = await axeDevTools.analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    await client.end();
})();

Pour plus d'informations sur le paquet Node.js WebdriverIO (@axe-devtools/webdriverio), voir la documentation ou un exemple prêt à l'emploi sur GitHub.

WebDriverJS

Paquets utilisés :

  • @axe-devtools/webdriverjs
  • @axe-devtools/reporter
const rimraf = require('rimraf');
const AxeDevToolsWebdriverJS = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');
const { Reporter } = require('@axe-devtools/reporter');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {

  //remove previous axe devtools output files
  rimraf.sync("./a11y_Results/*");

  //initialize reporter
  reporter = new Reporter('webdriverjs', './a11y_Results');

  new AxeDevToolsWebriverJS(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');
  });
});

Pour plus d'informations sur le paquet Node WebDriverJS (@axe-devtools/webdriverjs), voir la documentation ou un exemple prêt à l'emploi sur GitHub.