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 spezifizieren möchten, der als Teil der folgenden getestet werden soll:

• Gemeinsame Komponente (Neuer Testfall > Komponente hinzufügen): Wenn Sie eine gemeinsame Komponente im Panel "Gemeinsame Komponenten" definieren, während Sie einen neuen Testfall erstellen.
• Bereichskomponente (Neuer Testfall > Seite hinzufügen > Bereichsumfang): Wenn Sie einen Seitenbereich im Panel "Seiten hinzufügen" definieren, während Sie einen neuen Testfall erstellen.
• Bereichskomponente (Seite für automatisiertes und manuelles Testen vorbereiten > Bereichsumfang): Wenn Sie einen Seitenbereich der „Seite unter Test“ auf dem Bildschirm "Seite für automatisiertes und manuelles Testen vorbereiten" definieren, auf den Sie über die Übersicht des Testrlaufs zugreifen.

Erste Schritte

Das Auffinden und Kopieren eines Selektors beinhaltet in der Regel die Verwendung der „Entwicklertools“, die mit Ihrem Webbrowser bereitgestellt werden. Diese haben je nach Browsertyp unterschiedliche Namen, und jeder bietet Tastenkombinationen, um auf die Tools zuzugreifen und innerhalb dieser zu navigieren.

Referenz zu den Tastenkombinationen nach Browsertyp

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

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

Entwicklertools öffnen (Firefox-Beispiel)

Das folgende Beispiel zeigt die Nutzung der Mozilla Firefox Entwicklertools. Für weitere Informationen zur Verwendung von Tastenkombinationen mit Firefox Entwicklertools siehe Mozilla Developer Tastenkombinationen.

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

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

Einen Selektor von einer Seite kopieren

1. Right-click auf den gewünschten Bereich der Testseite und wählen Sie dann Inspect Element aus dem Menü, um den Inspektor zu starten, damit 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, wenn Sie Firefox Entwicklertools verwenden, können Sie right-click > Copy Unique Selector für das momentan ausgewählte Element im Inspektor-Werkzeug. Achten Sie darauf, den korrekt formatierten vollständigen Elementverweis einzufügen (zum Beispiel, um das id Attributselement für den Wert 'main' zu testen, würden Sie #main als Selektor festlegen).
   

   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: Selektiert 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 auf die gefundenen Probleme für die anvisierte Komponente oder den Seitenbereich zugreifen, werden diese angezeigt, die mit dem spezifischen CSS-Selektor zusammenhängen, den Sie eingegeben haben.
4. Bekannter Fehler: Beim Einsatz von CSS-Selektoren im Chrome-Browser. Rechtsklick Inspektor öffnen, Entwicklertools öffnen, auf dem Reiter "Elemente" CSS-Selektor zum Anvisieren finden, Klicken und Element>kopieren>XPath oder Element>kopieren>Voller XPath erzeugt immer diesen Fehler: 'Ein unbekannter Fehler ist aufgetreten. Wenn dieser Testfall Komponenten oder Seitenbereiche enthält, stellen Sie 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 sind Textzeichenfolgen, 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 bestimmte Fragmente zu testen oder Knoten innerhalb von 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 Auswertung des Ausdrucks über alle Elemente in einem Unterbaum können Selektoren verwendet werden, um:

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

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

Typen: Typen von Selektoren umfassen:

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

  *[hreflang|=en]

• Typ: Ein optionales Präfix des Namensraumkomponenten vor einem Elementnamen (|) Zum Beispiel, um ein "heading 2"-Element im Dokumentbaum darzustellen, geben Sie einfach ein:

  h2

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

  h3[title]

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

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

• ID: Attribute, die als ID-Typ deklariert sind, identifizieren ein Element eindeutig mit einem Nummernzeichen (#) Zum Beispiel, um einen ID-Selektor darzustellen, bei dem jedes Element, dessen ID-getipptes 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 mit der Klasse "external" und bereits besuchte Links repräsentiert, geben Sie ein:

  a.external:visited

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

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

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

• Kombinatoren: Erlauben die Spezifikation eines hierarchischen Pfades, um Abstammung wie Kind- oder Geschwisterelemente zu zeigen ( ) oder (+)

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

  h1 em.

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

  <h1>This <span class="myclass"> headline is <em>very>/em> important</span></h1>

Syntax: Die grundlegende „Grammatik“ von 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

Umfassendes Referenzverzeichnis: Für weitere Informationen verweisen Sie auf das World Wide Web Consortium (W3C) - Selektoren Stufe 3: https://drafts.csswg.org/selectors-3/

Verwandte Themen:

• Hinzufügen von allgemeinen Komponenten
• Hinzufügen einer Seite zu einem Testfall