Tests schrijven voor Axe DevTools voor Web voor WebdriverIO

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

Hoe effectieve testen voor toegankelijkheid te schrijven met Axe DevTools voor Web voor WebdriverIO

Not for use with personal data

Tests schrijven met Axe DevTools

De individuele fragmenten in de onderstaande secties zijn JavaScript en compileren onveranderd in TypeScript. De Volledig Voorbeeldbestand sectie geeft de volledige test in beide talen.

Vereisten

Om pagina's met Axe DevTools te testen, moet je het eerst importeren en initialiseren in je project. Als je deze stap nog niet hebt voltooid, bekijk deze gids voor instructies.

Scancontext verkrijgen

Voordat je een pagina op toegankelijkheid kunt scannen, moet deze door WebdriverIO benaderd worden.

await client.url('<URL>');

Zodra WebdriverIO de pagina heeft benaderd, kun je deze scannen met Axe DevTools en de resultaten opslaan. De eenvoudigste manier om de scanresultaten te bekijken is door het resultatenobject in de console te loggen.

const results = await axeDevTools.analyze();
console.log(results);

Volledig voorbeeldbestand

Dezelfde test wordt hieronder weergegeven in JavaScript en in TypeScript. De Axe DevTools API is identiek in beide; de TypeScript-versie gebruikt import syntax en annoteert de client en de scanresultaten.

JavaScript

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

const simpleExample = async () => {
  const client = await webdriverio.remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

TypeScript

import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';

const simpleExample = async (): Promise<AxeResults> => {
  const client: WebdriverIO.Browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results: AxeResults = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

Volgende stappen

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om door te gaan naar meer geavanceerde scanthema's zoals rapporten genereren en het resultatenobject gebruiken.

Probleemoplossing

Als je problemen hebt met het verkrijgen van scanresultaten, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze hulplijn, of stuur ons een e-mail. We helpen je graag verder.