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
Voorbeeld 2: Selecteer een element op ID
Om een element met de ID submit-button te vinden, typ #submit-button.
#submit-button
Voorbeeld 3: Selecteer een element op attribuut
Om een invoerelement met het type tekst te vinden, typ input[type=“text”].
input[type="text"]
Zoek naar area label in textarea
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"]
(
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
(
//*[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
(
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.