CSS-Selektor

Auf dieser Seite:

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

Es gibt mehrere Bereiche in der Anwendung axe Auditor, die ein Selektor -Feld bieten. Befolgen Sie diesen Prozess, wenn Sie einen bestimmten CSS-Selektor angeben möchten, der als Teil der folgenden getestet werden soll:

• Gemeinsame Komponente (Neuer Testfall > Komponente hinzufügen): Wenn Sie eine gemeinsame Komponente im Bereich Gemeinsame Komponenten definieren, wenn Sie einen neuen Testfall erstellen.
• Bereichskomponente (Neuer Testfall > Seite hinzufügen > Bereichsscope): Wenn Sie einen Bereich auf dem Seite-hinzufügen-Bildschirm definieren, wenn Sie einen neuen Testfall erstellen.
• Bereichskomponente (Seite für automatisierte und manuelle Tests vorbereiten > Bereichsscope): Wenn Sie einen Bereich der „Testseite“ auf dem Bildschirm Seite für automatisierte und manuelle Tests vorbereiten definieren, der über die Testlauf-Übersicht aufgerufen wird.

Erste Schritte

Das Auffinden und Kopieren eines Selektors umfasst typischerweise die Nutzung der „Entwicklerwerkzeuge“, die mit Ihrem Webbrowser geliefert werden. Diese haben je nach Browser unterschiedliche Namen und bieten jeweils Tastenkombinationen zum Zugriff auf die Werkzeuge und zur Navigation darin.

Referenz der Tastenkombinationen nach Browsertyp

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

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

Öffnen der Entwicklerwerkzeuge (Beispiel Firefox)

Das folgende Beispiel zeigt die Verwendung der Mozilla Firefox Entwicklerwerkzeuge. Weitere Informationen zur Verwendung von Tastenkombinationen mit Firefox Entwicklerwerkzeugen finden Sie unter 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 **Inspektor** Option aus dem **Entwickler** Menü **(Strg+Umschalt+I)**, oder wählen Sie im Firefox-Menüleiste **Werkzeuge > Web-Entwickler > Inspektor (Strg+Umschalt+C)**.
• Bei ausgewähltem 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 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+Umschalt+I).
   
2. Kopieren Sie den CSS-Selektor, den Sie anvisieren möchten. Zum Beispiel, wenn Sie Firefox Developer Tools verwenden, können Sie 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 über korrekt formatierte CSS-Selektoren und vollständige Elementverweise, siehe Mozilla Entwickler-Web CSS-Selektor-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 selektierten Selektor, den Sie von der virtuellen Zwischenablage kopiert haben, in das Selector Feld ein.
   Wenn Sie Zugriff auf die resultierenden Probleme haben, die für das angesteuerte Komponentengebiet oder Seitenelement gefunden wurden, werden diese in Bezug auf den spezifischen CSS-Selektor, den Sie eingegeben haben, angezeigt.
4. Bekannter Fehler: Bei der Verwendung des CSS-Selektors im Chrome-Browser. Rechtsklick, Dev-Tools öffnen, auf dem Element-Tab den CSS-Selektor zum Anvisieren finden, klicken und Element>kopieren>xpath oder Element>copy>Vollständiger Xpath führen immer zu diesem Fehler, 'Ein unbekannter Fehler ist aufgetreten. Wenn dieses Testfall irgendwelche 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**: Sie sind Textketten, 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 Cascading Style Sheet (CSS3)-Sprache beschreibt die Darstellung von HTML-Dokumenten auf dem Bildschirm oder in Sprache und verwendet Selektoren, um Stil-Eigenschaften 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 auszuwählen
• Ein einzelnes Element aus einer Gruppe von Elementen auszuwählen

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

Typen: Selektortypen umfassen:

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

  *[hreflang|=en]

• Typ: Ein optionales Präfix für den Namensraumkomponenten, das einem Elementnamen vorangestellt wird (|) Um zum Beispiel ein Überschrift-2-Element im Dokumentenbaum darzustellen, geben Sie einfach ein:

  h2

• Attribut: Stellt das Attribut eines Elements dar ([]) Um zum Beispiel ein h3-Element darzustellen, das das Titelattribut trägt, unabhängig von dessen Wert, geben Sie ein:

  h3[title]

• Klasse: Punkt- oder „Vollstopp“-Notation, um das Klassenattribut für den jeweiligen Namensraum darzustellen (.) Um zum Beispiel Stilinformationen zur grünen Farbe allen Elementen mit class="example" zuzuweisen, 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 (#) Um zum Beispiel einen ID-Selektor anzugeben, bei dem das ID-typisierte Attribut eines Elements den Wert „12345“ hat, geben Sie ein:

  #12345

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

  a.external:visited

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

  Um zum Beispiel 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 Verwandtschaft wie Kinder- oder Geschwisterelemente anzuzeigen ( ) oder (+)

  Um zum Beispiel em-Elemente, die Nachkommen von h1-Elementen sind, zu gestalten, geben Sie ein:

  h1 em.

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

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

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

• *: 0 oder mehr (Hinweis: Da dies weggelassen werden kann, wenn es impliziert wird, 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 allgemeiner Komponenten
• Hinzufügen einer Seite zu einem Testfall