Tests schrijven voor Axe DevTools voor Web voor WebdriverIO

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 Axe DevTools for Web te importeren en initialiseren, moet het eerst geïnstalleerd zijn. Als je dat nog niet gedaan hebt, lees dan de handleiding over hoe je het installeert uit een bundel, uit je artifact-opslagplaats of uit Deque's Agora. Je moet ook WebdriverIO gedownload en geconfigureerd hebben.

Importeren en Initialiseren

Importeer zowel Axe DevTools for Web als WebdriverIO. De syntaxis hangt af van de taal en het module-systeem dat je project gebruikt. Kies de optie die past bij je project:

JavaScript met CommonJS-modules

Dit is de standaard voor een Node.js-project zonder "type": "module" in zijn package.json.

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

JavaScript met ES-modules

Gebruik deze syntaxis in een project met "type": "module" in zijn package.json, of in .mjs bestanden.

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

TypeScript

TypeScript gebruikt dezelfde import syntaxis als ES-modules. @axe-devtools/webdriverio levert zijn eigen typeverklaringen, dus er is geen apart @types/ pakket om te installeren. Scanresultaten zijn getypeerd als AxeResults, die door axe-core worden geëxporteerd:

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

De Client Initialiseren

Op dit punt kun je je webdriver initialiseren binnen je testfunctie. In JavaScript:

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

In TypeScript is de client een WebdriverIO.Browser, wat het type is dat AxeDevToolsWebdriverIO verwacht:

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Daarna kun je Axe DevTools for Web initialiseren met de webdriver client. Deze instructie is hetzelfde in beide talen:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

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.