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-toepassing die een Selecteer veld bieden. Volg dit proces wanneer u een specifieke CSS-selector wilt opgeven die getest moet worden als onderdeel van het volgende:

  • Algemeen Component (Nieuwe Testcase > Component Toevoegen): Bij het definiëren van een algemeen component in het Algemeen Componenten-paneel bij het aanmaken van een nieuwe Testcase.
  • Pagina Gebied Component (Nieuwe Testcase > Pagina Toevoegen > Pagina Gebied Scope): Bij het definiëren van een Pagina Gebied in het Pagina's Toevoegen-paneel bij het aanmaken van een nieuwe Testcase.
  • Pagina Gebied Component (Bereid Pagina voor op Automatisch en Handmatig Testen > Pagina Gebied Scope): Bij het definiëren van een Pagina Gebied van de „pagina onder test“ op het Bereid Pagina voor op Automatisch en Handmatig Testen scherm toegankelijk vanuit Test Run Overzicht.

Aan de slag

Het lokaliseren en kopiëren van een selector houdt doorgaans in dat u de „ontwikkelaarstools“ gebruikt die bij uw webbrowser worden geleverd. Deze hebben verschillende namen, afhankelijk van het type browser, en elk biedt sneltoetsen voor toegang tot de tools en navigatie binnen de 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 Sneltoetsen.

U kunt de Inspector (een van de Ontwikkelaarstools waarmee ze allemaal starten) op een van de volgende manieren openen:

  • Zonder een element geselecteerd: Kies de **Inspector** optie uit het **Ontwikkelaar** menu **(Ctrl+Shift+I)**, of vanuit de Firefox Menubalk, selecteer **Hulpmiddelen > 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 kopiëren van een pagina

  1. Right-click op het gewenste gedeelte van de testpagina, en selecteer dan Inspect Element in het menu om de Inspector te starten zodat je een element op de pagina kunt selecteren (of gebruik de toetsencombinatie 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-tool. Zorg ervoor dat je de correct geformatteerde volledige elementreferentie plakt (bijvoorbeeld, om het id attribuut element te testen voor de waarde 'main', dien je #main als de selector op te geven).
    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 stelt het element met de gespecificeerde id in stijl.
    • 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 krijgt tot de resulterende problemen die zijn gevonden voor het component of pagina gebied dat je hebt getarget, zie je ook die gerelateerd aan de specifieke CSS-selector die je hebt ingevoerd.
  4. Bekende bug: Bij gebruik van CSS-selector in Chrome Browser. Rechterklik inspecteren, Dev tools openen, op het elementen tabblad, css-selector vinden om te targeten klik op element>kopiëren>Xpath of element>kopiëren>Volledige Xpath geeft altijd deze fout,\ ' Er is een onbekende fout opgetreden. Als deze testgeval componenten of pagina gebieden 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?

**Kort Antwoord**: Het zijn tekstreeksen die kunnen worden gebruikt om een element of groep elementen op een webpagina te identificeren.

**Iets Langere, Meer Technische 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 koppelen van stijl eigenschappen aan elementen in HTML-documenten.

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

  • Een set van elementen te selecteren
  • Een enkel element uit een set van 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.

Types: Selectortypen omvatten:

  • Universeel: De gekwalificeerde naam van een elementtype (*) Bijvoorbeeld, om de gekwalificeerde naam van elk Engelse taalelement in de documentboom voor elk naamruimte op te geven, voert u in:

    *[hreflang|=en]

  • Type: Een optioneel naamruimtecomponentvoorvoegsel voorafgegaan door een elementnaam (|) Bijvoorbeeld, om een heading 2-element in de documentboom weer te geven, voert u eenvoudig in:

    h2

  • Attribuut: Vertegenwoordigt het attribuut van een element ([]) Bijvoorbeeld, om een h3-element met het title-attribuut weer te geven, ongeacht de waarde, voert u in:

    h3[title]

  • Klasse: Puntnotatie of "volgpuntaanduiding" om het class-attribuut voor de respectieve naamruimte weer te geven (.) Bijvoorbeeld, om groene kleurstijlinformatie toe te wijzen aan alle elementen met class="example", voert u in:

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

  • ID: Attributen die zijn gedeclareerd als van type ID 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, voert u 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 klasse external die al bezocht zijn, voert u in:

    a.external:visited

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

    Bijvoorbeeld, om de letters van de eerste regel van elk p-element om te zetten in hoofdletters, voert u in:

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

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

    Bijvoorbeeld, om em-elementen die afstammelingen zijn van h1-elementen te targeten, voert u 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 (Let op: Aangezien dit kan worden weggelaten wanneer 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/

Verwante Onderwerpen:

Is this page helpful?

Help us improve this page

Still need help?