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 Seiten mit Axe DevTools zu testen, müssen Sie es zuerst in Ihr Projekt importieren und initialisieren. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, sehen Sie sich diesem Leitfaden an, um zu erfahren, wie das geht.

Scan-Kontext erhalten

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.