Umfang in axe Expert

Definieren Sie einen Umfang in der axe Expert Extension, wenn Sie nur bestimmte Teile einer Seite statt der gesamten Seite testen möchten. Auf vielen Websites gibt es Elemente oder „Vorlagen“-Bereiche, die auf vielen Seiten einer Site gemeinsam sind. Dies kann verwendet werden, um gängige Vorlagenkomponenten gezielt zu testen oder sie zu ignorieren, um sich auf den Inhalt zu konzentrieren, der nicht zu den gemeinsamen Komponenten gehört (beispielsweise Kopf-, Fußzeilen- oder Navigationsabschnitte). Version 1.1 und höher der Axe Expert Extension wurden zum Definieren des Geltungsbereichs unter Verwendung von Cascading Style Sheet (CSS)-Selektoren entworfen und implementiert.

XPath-Versionsunterstützung

axe Monitor v6.0 oder höher unterstützt sowohl CSS-Selektor als auch XPath-Technologien, da zuvor Version 1.0 von XPath durch Version 1.0 von axe Expert Extension unterstützt wurde. Weitere Informationen finden Sie unter XML Path Language (XPath) Version 1.0 – W3C.

Um eine Duplizierung von Verstößen bei der Analyse mehrerer Seiten zu vermeiden, bietet Ihnen die Funktion „Definition des Anwendungsbereichs“ der Axe Expert Extension eine Möglichkeit, die Analyse auf einen oder mehrere bestimmte Abschnitte einer Seite zu beschränken und gleichzeitig den allgemeinen, wiederholten Inhalt zu ignorieren, der nicht als Teil des Anwendungsbereichs ausgewählt ist. Wenn die Definitionen des Anwendungsbereichs während der Skriptanalyse festgelegt werden, hat dies denselben Effekt wie eine statische Analyse. Mit anderen Worten: Nehmen Sie nur die definierten Teile der Seite in das Skript auf. Dieser Vorgang ist insbesondere dann nützlich, wenn nur Definitionen des Anwendungsbereichs getestet werden, die die Inhaltsbereiche der Seite abdecken. Dadurch werden die wiederkehrenden Probleme vermieden, die beim Testen von Vorlagen auftreten.

Aktivieren der Scope-Funktionalität ohne Anmeldung bei axe Monitor

Führen Sie die folgenden Schritte aus, um die Anzeige der Scope-Funktionalität im Einstellungsfenster zu aktivieren, ohne sich bei axe Monitor anzumelden:

1. Wählen Sie im Überlaufmenü der Axe Expert Extension die Option Scope , um auf die Registerkarte Einstellungen zuzugreifen:

   

2. Beim ersten Zugriff zeigt die Erweiterung die leere Registerkarte „axe Expert Extension Scope “ an:

   

   Melden Sie sich NICHT bei axe Monitor an. Erstellen Sie stattdessen einen neuen projektlosen Umfang mithilfe der beschriebenen Optionsbeschreibungen und Spaltenbeschreibungen:

   

Aktivieren der Scope-Funktionalität während der Anmeldung bei axe Monitor

Führen Sie die folgenden Schritte aus, um die Anzeige der Scope-Funktionalität im Einstellungsfenster zu aktivieren, während Sie bei axe Monitor angemeldet sind:

1. Melden Sie sich bei axe Monitor auf der Registerkarte „Einstellungen“ im axe Expert-Panel an. Ausführliche Informationen finden Sie unter Bei axe Monitor anmelden.

   Nachdem Sie sich angemeldet haben, wird der Abschnitt „Projektauswahl“ im Bereich „Einstellungen“ angezeigt.

2. Wählen Sie mithilfe des Menüs „Projekt auswählen“ und der Schaltfläche auf dem Einstellungsbereich ein Projekt aus. Ausführliche Informationen finden Sie unter Auswahl eines axe Monitor-Projekts.

   Die Funktion „Umfangsdefinitionen“ wird unter den Abschnitten zur Projektauswahl und zum Problemdownload im Einstellungsbereich angezeigt.

   

Optionsbeschreibungen

Nach der Aktivierung wird im Einstellungsbereich der axe Expert Extension der Abschnitt „Umfang“ angezeigt. Darin wird eine Optionsfeldgruppe „Analyseumfang“ mit den folgenden drei verfügbaren Optionen zur Auswahl angezeigt:

• Gesamte Seite: Wählen Sie diese Option aus, um den definierten Umfang beim Durchführen einer Analyse im Analysefenster auf die gesamte Seite einzugrenzen, die im Browser geladen wird.
• Nur Inhalt: Wählen Sie diese Option aus, um den Umfang beim Durchführen einer Analyse im Analysefenster auf nur die Inhaltselemente einzugrenzen, die nicht Teil einer in der folgenden Tabelle „Umfangsdefinitionen“ definierten Vorlage sind.
• Nur Template: Wählen Sie diese Option, um die im Analysebereich durchgeführte Analyse auf alles außer den Inhaltsdefinitionen auf der geladenen Testseite zu verfeinern.

Spaltenbeschreibungen

Unter dem Abschnitt „Bereichsoptionen analysieren“ sehen Sie den Tabellenabschnitt „Bereichsdefinitionen“, der eine Tabelle mit den folgenden sechs Informationsspalten anzeigt:

• Name: Ein Texteingabefeld, das verwendet wird, um der Bereichsdefinition einen klaren und aussagekräftigen Namen zu geben (z. B. „Überschrift“).
• Kategorie: Ein Dropdown-Menüfeld, um den Geltungsbereichstyp anzugeben. Zu den Optionen gehören „Vorlage 1–4“ (gesamte Seite) und „Inhalt 1–4“ (Inhalt der Seite). Diese können verwendet werden, um zusammengehörende Bereichsdefinitionen zu gruppieren, sodass sie leichter sortiert werden können.
• URL-Muster: Ein Texteingabefeld, das verwendet wird, um einen oder mehrere Teile einer Website anzugeben, die einen anderen Vorlagensatz als der Hauptteil der Site verwenden (beispielsweise ein Einkaufsbereich oder ein sicherer Mitgliederdienstbereich). Definiert mit einer Textzeichenfolge, die in der Seitenadresse für ein Muster mit Platzhalterübereinstimmung unmittelbar nach dem Domänennamen erscheint (beispielsweise würde „/products“ sowohl mit „/products“ als auch mit jeder darauf folgenden Textzeichenfolge übereinstimmen).
• CSS-Selektoren: Ein Texteingabefeld, um den Locator des anzusprechenden Inhalts anzugeben (z. B. /html/body für den Hauptteil des Dokuments oder html um die ganze Seite anzugeben). Im Allgemeinen müssen Sie das 'of the element' kennen, das Sie auswerten möchten. id Zum Beispiel:
  • **/Abschnitt[@id='content']** identifies a Abschnitt tag with an id of "content": <section id="content">
  • **/div[@id='header-panel']** identifies a div with an id of "header-panel": <div id="header-panel">
  • **/div[@id='right-column']** identifies a div with an id of "right-column": <div id="right-column">
  • **/html/body/section/div[2]/div[3]** identifies an item without an id: the third div inside the second div inside the section tag inside the body of the html
• + Frame: Klicken Sie hier, um unten eine neue Zeile hinzuzufügen, die ein Texteingabefeld bereitstellt, in das Sie einen ausgewählten CSS-Selektor-Locator (die DOM-Knotenbereichsdaten) eingeben können, wenn sich der Bereich innerhalb eines Frames befindet. Das Pluszeichen wird zu einem Minuszeichen, um anzuzeigen, dass die Zeile nach dem Hinzufügen wieder entfernt werden kann.
• Aktionen: Innerhalb einer leeren Zeile wird in der Spalte „Aktionen“ die Schaltfläche Speichern angezeigt, mit der Sie Ihre Auswahl/Einträge als neue Zeile mit der Bereichsdefinition hinzufügen können. Nachdem eine Zeile hinzugefügt wurde, werden die Schaltflächen Bearbeiten und Löschen angezeigt.

Fügen Sie eine Bereichsdefinition hinzu

Befolgen Sie dieses Verfahren immer dann, wenn Sie den zu analysierenden Seitenteil auf einen CSS-Selektor oder ein URL-Muster beschränken möchten, das nach Inhalt, Vorlage oder gesamter Seite kategorisiert ist. Um eine Bereichsdefinition hinzuzufügen, müssen Sie im Einstellungsfenster von Axe Expert fünf Informationsspalten in der Bereichsabschnittstabelle ausfüllen und dann auf die Schaltfläche „Speichern“ klicken.

Umfangsdefinitionen und automatische Zuordnung zu axe Monitor-Projekten

Der Bereich „Scope“ des Settings Bedienfelds wird erst angezeigt, nachdem eine Verbindung mit axe Monitor hergestellt und ein Projekt ausgewählt wurde. Wenn Sie mit diesem Verfahren einen Bereich definieren und speichern, wird die Bereichsdefinition dem ausgewählten Projekt im axe Monitor hinzugefügt. Wenn Sie das Projekt anschließend in der axe Expert Extension erneut auswählen, werden die vorhandenen Bereichsdefinitionen automatisch auf der Registerkarte Settings geladen. Jedes Mal, wenn Sie das Projekt auswählen, wird diese Umfangsdefinition automatisch von axe Monitor in die axe Expert Extension heruntergeladen.

Hinzugefügte Umfangsdefinitionen verfeinern die im Analysefenster der axe Expert Extension durchgeführte Analyse auf die Bereiche der geladenen Seite, die dem Umfang entsprechen.

Bevor Sie beginnen, ist es wichtig, dass Sie verstehen, wie Sie die Funktion „Geltungsbereichsdefinitionen“ aktivieren und den Zweck jeder Option und jedes Tabellenspaltenfelds verstehen.

1. Geben Sie im Abschnitt „Umfang“ des Einstellungsbereichs in der Spalte Name aussagekräftigen Text ein (z. B. 'Header').

2. Greifen Sie in der Spalte Category auf die Dropdown-Menüoptionen zu und wählen Sie dann ein Element in der Liste aus (z. B. 'Template 1').

   Die Category Dropdown-Liste schließt sich und Ihre Auswahl wird in die Feldanzeige übernommen.

3. Geben Sie im Feld URL pattern bei Bedarf die Textzeichenfolge nach dem Domänennamen ein (z. B. '/html/head').

4. Wählen Sie optional + Frame aus, um ein neues, leeres CSS-Selektorfeld in einer neuen Zeile darunter anzuzeigen. Geben Sie anschließend den Selektor für die Komponente ein, wenn diese in einem Frame enthalten ist.

   

5. Geben Sie in das Feld CSS Selector(s) den Selektor ein, den Sie mit dem Tool Ihrer Wahl ausgewählt haben (z. B. über right-click > Copy > Copy selector in Chrome DevTools, nachdem Sie den Quellcode im Elements Tool markiert haben).

6. Wählen Sie in der Spalte „Aktionen“ Save aus.

   

Der von Ihnen hinzugefügte Bereich wird als neue Zeile in der Tabelle angezeigt und in der Spalte „Aktionen“ werden Schaltflächen angezeigt, mit denen Sie ihn bearbeiten oder löschen können. Darüber hinaus wird unterhalb Ihrer gespeicherten Bereichszeile eine neue, leere Zeile angezeigt, in der Sie einen weiteren Bereich spezifizieren und speichern können, usw.

Sie können nun im Analyze scope Abschnitt über der Tabelle die gewünschte Option auswählen und dann auf der geladenen Seite eine Analyse durchführen, die durch den von Ihnen angegebenen Umfang definiert ist.

Bearbeiten einer Bereichsdefinition

Bearbeiten Sie eine Bereichsdefinition, wenn Sie eine vorhandene Bereichsdefinition ändern möchten, indem Sie ein oder mehrere von fünf Informationsfeldern ändern. Wählen Sie mithilfe der Option Edit in der Spalte Actions der Scope Abschnittstabelle im Bedienfeld „Einstellungen“ in axe Expert können Sie den Umfang dessen ändern, was bei der Durchführung einer Analyse der geladenen Seite im Bedienfeld „Analysieren“ angesprochen werden soll. Dadurch ändert sich auch der Inhalt des axe Monitor entsprechend.

1. Aktivieren Sie Edit in der Actions Spalte der Scope Abschnittstabelle.

   

   Die Felder können in jeder Spalte bearbeitet werden und in der Actions Spalte wird eine Save Schaltfläche und eine Cancel Schaltfläche angezeigt.

2. Nehmen Sie die gewünschten Änderungen in einem oder mehreren Spaltenfeldern vor und aktivieren Sie anschließend Save in der Actions Spalte.

   

Ihre gespeicherten Änderungen werden als schreibgeschützte Zeile in der Tabelle angezeigt und automatisch mit axe Monitor synchronisiert.

Neu ab Attest Browser Extension v2.8: Die Schaltfläche ANALYZE AGAIN ist deaktiviert, wenn der Analysebereich nicht gespeichert ist.

Dabei kann leicht übersehen werden, ob ein Benutzer den Bereich der aktuellen Analyse vor dem Klicken auf ANALYZE AGAIN gespeichert hat.

Um dieses Problem zu lösen, haben wir die Schaltfläche Save neben die Schaltflächen ANALYZE AGAIN und Back verschoben. Die Schaltfläche ANALYZE AGAIN wird deaktiviert und die Schaltfläche Save wird aktiviert, wenn ein Benutzer eine neue Bereichslinie schreibt. Die Schaltfläche ANALYZE AGAIN wird wieder aktiviert und Save deaktiviert, wenn der Benutzer den neuen Bereich speichert. Diese beiden Schaltflächen können in der Axe Expert Extension niemals gleichzeitig aktiviert werden.

Löschen einer Bereichsdefinition

Um eine Zeile aus der Scope Abschnittstabelle im Settings Bedienfeld zu entfernen, löschen Sie eine Bereichsdefinition. Diese Aktion entfernt auch die Bereichsdefinition aus dem axe Monitor.

Wählen Sie in der Spalte Actions die Zeile der vorhandenen Bereichsdefinition aus, die Sie löschen möchten, Delete.

Die Zeile wird aus der Abschnittstabelle „Definitionen des Anwendungsbereichs“ entfernt.