CSS-Selektor

Auf dieser Seite:

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

Es gibt mehrere Bereiche in der axe Auditor-Anwendung, die ein Selektor -Feld bereitstellen. Befolgen Sie diesen Vorgang, wenn Sie einen bestimmten CSS-Selektor angeben möchten, der im Rahmen der folgenden geprüft werden soll:

• Gemeinsame Komponente (Neuer Testfall > Komponente hinzufügen): Bei der Definition einer gemeinsamen Komponente im Panel "Gemeinsame Komponenten", wenn ein neuer Testfall erstellt wird.
• Seitenbereichskomponente (Neuer Testfall > Seite hinzufügen > Seitenbereichsumfang): Bei der Definition eines Seitenbereichs im "Seiten hinzufügen"-Panel, wenn ein neuer Testfall erstellt wird.
• Seitenbereichskomponente (Seite für automatisiertes und manuelles Testen vorbereiten > Seitenbereichsumfang): Bei der Definition eines Seitenbereichs der "getesteten Seite" auf dem Bildschirm "Seite für automatisiertes und manuelles Testen vorbereiten", der über die Testlaufübersicht aufgerufen wird.

Erste Schritte

Das Auffinden und Kopieren eines Selektors erfordert in der Regel die Verwendung der „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 dieser.

Referenz der 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: Generell kann die Cmd -Taste (⌘) durch [Strg] auf einem OSX- 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 den Firefox-Entwicklertools siehe Mozilla Developer Tastenkombinationen.

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

• Ohne ein ausgewähltes Element: Wählen Sie die **Inspector** Option im **Entwickler** Menü (Strg+Umschalt+I), oder aus der Firefox-Menüleiste wählen Sie **Extras > Webentwickler > Inspector (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 im gewünschten Bereich der Testseite, dann wählen Inspect Element Sie aus dem Menü, um den Inspector 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 Inspectortool. 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ändigem Elementverweis siehe Mozilla Developer Web CSS Selektor-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 resultierenden Probleme für die angezielte Komponente oder Seitenbereich aufrufen, werden auch diejenigen angezeigt, die sich auf den spezifischen CSS-Selektor beziehen, den Sie eingegeben haben.
4. Bekannter Fehler: Beim Verwenden von CSS-Selektoren im Chrome-Browser. Rechtsklick, Entwicklertools öffnen, auf der Registerkarte „Elemente“ den zu zielenden CSS-Selektor finden, klicken und Element>kopieren>XPath oder Element>kopieren>Vollständiger XPath führt immer zu diesem Fehler,\ "Ein unbekannter Fehler ist aufgetreten. Wenn dieser Testfall Komponenten oder Seitenbereiche enthält, vergewissern Sie sich bitte, 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 gegen Elemente in einer Baumstruktur abgeglichen werden und können verwendet werden, um spezifische Fragmente zu testen oder Knoten innerhalb von HTML- oder XML-Dokumenten auszuwählen. Die Cascading-Style-Sheet (CSS3)-Sprache beschreibt die Wiedergabe von HTML-Dokumenten auf dem Bildschirm oder in der 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 Teilbaum hinweg 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 in einem Dokumentbaum übereinstimmt oder als flache Beschreibung des HTML- oder XML-Fragments, das dieser Struktur entspricht.

Typen: Selektortypen umfassen:

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

  *[hreflang|=en]

• Typ: Ein optionaler Namensraumkomponenten-Präfix, das einem Elementnamen vorangestellt wird (|) Zum Beispiel, um ein Überschriftselement der Ebene 2 im Dokumentbaum darzustellen, geben Sie einfach ein:

  h2

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

  h3[title]

• Klasse: Punktnotation, um das Klassenattribut für den jeweiligen Namensraum darzustellen (.) Zum Beispiel, um allen Elementen mit class="example" die Stilinformation für grüne Farbe 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, dessen ID-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: Zwei Doppelpunkte gefolgt vom Namen eines Pseudoelements ermöglichen den Zugriff auf Inhalte jenseits des aktuellen Dokumentbaums, und nur eines pro Selektor ist 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 Abstammung wie Kind- oder Geschwisterelemente anzuzeigen ( ) oder (+)

  Zum Beispiel, um em-Elemente anzuzielen, 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“ der Selektoren umfasst Folgendes:

• *: 0 oder mehr (Hinweis: Da dies bei Annahme 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
• Hinzufügen einer Seite zu einem Testfall