CSS-selector

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Op deze pagina:

Er zijn verschillende delen van de axe Auditor-applicatie die een Selector veld bieden. Volg dit proces wanneer je een specifieke CSS-selector wilt opgeven die getest moet worden als onderdeel van het volgende:

  • Gemeenschappelijk Component (Nieuwe Test Case > Component Toevoegen): Bij het definiëren van een gemeenschappelijk component op het gemeenschappelijke componenten paneel bij het creëren van een nieuwe test case.
  • Pagina Gebied Component (Nieuwe Test Case > Pagina Toevoegen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied op het paginatoevoegingspaneel bij het creëren van een nieuwe test case.
  • Pagina Gebied Component (Pagina Voorbereiden voor Geautomatiseerd en Handmatig Testen > Pagina Gebied Bereik): Bij het definiëren van een Pagina Gebied van de „testpagina“ op het voorbereidingsscherm voor Geautomatiseerd en Handmatig Testen, toegankelijk vanuit Test Run Overzicht.

Aan de slag

Het lokaliseren en kopiëren van een selector houdt meestal in dat je de „ontwikkelaarstools“ gebruikt die bij je webbrowser horen. Deze hebben verschillende namen afhankelijk van het browsertype, en elk biedt toetsenbord sneltoetsen voor toegang tot de tools en navigeren binnen deze tools.

Referentie Sneltoetsen per Browsertype

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 sneltoetsen met Firefox Ontwikkelaarstools, zie Mozilla Ontwikkelaar Toetsenbord Sneltoetsen.

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

  • Zonder een element geselecteerd: Kies de **Inspector** optie uit het **Ontwikkelaar** menu (Ctrl+Shift+I), of selecteer van de Firefox menubalk, **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. Right-click over het gewenste gebied 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 sneltoets Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Kopieer de CSS-selector die je wilt targeten. Bijvoorbeeld, bij gebruik van Firefox Developer Tools kun je right-click > Copy Unique Selector voor het momenteel geselecteerde element in de Inspector-tool. Zorg ervoor dat je de goed geformatteerde volledige elementreferentie plakt (bijvoorbeeld, om de id attribuut-element voor de waarde 'main' te testen, moet je #main als de selector opgeven).
    Firefox Developer Tools context menu showing Copy Unique Selector option

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

    • Selector: #id → De #id selector stijlt het element met de gespecificeerde id.
    • Example: #main → De gespecificeerde id is main.
    • Example Reference: Selecteert het element met id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Plak de selector die je van het virtuele klembord hebt gekopieerd in het Selector veld.
    Wanneer je toegang hebt tot de resulterende problemen die zijn gevonden voor de component of het pagina-gebied dat is getarget, zullen die gerelateerd aan de specifieke CSS-selector die je invoerde worden weergegeven.
  4. Bekende fout: Bij gebruik van CSS-selector in Chrome Browser. Rechter inspectie, Open Dev tools, op elementen tab, zoek css-selector om te targeten klik en element>kopiëren>xpath of element>kopiëren>Volledige xpath retourneert altijd deze fout,\ 'Een onbekende fout heeft zich voorgedaan. Als deze testgeval componenten of pagina-gebieden bevat, zorg ervoor dat alle selectors geldig zijn'
    Workaround: Vind de ID voor de CSS-selector en gebruik Copy > Copy Selector.

Wat zijn Selectors?

**Kort Antwoord**: Het zijn reeksen tekst die kunnen worden gebruikt 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 rendering van HTML-documenten op het 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 substructuur, kunnen selectors worden gebruikt om:

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

**Structuur**: Een selector vertegenwoordigt een structuur die kan worden gebruikt als een voorwaarde (zoals in een CSS-regel) die bepaalt welke elementen een selector in een documentboom overeenkomen, 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 (*) Bijvoorbeeld, om de gekwalificeerde naam van elk Engelstalig element in de documentboom voor elke namespace te specificeren, voer in:

    *[hreflang|=en]

  • Type: Een optionele namespacecomponentvoorvoegsel voor een elementnaam (|) Bijvoorbeeld, om een heading 2 element in de documentboom te vertegenwoordigen, voer gewoon in:

    h2

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

    h3[title]

  • Klasse: Punt- of "punt"-notatie om het class-attribuut voor de respectieve namespace te representeren (.) Bijvoorbeeld, om stijl-informatie van groene kleur toe te voegen aan alle elementen met class="voorbeeld", voer in:

    .voorbeeld { kleur: groen } / alle elementen met class=voorbeeld */

  • ID: Attributen die als ID-type zijn gedeclareerd, identificeren een element uniek met een hekje (#) Bijvoorbeeld, om een ID-selector te representeren waarbij een element een ID-getypt attribuutwaarde heeft van "12345", voer in:

    #12345

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

    a.external:visited

  • Pseudo-elementen: Twee dubbele punten gevolgd door de naam van een pseudo-element geven toegang tot inhoud voorbij de huidige documentboom, en slechts één per selector is 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 }

  • Combinatoren: Staan specificatie toe van een hiërarchisch pad om afstamming te tonen, zoals kind- of broederelementen ( ) of (+)

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

    h1 em.

    Het is een correct en geldig, maar gedeeltelijk, beschrijving van het volgende fragment:

    <h1>Deze <span class="mijnklasse"> kop is <em>heel>/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:

Is this page helpful?

Help us improve this page

Still need help?