Testen Schrijven voor Axe DevTools voor Web voor WebDriverJS

Testen schrijven met Axe DevTools

De afzonderlijke fragmenten in de onderstaande secties zijn in JavaScript geschreven en compileren ongewijzigd 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 hebt gedaan, lees dan de handleiding over hoe je het kunt installeren vanuit een bundel, vanuit je artifact repository, of vanuit Deque's Agora. Je hebt ook een gedownloade en geconfigureerde Selenium WebDriver naar keuze nodig.

Importeren en Initialiseren

Importeer zowel Axe DevTools for Web als WebDriverJS. De syntaxis hangt af van de taal en het modulsysteem dat je project gebruikt. Kies degene die bij je project past:

JavaScript met CommonJS modules

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

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript met ES modules

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

TypeScript gebruikt dezelfde import syntaxis als ES-modules. @axe-devtools/webdriverjs levert zijn eigen typedefinities, dus er is geen apart @types/ pakket om te installeren. Scanresultaten zijn getypeerd als AxeResults, die axe-core exporteert:

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

De Driver Initialiseren

Zodra je Axe DevTools for Web hebt geïmporteerd, kun je de driver initialiseren. Elke scan vereist zijn eigen instance van Axe DevTools for Web, dus je initialiseert dat terwijl je tests schrijft.

In JavaScript:

const driver = new webdriver.Builder().forBrowser('chrome').build();

In TypeScript, gebruikmakend van de Builder en WebDriver typen hierboven geïmporteerd:

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

Scancorrelatie verkrijgen

Voordat je een pagina kunt scannen op toegankelijkheid, moet deze toegankelijk zijn voor de webdriver.

await driver.get('<URL>');

Zodra de webdriver toegang heeft tot de pagina, kun je deze scannen met Axe DevTools en de resultaten opslaan. De eenvoudigste manier om de resultaten van de scan te bekijken, is door het resultatenobject in de console te loggen.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Volledig Voorbeeldbestand

Dezelfde test wordt hieronder zowel in JavaScript als in TypeScript getoond. De Axe DevTools API is in beide identiek; de TypeScript-versie maakt gebruik van import-syntaxis en annoteert de driver en de scanresultaten.

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

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

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Volgende stappen

Nu je een toegankelijkheidsscan met succes hebt voltooid, ben je klaar om verder te gaan met meer geavanceerde scantopics zoals rapporten genereren en het resultatenobject gebruiken.

Probleemoplossing

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