CSS-Selektor

Auf dieser Seite:

• Erste Schritte & Tastenkombinationen
• Entwicklertools öffnen
• Einen Selektor von einer Seite kopieren
• Was sind Selektoren?

Es gibt mehrere Bereiche der axe Auditor-Anwendung, die ein Selektor -Feld bereitstellen. Folgen Sie diesem Prozess, wenn Sie einen bestimmten CSS-Selektor für die Prüfung als Teil der folgenden Elemente angeben möchten:

• Allgemeine Komponente (Neuer Testfall > Komponente hinzufügen): Beim Definieren einer allgemeinen Komponente im Bereich Allgemeine Komponenten bei der Erstellung eines neuen Testfalls.
• Seitenbereichskomponente (Neuer Testfall > Seite hinzufügen > Seitenbereichsbereich): Beim Definieren eines Seitenbereichs im Bereich Seiten hinzufügen bei der Erstellung eines neuen Testfalls.
• Seitenbereichskomponente (Seite für automatisierte und manuelle Tests vorbereiten > Seitenbereichsbereich): Beim Definieren eines Seitenbereichs der „zu testenden Seite“ auf dem Bildschirm Seite für automatisierte und manuelle Tests vorbereiten, der aus der Testlauf-Übersicht aufgerufen wird.

Erste Schritte

Das Auffinden und Kopieren eines Selektors erfolgt typischerweise über die „Entwicklertools“, die mit Ihrem Webbrowser geliefert werden. Diese haben je nach Browsertyp unterschiedliche Namen, und jeder bietet Tastenkombinationen zum Zugriff auf die Tools und zur Navigation innerhalb derselben.

Tastenkombinationen nach Browsertyp

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

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

Entwicklertools öffnen (Firefox-Beispiel)

Das folgende Beispiel zeigt die Verwendung der Entwicklertools von Mozilla Firefox. Weitere Informationen zur Verwendung von Tastenkombinationen mit den Firefox-Entwicklertools finden Sie unter Mozilla Entwickler Tastenkombinationen.

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

• Ohne ein ausgewähltes Element: Wählen Sie die **Inspektor** Option im **Entwickler** Menü (Strg+Umschalt+I), oder wählen Sie im Firefox-Menüleiste **Werkzeuge > Web-Entwickler > Inspektor (Strg+Umschalt+C)**.
• Mit einem ausgewählten Element*: **Rechtsklick** auf ein Element auf einer Webseite und wählen Sie **Element untersuchen [(Q)]{.kbd}**.

Kopieren eines Selektors von einer Seite

1. Right-click auf dem gewünschten Bereich der Testseite, und wählen Sie dann Inspect Element im Menü, um den Inspektor zu starten, damit Sie ein Element auf der Seite auswählen können (oder nutzen Sie die Tastenkombination Strg+Umschalt+I).
   
2. Kopieren Sie den CSS-Selektor, den Sie anvisieren möchten. Zum Beispiel können Sie bei der Verwendung der Firefox Developer Tools right-click > Copy Unique Selector für das aktuell ausgewählte Element im Inspektor-Werkzeug. Achten Sie darauf, das richtig formatierte vollständige Element-Referenz einzufügen (zum Beispiel, um das id Attribut-Element auf den Wert 'main' zu testen, würden Sie #main als Selektor angeben).
   

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

   • Selector: #id → Der #id Selektor gestaltet 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 Selektor, den Sie aus der virtuellen Zwischenablage kopiert haben, in das Selector Feld ein.
   Wenn Sie die resultierenden Probleme für die anvisierte Komponente oder den Seitenbereich aufrufen, werden Ihnen auch die angezeigt, die mit dem spezifischen CSS-Selektor zusammenhängen, den Sie eingegeben haben.
4. Bekanntes Problem: Bei der Verwendung von CSS-Selektoren im Chrome-Browser. Rechtsklick Inspektieren, Öffnen Sie die Entwicklerwerkzeuge, finden Sie auf der Elementregisterkarte den Ziel-CSS-Selektor und klicken Sie auf element>copy>xpath oder element>copy>Full xpath; dieser Fehler wird immer zurückgegeben,\ 'Ein unbekannter Fehler ist aufgetreten. Wenn dieser Testfall Komponenten oder Seitenbereiche 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**: Sie sind Textzeichenfolgen, die dazu verwendet werden, 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 können verwendet werden, um spezifische Fragmente zu testen oder Knoten in HTML- oder XML-Dokumenten auszuwählen. Die Cascading Style Sheet (CSS3)-Sprache beschreibt die Darstellung von HTML-Dokumenten auf dem Bildschirm oder in Sprache und verwendet Selektoren, um Stil attribute an Elemente in HTML-Dokumenten zu binden.

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

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

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

Typen: Selektortypen umfassen:

• Universal: Der qualifizierte Name eines beliebigen 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 optionales Namensraum-Komponentenpräfix, das einem Elementnamen vorangestellt wird (|) Zum Beispiel, um ein Überschrifts-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 führt, unabhängig von dessen Wert, geben Sie ein:

  h3[title]

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

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

• ID: Attribute, die als Typ ID deklariert sind, identifizieren ein Element eindeutig mit einem Nummernzeichen (#) Zum Beispiel, um einen ID-Selektor darzustellen, bei dem jedes Element erfasst wird, dessen ID-typisiertes Attribut den Wert "12345" hat, 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 darstellt, die die Klasse external tragen und bereits besucht wurden, geben Sie ein:

  a.external:visited

• Pseudoelemente: Doppelpunkt gefolgt vom Namen eines Pseudoelements ermöglichen den Zugriff auf Inhalte außerhalb des aktuellen Dokumentbaums, wobei nur eins pro Selektor erlaubt ist (::)

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

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

• Kombinatoren: Ermöglichen die Spezifikation eines hierarchischen Pfades, um Vorfahren wie Kind- oder Geschwistern-Elemente darzustellen ( ) oder (+)

  Zum Beispiel, um em-Elemente, die Nachfahren von h1-Elementen sind, anzusprechen, geben Sie ein:

  h1 em.

  Es ist eine korrekte und gültige, aber partielle Beschreibung des folgenden Fragments:

  <h1>Dies <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 implizit weggelassen werden kann, wird es nicht oft verwendet.)
• +: 1 oder mehr
• ?: 0 oder 1
• |: trennt Alternativen
• [ ]: Gruppierung

Umfassende Referenz: Für weitere Informationen, siehe World Wide Web Consortium (W3C) - Selektoren Level 3: https://drafts.csswg.org/selectors-3/

Verwandte Themen:

• Hinzufügen gemeinsamer Komponenten
• Eine Seite zu einem Testfall hinzufügen