CSS Selecteur

Op deze pagina:

• Aan de slag & Toetsenbord Snelkoppelingen
• Ontwikkelaarstools openen
• Een selecteur van een pagina kopiëren
• Wat zijn selectoren?

Er zijn verschillende gebieden in de axe Auditor applicatie die een Selecteur veld bieden. Volg dit proces wanneer je een specifieke CSS-selecteur wilt specificeren om getest te worden als onderdeel van het volgende:

• Algemeen Component (Nieuwe Test Geval > Component Toevoegen): Bij het definiëren van een algemeen component op het paneel voor Algemene Componenten bij het maken van een nieuw Test Geval.
• Pagina Gebied Component (Nieuwe Test Geval > Pagina Toevoegen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied op het paneel Pagina's Toevoegen bij het maken van een nieuw Test Geval.
• Pagina Gebied Component (Pagina Voorbereiden voor Geautomatiseerd en Handmatig Testen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied van de „pagina die getest wordt“ op het scherm Pagina Voorbereiden voor Geautomatiseerd en Handmatig Testen, toegankelijk vanuit Overzicht Test Run.

Aan de slag

Het lokaliseren en kopiëren van een selecteur houdt meestal in dat je de „ontwikkelaarstools“ gebruikt die bij je webbrowser worden geleverd. Deze hebben verschillende namen afhankelijk van het browsertype, en elk biedt toetsenbord snelkoppelingen voor toegang tot de tools en navigatie binnen hen.

Toetsenbord Snelkoppelingen Referentie per Browsertype

• Google Chrome - DevTools: Toetsenbord Snelkoppelingen - Google Chrome
• Apple Safari - Web Inspector: Toetsenbord Snelkoppelingen
• Microsoft Edge - Ontwikkelaarstools: Ontwikkelaarstools Toetsenbord Snelkoppelingen
• Microsoft Internet Explorer - F12 Ontwikkelaarstools: Ontwikkelaarstools Toetsenbord Snelkoppelingen Referentie

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

Ontwikkelaarstools Openen (Firefox Voorbeeld)

Het volgende voorbeeld toont het gebruik van Mozilla Firefox Ontwikkelaarstools. Voor meer informatie over het gebruik van toetsenbord snelkoppelingen met Firefox Ontwikkelaarstools, zie Mozilla Ontwikkelaar Toetsenbord Snelkoppelingen.

Je kunt de Inspector openen (een van de ontwikkelaarstools die ze allemaal opstart) op een van de volgende manieren:

• Zonder een element geselecteerd: Kies de Inspector optie uit het Ontwikkelaar menu (Ctrl+Shift+I), of selecteer Tools > Web Ontwikkelaar > Inspector (Ctrl+Shift+C) in de Firefox menubalk.
• Met een geselecteerd element*: Rechtsklik een element op een webpagina en selecteer Element Inspecteren [(Q)]{.kbd}.

Een Selector van een pagina kopiëren

1. Right-click op de gewenste regio van de testpagina, selecteer dan Inspect Element uit het menu om de Inspector te starten, zodat je vervolgens een element op de pagina kunt selecteren (of gebruik de toetsenbordcombinatie Ctrl+Shift+I).
   
2. Kopieer de CSS-selectie die je wilt targeten. Bijvoorbeeld, bij het gebruik van Firefox Developer Tools, kun je right-click > Copy Unique Selector voor het momenteel geselecteerde element in het Inspector-hulpmiddel. Zorg ervoor dat je de correct geformatteerde volledige elementreferentie plakt (bijvoorbeeld, om het id attribuutelement voor de waarde 'main' te testen, zou je #main als selector specificeren).
   

   Information - Selector Formatting Reference with Example:
   Voor volledige details over correct geformatteerde CSS-selecties en volledige elementreferenties, zie Mozilla Developer Web CSS Selector documentatie of Selectors Level 3 W3C Aanbeveling.

   • Selector: #id → De #id selector stijlt het element met de opgegeven id.
   • Example: #main → De opgegeven id is main.
   • Example Reference: Selecteert het element met id="main".
   
3. Plak de selector die je van het virtuele klembord hebt gekopieerd in het Selector veld.
   Wanneer je toegang krijgt tot de resulterende problemen die gevonden zijn voor het component of pagina-gebied dat je hebt getarget, zul je ook de gerelateerde problemen zien die betrekking hebben op de specifieke CSS-selector die je hebt ingevoerd.
4. Bekende bug: Bij gebruik van de CSS-selector in de Chrome-browser. Rechter inspectie, Open Dev-tools, in het elementen tabblad, vind de css-selector om te targeten klik en element>kopieer>xpath of element>kopieer>Volledige xpath retourneert altijd deze fout,\ 'Een onbekende fout is opgetreden. Als deze test case componenten of paginagebieden bevat, zorg er dan voor dat alle selectors geldig zijn'
   Workaround: Vind de ID voor de CSS-selector en gebruik Copy > Copy Selector.

Wat zijn selectors?

Korte Antwoord: Het zijn tekststrings die gebruikt kunnen worden om een element of groep elementen op een webpagina te identificeren.

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

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

• Een set elementen te selecteren
• Een enkel element uit een set elementen te selecteren

Structuur: Een selector vertegenwoordigt een structuur die kan worden gebruikt als een voorwaarden (zoals in een CSS-regel) die bepaalt welke elementen een selector overeenkomt in een documentstructuur, of als een platte beschrijving van het HTML- of XML-fragment dat overeenkomt met die structuur.

Types: Selectortypes omvatten:

• Universeel: De gekwalificeerde naam van elk elementtype (*) Bijvoorbeeld, om de gekwalificeerde naam van elk Engelstalig element in de documentstructuur voor elke namespace te specificeren, voer in:

  *[hreflang|=en]

• Type: Een optionele namespace-componentprefix voorafgaand aan een elementnaam (|) Bijvoorbeeld, om een headingelement 2 in de documentstructuur te vertegenwoordigen, voer eenvoudig in:

  h2

• Attribuut: Vertegenwoordigt een attribuut van een element ([]) Bijvoorbeeld, om een h3-element weer te geven dat het attribuut title draagt, ongeacht de waarde ervan, voer in:

  h3[title]

• Class: Punt- of "punt"-notatie om het class-attribuut voor de respectieve namespace weer te geven (.) Bijvoorbeeld, om groene kleurstijl-informatie toe te wijzen aan alle elementen met class="example", voer in:

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

• ID: Attributen die als type ID zijn gedeclareerd, identificeren een element uniek met een hekje (#) Bijvoorbeeld, om een ID-selector weer te geven waarbij een element waarvan de ID-getypeerde attribuutwaarde "12345" is, voer in:

  #12345

• Pseudo-classes: Selectie van informatie buiten de documentboom die niet kan worden uitgedrukt met eenvoudige selectoren (:) Bijvoorbeeld, om een selector te specificeren die links vertegenwoordigt met class external en al bezocht, voer in:

  a.external:visited

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

  Bijvoorbeeld, om de letters van de eerste regel van elk p-element in hoofdletters te veranderen, voer in:

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

• Combinators: Biedt specificatie van een hiërarchisch pad om verwantschap zoals kinder- of sibling-elementen weer te geven ( ) of (+)

  Bijvoorbeeld, om em-elementen te targeten die afstammelingen zijn van h1-elementen, voer in:

  h1 em.

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

  <h1>Dit <span class="myclass"> kop is <em>zeer>/em> belangrijk</span></h1>

Syntax: De basis "grammatica" van selectoren omvat het volgende:

• *: 0 of meer (Opmerking: Aangezien dit kan worden weggelaten wanneer het wordt geïmpliceerd, wordt het niet vaak gebruikt.)
• +: 1 of meer
• ?: 0 of 1
• |: scheidt alternatieven
• [ ]: groepering

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

Gerelateerde Onderwerpen:

• Gemeenschappelijke Componenten Toevoegen
• Een Pagina Toevoegen aan een Testgeval