CSS-Selektor

Auf dieser Seite:

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

Es gibt mehrere Bereiche der axe Auditor-Anwendung, die ein Selektor Feld bereitstellen. Befolgen Sie diesen Prozess, wenn Sie einen bestimmten CSS-Selektor angeben möchten, der im Rahmen des Folgenden getestet werden soll:

• Allgemeine Komponente (Neuer Testfall > Komponente hinzufügen): Bei der Definition einer allgemeinen Komponente im Bereich Allgemeine Komponenten während der Erstellung eines neuen Testfalls.
• Seitenbereichskomponente (Neuer Testfall > Seite hinzufügen > Bereichsbereichumfang): Bei der Definition eines Seitenbereichs im Bereich Seiten hinzufügen während der Erstellung eines neuen Testfalls.
• Seitenbereichskomponente (Seite für automatisiertes und manuelles Testen vorbereiten > Bereichsbereichumfang): Bei der Definition eines Seitenbereichs der „zu testenden Seite“ auf dem Bildschirm Seite für automatisiertes und manuelles Testen vorbereiten, der über die Testlaufübersicht zugänglich ist.

Erste Schritte

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

Tastenkombinationen nach Browsertyp

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

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

Öffnen der Entwicklertools (Beispiel Firefox)

Das folgende Beispiel zeigt die Verwendung der Entwicklerwerkzeuge von Mozilla Firefox. Weitere Informationen zur Verwendung von Tastenkombinationen mit den Firefox-Entwicklerwerkzeugen finden Sie unter Mozilla Developer 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 aus der Firefox-Menüleiste, wählen Sie **Extras > 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}**.

Einen Selektor von einer Seite kopieren

1. Right-click im gewünschten Bereich der Testseite, dann 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 die Firefox-Entwicklertools verwenden, können Sie right-click > Copy Unique Selector für das aktuell ausgewählte Element im Inspektor-Tool. Achten Sie darauf, den korrekt formatierten vollständigen Elementverweis einzufü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 Entwickler-Webdokumentation zu CSS-Selektoren 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 kopierten Selektor aus der virtuellen Zwischenablage in das Selector Feld ein.
   Wenn Sie die gefundenen Probleme für die anvisierte Komponente oder den Zielbereich auf der Seite abrufen, werden die spezifischen CSS-Selektor-bezogenen Probleme, die Sie eingegeben haben, eingeschlossen.
4. Bekannter Fehler: Bei der Verwendung des CSS-Selektors im Chrome-Browser. Rechtsklick, Entwickler-Tools öffnen, auf dem Elemente-Tab den zu zielenden CSS-Selektor finden, klicken und Element>kopieren>Xpath oder Element>kopieren>Voller Xpath gibt immer diesen Fehler zurück: \ ' Ein unbekannter Fehler ist aufgetreten. Wenn dieser 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**: Es 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 Bewertung des Ausdrucks über alle Elemente in einem Unterbaum 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 (wie in einer CSS-Regel) verwendet werden kann, um zu bestimmen, welche Elemente ein Selektor im Dokumentbaum erfüllt, oder als flache Beschreibung des HTML- oder XML-Fragments, das dieser Struktur entspricht.

Typen: Selektor-Typen umfassen:

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

  *[hreflang|=en]

• Typ: Ein optionaler Namensraum-Komponenten-Präfix, das einem Elementnamen vorangestellt ist (|) Zum Beispiel, um ein Überschriften-Element der Stufe 2 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“-Schreibweise zur Darstellung des Klassenattributs für den jeweiligen Namensraum (.) Zum Beispiel, um allen Elementen mit class="example" die Stilinformation Farbe Grün 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 (#) Zum Beispiel, um einen ID-Selektor darzustellen, bei dem jedes Element, dessen ID-typisches Attribut den Wert „12345“ hat, geben Sie ein:

  #12345

• Pseudo-Klassen: Auswahl von Informationen außerhalb des Dokumentbaums, die nicht mit einfachen Selektoren dargestellt werden können (:) Zum Beispiel, um einen Selektor zu spezifizieren, der Links repräsentiert, die die Klasse external tragen und bereits besucht wurden, geben Sie ein:

  a.external:visited

• Pseudo-Elemente: Zwei Doppelpunkte, gefolgt vom Namen eines Pseudo-Elements, ermöglichen den Zugriff auf Inhalte jenseits des aktuellen Dokumentbaums, und es ist nur eines 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: Ermöglichen die Spezifikation eines hierarchischen Pfades, um Erbverhältnisse wie Kind- oder Geschwisterelemente zu zeigen ( ) oder (+)

  Zum Beispiel, 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>Dies <span class="myclass"> Schlagzeile 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 impliziert, 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 von üblichen Komponenten
• Hinzufügen einer Seite zu einem Testfall