Introductie tot inspecteren en evalueren

Google Chrome biedt een ingebouwde debugtool genaamd “Chrome DevTools”, die een handige functie bevat die XPath/CSS-selectors kan evalueren of valideren zonder enige externe extensies.

Dit kan op twee manieren worden gedaan:

  • de zoekfunctie binnen het Elements-paneel om XPath/CSS-selectors te evalueren en overeenkomende nodes in de DOM te markeren.
  • Voer tokens $x(“some_xpath”) of $$(“css-selectors”) uit in het Console-paneel, die we kunnen evalueren en valideren. We zullen het eerste punt bespreken, maar je kunt ook de console gebruiken als je wilt

Inspecteren van CSS Selectors en XPath met behulp van Google Chrome DevTools

Stap-voor-stap handleiding met voorbeelden

Open Google Chrome DevTools

Open Google Chrome en navigeer naar de webpagina die je wilt inspecteren. Klik met de rechtermuisknop op de webpagina en selecteer “Inspecteren” uit het contextmenu. Als alternatief kun je Ctrl+Shift+I (Windows/Linux) of Cmd+Option+I (Mac) indrukken om de DevTools te openen. De DevTools worden geopend met het Elements-paneel actief, waarbij de HTML-structuur van de pagina wordt weergegeven.

Elementen vinden met behulp van CSS Selectors

Druk op Ctrl+F (Windows/Linux) of Cmd+F (Mac) om het zoekvak in het Elements-paneel te openen.

Voer een CSS-selector in het zoekvak in om overeenkomende elementen te vinden.

Voorbeeld 1: Selecteer een element op class naam

Om een element met de class nav-item te vinden, typ .nav-item.

.nav-item

class selector

Voorbeeld 2: Selecteer een element op ID

Om een element met de ID submit-button te vinden, typ #submit-button.


#submit-button

id selector

Voorbeeld 3: Selecteer een element op attribuut

Om een invoerelement met het type tekst te vinden, typ input[type=“text”].


input[type="text"]

css selector

Zoek naar area label in textarea

css selector

textarea[aria-label$="Search"]

textarea[aria-label$="Search"][class="gLFyf"]

Elementen vinden met behulp van XPath

Met het zoekvak nog open, voer je een XPath-uitdrukking in om overeenkomende elementen te vinden.

Voorbeeld 1: Selecteer een element op tag naam

Om alle knopelementen te vinden, typ //button.

//button

Voorbeeld 2: XPATH: Selecteer een element op attribuut

Om een invoerelement met het type tekst te vinden, typ //input[@type=“text”].

//input[@type="text"]

(xpath selector

Voorbeeld 3: Selecteer een element op tekstinhoud

Om een knopelement te vinden dat de tekst “Submit” bevat, typ //button[contains(text(), ‘Submit’)].

//button[contains(text(), 'Submit')]

Laten we nog een voorbeeld nemen met Gmail-tekst

(xpath selector

//*[text()[contains(.,Gmail)]]
  • is een selector die elk element (d.w.z. tag) overeenkomt - het geeft een node-set terug.
  • De buitenste [] zijn een voorwaarde die werkt op elke individuele node in die node-set - hier werkt het op elk element in het document.
  • text() is een selector die alle tekstnodes overeenkomt die kinderen zijn van de contextnode - het geeft een node-set terug.
  • De binnenste [] zijn een voorwaarde die werkt op elke node in die node-set - hier elke individuele tekstnode. Elke individuele tekstnode is het startpunt voor elk pad in de haakjes, en kan ook expliciet worden aangeduid als . binnen de haakjes. Het komt overeen als een van de individuele nodes waarop het werkt overeenkomt met de voorwaarden binnen de haakjes.
  • contains is een functie die werkt op een string. Hier wordt het een individuele tekstnode (.). Aangezien het de tweede tekstnode in de tag individueel wordt doorgegeven, zal het de ‘ABC’ string zien en kunnen matchen. Dit zijn slechts enkele basisvoorbeelden die ik dagelijks gebruik, maar ze kunnen zeer complex worden, er zijn cheatsheets voor dit, maar het is gewoon doen.

nog een moeilijker voorbeeld

(xpath selector dynamics

In dit MS Dynamics voorbeeld zoek ik naar een uniek item in de Employee master.

Dit voorbeeld is een xpath query

 //div[contains(@controlname,'First')]/descendant::input

Hier is een stap-voor-stap uitleg:

  • // is een XPath-uitdrukking die nodes in het document selecteert vanaf de huidige node die overeenkomen met de selectie, ongeacht hun locatie in het document.

  • div selecteert alle

    elementen in het document.

  • [contains(@controlname,‘First’)]:

  • [contains(@controlname,‘First’)] is een predicaat dat wordt gebruikt om de

    elementen te filteren die in de vorige stap zijn geselecteerd.

  • @controlname verwijst naar het attribuut controlname van het

    element.

  • contains(@controlname,‘First’) is een functie die waar is als het attribuut controlname de substring ‘First’ bevat.

Dus //div[contains(@controlname,‘First’)] selecteert alle

elementen waarvan het attribuut controlname de tekst ‘First’ bevat.

Wat betreft /descendant::input:

  • / geeft aan dat het volgende deel van de uitdrukking van toepassing is op de kinderen van de nodes die zijn geselecteerd door het vorige deel van de uitdrukking.
  • descendant::input selecteert alle elementen die afstammelingen zijn van de huidige node (die in dit geval de
    elementen zijn die zijn gefilterd door het vorige deel van de XPath-query).

Het is als sql, je moet eraan wennen en het kost tijd, maar als je eenmaal gewend bent, zal het een toevoeging zijn in vergelijking met de verschillende opnametools. Vooral als je geavanceerde querying moet doen in dynamische “shadow” dom.

Belangrijke opmerking

Als er overeenkomende elementen zijn, worden ze gemarkeerd in DOM. Echter, als er overeenkomende strings binnen DOM zijn, worden ze ook als geldige resultaten beschouwd. Bijvoorbeeld, CSS-selector header moet alles (inline CSS, scripts etc.) matchen dat het woord header bevat, in plaats van alleen elementen te matchen. Voor selenium/playwright en andere tools met browserautomatisering is het essentieel om te begrijpen dat het resultaat altijd 1 is. Als het meer dan één klik heeft, kun je het niet herkennen.