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 gebieden in de axe Auditor-applicatie die een Selector-veld bieden. Volg dit proces als je een specifieke CSS-selector wilt opgeven die moet worden getest als onderdeel van het volgende:

  • Algemeen Component (Nieuwe testcase > Component toevoegen): Bij het definiëren van een algemeen component op het Common Components-paneel bij het maken van een nieuwe testcase.
  • Pagina Gebiedscomponent (Nieuwe testcase > Pagina toevoegen > Pagina gebiedsscope): Bij het definiëren van een paginagebied op het Pagina toevoegen-paneel bij het maken van een nieuwe testcase.
  • Pagina Gebiedscomponent (Pagina voorbereiden voor geautomatiseerd en handmatig testen > Pagina gebiedsscope): Bij het definiëren van een paginagebied van de „pagina onder test“ op het scherm Pagina voorbereiden 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 gebruik maakt van de „ontwikkelaarstools“ die bij je webbrowser horen. Deze hebben verschillende namen afhankelijk van het browsertype, en elk biedt toetsenbord sneltoetsen voor toegang tot de tools en navigatie binnen deze tools.

Toetsenbord Sneltoetsen Referentie 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 Developer Tools. Voor meer informatie over het gebruik van toetsenbord sneltoetsen met Firefox Developer Tools, zie Mozilla Developer Toetsenbord Sneltoetsen.

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

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

Een selector van een pagina kopiëren

  1. Right-click op het gewenste gebied van de testpagina, selecteer vervolgens Inspect Element in het menu om de Inspector te starten zodat je dan een element op de pagina kunt selecteren (of gebruik 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 het Inspector-hulpmiddel. Zorg ervoor dat je de correct opgemaakte volledige elementreferentie plakt (bijvoorbeeld om de id attribuut element voor de waarde 'main' te testen, zou je #main als de selector specificeren).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Voor volledige details over correct geformatteerde CSS-selectors 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".
    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 krijgt tot de resulterende problemen die zijn gevonden voor de component of paginagedeelte dat is getarget, zul je die problemen zien die gerelateerd zijn aan de specifieke CSS-selector die je hebt ingevoerd.
  4. Bekende bug: Bij het gebruik van de CSS-selector in de Chrome-browser. Rechter inspectie, Open Dev-tools, in het elemententabblad, vind CSS-selector om te targeten klik en element>kopieer>xpath of element>kopieer>Volledige xpath geeft altijd deze fout, \ ' Er is een onbekende fout opgetreden. Als deze test case componenten of paginagebieden bevat, zorg ervoor dat alle selectors geldig zijn'
    Workaround: Zoek de ID voor de CSS-selector en gebruik Copy > Copy Selector.

Wat zijn selectors?

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

Iets langer, technischere 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 taal Cascading Style Sheet (CSS3) beschrijft het weergeven 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 selecteren
  • Een enkel element selecteren uit een set elementen

Structuur: Een selector vertegenwoordigt een structuur die kan worden gebruikt als een voorwaarde (zoals in een CSS-regel) die bepaalt welke elementen een selector overeenkomt in een documentboom, 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 elk namespace te specificeren, voer in:

    *[hreflang|=en]

  • Type: Een optionele naamruimtecomponent-prefix voorafgaand aan een elementnaam (|) Bijvoorbeeld, om een kop 2 element in de documentboom weer te geven, voer simpelweg in:

    h2

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

    h3[title]

  • Klasse: Punt of "punt" notatie om het class-attribuut voor de respectieve namespace te vertegenwoordigen (.) Bijvoorbeeld, om groene kleurstijlinformatie 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 waar elk element waarvan de ID-getypte attribuutwaarde "12345" is, voer in:

    #12345

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

    a.external:visited

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

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

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

  • Combinatoren: Hiermee kun je een hiërarchisch pad specificeren om afstamming zoals kind- of broerelementen aan te geven ( ) of (+)

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

    h1 em.

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

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

Syntaxis: De basis "grammatica" van selectors omvat het volgende:

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

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

Is this page helpful?

Help us improve this page

Still need help?