Tests für Axe DevTools for Web für WebdriverIO schreiben

Tests mit Axe DevTools schreiben

Die einzelnen Ausschnitte in den folgenden Abschnitten sind JavaScript, und sie compilen unverändert in TypeScript. Der Vollständige Beispieldatei Abschnitt zeigt den vollständigen Test in beiden Sprachen.

Voraussetzungen

Um Axe DevTools für Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Wenn Sie das noch nicht getan haben, lesen Sie die Anleitung zur Installation aus einem Bundle, aus Ihrem Artefakt-Repository oder aus Deques Agora. Sie müssen auch WebdriverIO heruntergeladen und konfiguriert haben.

Importieren und Initialisieren

Importieren Sie sowohl Axe DevTools für Web als auch WebdriverIO. Die Syntax hängt von der Sprache und dem Modulsystem ab, das Ihr Projekt verwendet. Wählen Sie diejenige, die zu Ihrem Projekt passt:

JavaScript mit CommonJS-Modulen

Dies ist die Standardeinstellung für ein Node.js-Projekt ohne "type": "module" in seiner package.json.

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

JavaScript mit ES-Modulen

Verwenden Sie diese Syntax in einem Projekt mit "type": "module" in seiner package.json oder in .mjs-Dateien.

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

TypeScript

TypeScript verwendet die gleiche import-Syntax wie ES-Module. @axe-devtools/webdriverio liefert eigene Typdeklarationen, sodass kein separates @types/-Paket installiert werden muss. Scan-Ergebnisse sind als AxeResults typisiert, die axe-core exportiert:

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

Initialisierung des Clients

An diesem Punkt können Sie Ihre Webdriver innerhalb Ihrer Testfunktion initialisieren. In JavaScript:

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

In TypeScript ist der Client ein WebdriverIO.Browser, den AxeDevToolsWebdriverIO erwartet:

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

Dann können Sie Axe DevTools für Web mit dem Webdriver-Client initialisieren. Diese Anweisung ist in beiden Sprachen gleich:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Abrufen des Scan-Kontexts

Bevor Sie eine Seite auf Barrierefreiheit scannen können, muss sie von WebdriverIO aufgerufen werden.

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

Sobald WebdriverIO die Seite aufgerufen hat, können Sie sie mit Axe DevTools scannen und die Ergebnisse speichern. Der einfachste Weg, die Ergebnisse des Scans zu betrachten, ist, das Ergebnisobjekt in die Konsole zu loggen.

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

Vollständige Beispieldatei

Der gleiche Test wird unten in JavaScript und in TypeScript gezeigt. Die Axe DevTools-API ist in beiden identisch; die TypeScript-Version verwendet die import-Syntax und annotiert den Client und die Scan-Ergebnisse.

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;
  });

Nächste Schritte

Nachdem Sie erfolgreich einen Barrierefreiheitsscan abgeschlossen haben, sind Sie bereit, zu fortgeschritteneren Scan-Themen wie Berichte generieren und das Ergebnisobjekt verwenden überzugehen.

Fehlerbehebung

Wenn Sie Probleme mit dem Erhalt der Scan-Ergebnisse haben, kontaktieren Sie direkt Ihren Deque-Vertreter, kontaktieren Sie uns über unseren Supportdesk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.