CSS-Selektor

Auf dieser Seite:

• Erste Schritte & Tastenkombinationen
• Entwicklerwerkzeuge öffnen
• Kopieren eines Selektors von einer Seite
• Was sind Selektoren?

Mehrere Bereiche der Anwendung axe Auditor bieten ein Selektor-Feld an. Gehen Sie folgendermaßen vor, wenn Sie einen bestimmten CSS-Selektor angeben möchten, der als Teil der folgenden Elemente getestet werden soll:

• Gemeinsame Komponente (Neuer Testfall > Komponente hinzufügen): Beim Definieren einer gemeinsamen Komponente im Bereich „Gemeinsame Komponenten“ beim Erstellen eines neuen Testfalls.
• Seitenbereich-Komponente (Neuer Testfall > Seite hinzufügen > Seitenbereichsbereich): Beim Definieren eines Seitenbereichs im Bereich „Seiten hinzufügen“ beim Erstellen eines neuen Testfalls.
• Seitenbereich-Komponente (Seite für automatisiertes und manuelles Testen vorbereiten > Seitenbereichsbereich): Beim Definieren eines Seitenbereichs der „zu testenden Seite“ auf dem Bildschirm „Seite für automatisierte und manuelle Tests vorbereiten“, der über die Testlauf-Übersicht aufgerufen wird.

Erste Schritte

Das Auffinden und Kopieren eines Selektors beinhaltet typischerweise die Verwendung der „Entwicklerwerkzeuge“, die mit Ihrem Webbrowser geliefert werden. Diese haben je nach Browsertyp unterschiedliche Namen und bieten jeweils Tastenkombinationen für den Zugriff auf die Werkzeuge und für die Navigation innerhalb dieser.

Tastenkombinationen nach Browsertyp

• Google Chrome - DevTools: Tastenkombinationen - Google Chrome
• Apple Safari - Web-Inspektor: Tastenkombinationen
• Microsoft Edge - Entwicklertools: Entwicklertools-Tastenkombinationen
• Microsoft Internet Explorer - F12 Entwicklertools: Entwicklertools-Tastenkombinationen-Referenz

Auf einem Mac: Im Allgemeinen kann die Cmd-Taste (⌘) auf einem OSX- oder iOS-Gerät anstelle von [Strg] verwendet werden.

Entwicklerwerkzeuge öffnen (Beispiel Firefox)

Das folgende Beispiel zeigt die Verwendung von Mozilla Firefox Developer Tools. Für weitere Informationen zur Verwendung von Tastenkombinationen mit den Firefox Developer Tools siehe Mozilla Entwickler-Tastenkombinationen.

Sie können den Inspektor (eines der Entwicklerwerkzeuge, das alle startet) auf eine der folgenden Arten öffnen:

• Ohne ein ausgewähltes Element: Wählen Sie die Option Inspektor aus dem Menü Entwickler (Strg+Shift+I), oder wählen Sie aus der Firefox-Menüleiste Extras > Web-Entwickler > Inspektor (Strg+Shift+C).
• Bei ausgewähltem Element*: Rechtsklick ein Element auf einer Webseite und wählen Element untersuchen [(Q)]{.kbd}.

Kopieren eines Selektors von einer Seite

1. Right-click auf dem gewünschten Bereich der Testseite, dann wählen Sie Inspect Element aus dem Menü, um den Inspektor zu starten, sodass Sie dann ein Element auf der Seite auswählen können (oder verwenden Sie die Tastenkombination Strg+Shift+I).
   
2. Kopieren Sie den CSS-Selektor, den Sie anvisieren möchten. Zum Beispiel können Sie bei Verwendung von Firefox Developer Tools right-click > Copy Unique Selector für das aktuell ausgewählte Element im Inspektor-Tool. Stellen Sie sicher, dass Sie den korrekt formatierten vollständigen Elementverweis einfügen (zum Beispiel, um das id Attribut-Element für den Wert 'main' zu testen, würden Sie #main als Selektor angeben).
   

   Information - Selector Formatting Reference with Example:
   Für vollständige Details zu korrekt formatierten CSS-Selektoren und vollständigen Elementverweisen siehe Mozilla Developer Web CSS Selector-Dokumentation oder Selectors Level 3 W3C-Empfehlung.

   • Selector: #id → Der #id Selektor stylt das Element mit der angegebenen ID.
   • Example: #main → Die angegebene ID ist main.
   • Example Reference: Wählt das Element mit id="main".
   
3. Fügen Sie den von der virtuellen Zwischenablage kopierten Selektor in das Selector Feld ein.
   Wenn Sie die gefundenen Probleme für die Komponente oder den Seitenausschnitt, auf den Sie abzielen, aufrufen, werden auch die damit verbundenen spezifischen CSS-Selektoren angezeigt, die Sie eingegeben haben.
4. Bekannter Fehler: Bei Verwendung des CSS-Selektors im Chrome-Browser. Rechtklick auf Inspektieren, Öffnen der Entwicklerwerkzeuge, im Element-Tab den CSS-Selektor finden, um klicken und Element>kopieren>XPath oder Element>kopieren>Vollständiger XPath-Fehler immer diese Fehlermeldung zurückgibt: " Es ist ein unbekannter Fehler aufgetreten. Wenn dieser Testfall irgendwelche Komponenten oder Seitenausschnitte enthält, stellen Sie bitte sicher, dass alle Selektoren gültig sind"
   Workaround: Finden Sie die ID für den CSS-Selektor und verwenden Sie Copy > Copy Selector.

Was sind Selektoren?

Kurze Antwort: Es handelt sich um Textstrings, die verwendet werden können, um ein Element oder eine Gruppe von Elementen auf einer Webseite zu identifizieren.

Etwas längere, technischere Antwort: Selektoren sind Muster, die mit Elementen in einer Baumstruktur übereinstimmen und verwendet werden können, um spezifische Fragmente zu testen oder Knoten innerhalb von HTML- oder XML-Dokumenten auszuwählen. Die Sprache Cascading Style Sheet (CSS3) beschreibt die Darstellung von HTML-Dokumenten auf dem Bildschirm oder in der Sprache und verwendet Selektoren, um Stileigenschaften an Elemente in HTML-Dokumenten zu binden.

Verwendung: Durch die Auswertung des Ausdrucks über alle Elemente in einem Teilbaum können Selektoren verwendet werden, um:

• Eine Gruppe von Elementen auswählen
• Ein einzelnes Element aus einer Gruppe von Elementen auswählen

Struktur: Ein Selektor stellt eine Struktur dar, die als Bedingung (wie in einer CSS-Regel) verwendet werden kann, um zu bestimmen, welche Elemente ein Selektor in einem Dokumentbaum passt, oder als flache Beschreibung des HTML- oder XML-Fragments, das dieser Struktur entspricht.

Typen: Selektortypen umfassen:

• Universal: Der qualifizierte Name eines Elementtyps (*) Zum Beispiel, um den qualifizierten Namen eines englischsprachigen Elements im Dokumentbaum für einen beliebigen Namensraum anzugeben, geben Sie ein:

  *[hreflang|=en]

• Typ: Ein optionaler Namespace-Komponentenpräfix vor einem Elementnamen (|) Zum Beispiel, um ein Heading 2-Element im Dokumentbaum darzustellen, geben Sie einfach ein:

  h2

• Attribut: Repräsentiert ein Attribut eines Elements ([]) Zum Beispiel, um ein h3-Element darzustellen, das das Attribut title trägt, unabhängig von dessen Wert, geben Sie ein:

  h3[title]

• Klasse: Punkt- oder „Vollstopp“-Notation zur Darstellung des Klassenattributs für den jeweiligen Namensraum (.) Zum Beispiel, um allen Elementen mit class="example" grüne Farbstyle-Informationen zuzuweisen, geben Sie ein:

  .example { color: green } / alle Elemente mit class=example */

• ID: Als ID deklarierte Attribute identifizieren ein Element eindeutig mit einem Nummernzeichen (#) Zum Beispiel, um einen ID-Selektor darzustellen, bei dem ein Element dessen ID-Attribute den Wert „12345“ trägt, geben Sie ein:

  #12345

• Pseudoklassen: Auswahl von Informationen außerhalb des Dokumentbaums, die nicht mit einfachen Selektoren ausgedrückt werden können (:) Zum Beispiel, um einen Selektor anzugeben, der Links mit der Klasse external und bereits besucht darstellt, geben Sie ein:

  a.external:visited

• Pseudoelemente: Zwei Doppelpunkte gefolgt vom Namen eines Pseudoelements erlauben den Zugriff auf Inhalte jenseits des aktuellen Dokumentbaums, und nur eins pro Selektor ist erlaubt (::)

  Beispielsweise, um die Buchstaben der ersten Zeile jedes p-Elements in Großbuchstaben zu ändern, geben Sie ein:

  p::first-line { text-transform: uppercase }

• Kombinatoren: Erlauben die Angabe eines hierarchischen Pfades, um Vorfahren wie Kinder- oder Geschwisterelemente anzuzeigen ( ) oder (+)

  Beispielsweise, um em-Elemente anzusprechen, die Nachkommen von h1-Elementen sind, geben Sie ein:

  h1 em.

  Es ist eine korrekte und gültige, aber unvollständige Beschreibung des folgenden Fragments:

  <h1>Diese <span class="myclass"> Überschrift ist <em>sehr>/em> wichtig</span></h1>

Syntax: Die grundlegende „Grammatik“ der Selektoren umfasst Folgendes:

• *: 0 oder mehr (Hinweis: Da dies bei impliziter Verwendung weggelassen werden kann, wird es nicht häufig verwendet.)
• +: 1 oder mehr
• ?: 0 oder 1
• |: trennt Alternativen
• [ ]: Gruppierung

Umfassendes Referenzwerk: Für weitere Informationen, beachten Sie den World Wide Web Consortium (W3C) - Selectors Level 3: https://drafts.csswg.org/selectors-3/

Verwandte Themen:

• Hinzufügen von allgemeinen Komponenten
• Eine Seite einem Testfall hinzufügen