CSS Selector

Op deze pagina:

• Aan de slag & sneltoetsen
• Openen van ontwikkelaarstools
• Een selector van een pagina kopiëren
• Wat zijn selectoren?

Er zijn verschillende gebieden in de axe Auditor-applicatie die een Selector-veld bieden. Volg dit proces wanneer u een specifieke CSS-selector wilt testen als onderdeel van het volgende:

• Gemeenschappelijk onderdeel (Nieuwe testcase > Component toevoegen): Bij het definiëren van een gemeenschappelijk onderdeel in het paneel Algemene componenten bij het maken van een nieuwe testcase.
• Pagina-onderdeel (Nieuwe testcase > Pagina toevoegen > Pagina-gebiedsbereik): Bij het definiëren van een pagina-gebied op het paneel Pagina's toevoegen bij het maken van een nieuwe testcase.
• Pagina-onderdeel (Pagina voorbereiden voor geautomatiseerde en handmatige Testen > Pagina-gebiedsbereik): Bij het definiëren van een pagina-gebied van de "pagina die wordt getest" op de pagina voorbereiden voor geautomatiseerde en handmatige Testscherm toegankelijk via Overzicht van Testuitvoering.

Aan de slag

Voor het zoeken en kopiëren van een selector gebruikt u doorgaans de "ontwikkelaarshulpmiddelen" die bij uw webbrowser zijn geleverd. Deze hebben verschillende namen, afhankelijk van het browsertype. Elke browser biedt sneltoetsen om toegang te krijgen tot de tools en om erdoorheen te navigeren.

Sneltoetsen Referentie per Browsertype

• Google Chrome - DevTools: Sneltoetsen - Google Chrome
• Apple Safari - Web Inspector: Sneltoetsen
• Microsoft Edge - Ontwikkelaarstools: Sneltoetsen voor ontwikkelaarstools
• Microsoft Internet Explorer - F12 Developer Tools: Sneltoetsen voor Ontwikkelaarstools Referentie

Op een Mac: Over het algemeen kan de Cmd-toets (⌘) worden gebruikt als vervanging voor [Ctrl] op een OSX- of iOS-apparaat.

Developer Tools openen (Firefox-voorbeeld)

Het volgende voorbeeld illustreert het gebruik van Mozilla Firefox Ontwikkelaarshulpmiddelen. Voor meer informatie over het gebruik van sneltoetsen met Firefox Developer Tools, zie Mozilla Developer Keyboard Shortcuts.

U kunt de Inspector (een van de Developer Tools die ze allemaal lanceert) op een van de volgende manieren openen:

• Zonder een element geselecteerd: Kies de optie Inspector in het menu Ontwikkelaar (Ctrl+Shift+I) of selecteer in de menubalk van Firefox Extra > Webontwikkelaar > Inspector (Ctrl+Shift+C).
• Met een geselecteerd element: Klik met de rechtermuisknop op een element op een webpagina en selecteer Element inspecteren [(Q)]{.kbd}.

Een selector van een pagina kopiëren

1. Klik met de rechtermuisknop op het gewenste gebied van de testpagina en selecteer vervolgens

Selecteer Element Inspecteren in het menu om de Inspector te starten, zodat u een element op de pagina kunt selecteren (of gebruik de sneltoets Ctrl+Shift+I).

2. Kopieer de CSS-selector waarop u wilt targeten. Wanneer u bijvoorbeeld Firefox Developer Tools gebruikt, kunt u met de rechtermuisknop klikken > Unieke selector kopiëren voor het op dat moment geselecteerde element in de Inspector-tool. Zorg ervoor dat u de volledige elementreferentie met de juiste opmaak plakt (om bijvoorbeeld het kenmerk-element id voor de waarde "main" te testen, geeft u #main op als selector).

   

Informatie - Referentie voor selectoropmaak met voorbeeld: Voor volledige informatie over correct opgemaakte CSS-selectors en een volledige referentie voor elementen, zie de Mozilla Developer Web CSS Selector-documentatie{.external} of Selectors Level 3 W3C-aanbeveling.{.external}.

• Selector: #id - De #id selector styleert het element met de opgegeven id.

• Voorbeeld: #main - De opgegeven id is main.

• Voorbeeldreferentie: Selecteert het element met id="main".

  

3. Plak de selector die u van het virtuele klembord hebt gekopieerd in het veld Selector.

   Wanneer u de resulterende problemen voor het beoogde component of paginagebied bekijkt, ziet u ook de problemen die betrekking hebben op de specifieke CSS-selector die u hebt ingevoerd.

4. Bekende fout: Bij gebruik van CSS Selector in de Chrome-browser. Rechts inspecteren, Dev-tools openen, op het tabblad Elementen, de css-selector zoeken om te targeten en element>kopiëren>xpath of element>kopiëren>Volledige xpath geeft altijd deze fout. ' Er is een onbekende fout opgetreden. Als deze testcase componenten of paginagebieden bevat, zorg er dan voor dat alle selectoren geldig zijn. Tijdelijke oplossing: Zoek de ID voor de CSS-selector en Kopieer>Kopieer Selector

Wat zijn selectoren?

Snel antwoord: Het zijn tekstreeksen die gebruikt kunnen worden om een element of groep elementen op een webpagina te identificeren.

Iets langer, meer technisch antwoord: Selectoren zijn patronen die overeenkomen met elementen in een boomstructuur en kunnen worden gebruikt om specifieke fragmenten te testen of knooppunten in HTML- of XML-documenten te selecteren. De Cascading Style Sheet (CSS3)-taal beschrijft de weergave van HTML-documenten op het scherm of in spraak en gebruikt selectoren voor stijl binding. Eigenschappen aan elementen in HTML-documenten.

Gebruik: Door de expressie over alle elementen in een subboom te evalueren, kunnen selectoren worden gebruikt om:

• Selecteer een set elementen
• Selecteer één enkel element uit een set elementen

Structuur: Een selector vertegenwoordigt een structuur die kan worden gebruikt als voorwaarde (zoals in een CSS-regel) om te bepalen welke elementen een selector in een documentboom matcht, of als een platte beschrijving van het HTML- of XML-fragment dat overeenkomt met die structuur.

Typen: Selectortypen omvatten:

• Universeel: De gekwalificeerde naam van elk elementtype (*) Als u bijvoorbeeld de gekwalificeerde naam van een Engelstalig element in de documentstructuur voor een naamruimte wilt opgeven, voert u het volgende in:

  *[hreflang|=en]

• Type: Een optioneel voorvoegsel voor een naamruimtecomponent dat aan een elementnaam wordt toegevoegd (|) Om bijvoorbeeld een kop 2-element in de documentstructuur weer te geven, voert u eenvoudigweg het volgende in:

  h2

• Attribuut: vertegenwoordigt het attribuut van een element ([]) Om bijvoorbeeld een h3-element weer te geven dat het title-kenmerk draagt, ongeacht de waarde ervan, voert u het volgende in:

  h3[titel]

• Klasse: Punt- of "puntnotatie om het klasseattribuut voor de betreffende naamruimte weer te geven (.)" Om bijvoorbeeld groene kleurstijlinformatie toe te wijzen aan alle elementen met class="example", voert u het volgende in:

  .example { color: green } / alle elementen met class=example */

• ID: Attributen die zijn gedeclareerd als type ID identificeren een element op unieke wijze met een nummerteken (#) Om bijvoorbeeld een ID-selector weer te geven waarbij elk element waarvan de ID-getypeerde kenmerkwaarde "12345" is, voert u in:

  #12345

• Pseudo-klassen: Selectie van informatie buiten de documentboom die niet kan worden uitgedrukt met eenvoudige selectoren (:) Om bijvoorbeeld een selector op te geven die koppelingen vertegenwoordigt die de klasse extern hebben en al zijn bezocht, voert u het volgende in:

  a.external:bezocht

• Pseudo-elementen: Twee dubbele punten gevolgd door de naam van een pseudo-element geven toegang tot inhoud buiten de huidige documentboom, en er is slechts één element per selector toegestaan (::)

  Om bijvoorbeeld de letters van de eerste regel van elk p-element naar hoofdletters te veranderen, voert u het volgende in:

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

• Combinatoren: maken het mogelijk om een hiërarchisch pad te specificeren om afkomst weer te geven, zoals kind- of broer-/zusterelementen ( ) of (+)

  Om bijvoorbeeld em-elementen te targeten die afstammelingen zijn van h1-elementen, voert u het volgende in:

  h1 em.

  Het is een correcte en geldige, maar gedeeltelijke, beschrijving van het volgende fragment:

  <h1>Deze <span class="myclass"> koptekst is <em>very> belangrijk</span></h1>

Syntaxis: De basisgrammatica van selectoren omvat het volgende: ""

• *: 0 of meer keer (Opmerking: Omdat dit kan worden weggelaten wanneer het impliciet is, (wordt niet vaak gebruikt.)
• +: 1 of meer keer
• ?: 0 of 1
• |: scheidt alternatieven
• [ ]: groepering

Uitgebreide referentie: Voor meer informatie, zie World Wide Web Consortium (W3C) - Selectors Level 3: https://drafts.csswg.org/selectors-3/

Gerelateerde onderwerpen:

• Gemeenschappelijke Componenten Toevoegen
• Een pagina toevoegen aan een testcase