Tutorial: Hoe zoek je locators in de DOM met CSS en XPath

Inleiding

In deze tutorial leer je hoe je locators kunt vinden in de Document Object Model (DOM) met behulp van CSS-selectors en XPath. We zullen ook kijken naar enkele veelgebruikte cheat sheets die je kunnen helpen bij het vinden van de juiste locators. Dit is een essentiële vaardigheid voor het automatiseren van webtoepassingen met Selenium.

Benodigdheden

• Een moderne webbrowser (bijvoorbeeld Google Chrome of Firefox)
• Een ontwikkelomgeving zoals Visual Studio Code
• Basiskennis van HTML, CSS, en JavaScript
• Selenium WebDriver geïnstalleerd op je machine

Overzicht van de DOM

De DOM is een programmeerinterface voor webpagina’s. Het stelt een document voor als een gestructureerde groep van knooppunten en objecten, en geeft programmeertalen de mogelijkheid om toegang te krijgen tot en wijzigingen aan te brengen in de documentstructuur, stijl en inhoud.

CSS Selectors

CSS-selectors worden gebruikt om elementen op een webpagina te selecteren en te manipuleren. Selenium WebDriver kan deze selectors ook gebruiken om elementen in de DOM te lokaliseren.

Veelgebruikte CSS Selectors

• element: selecteert alle elementen van het opgegeven type.
• #id: selecteert het element met het opgegeven id.
• .class: selecteert alle elementen met de opgegeven class.
• element,element: selecteert alle elementen die voldoen aan een van de opgegeven selectors.

Geavanceerde CSS Selectors

• Kindselectoren:
  • ul>li: selecteert alle li elementen die directe kinderen zijn van een ul.
• Nth-kindselectoren:
  • p:nth-child(2): selecteert het tweede p element kind van zijn ouder.
• Naburige siblingselectoren:
  • h2 + p: selecteert elk p element dat direct volgt op een h2 element.
• Attribuutselectoren:
  • [attr]: selecteert elementen die een bepaald attribuut hebben.
  • [attr='value']: selecteert elementen met een specifiek attribuut en waarde.
  • [attr^='value']: selecteert elementen waarvan het attribuut begint met een bepaalde waarde.
  • [attr$='value']: selecteert elementen waarvan het attribuut eindigt op een bepaalde waarde.
  • [attr*='value']: selecteert elementen met een attribuut dat de opgegeven waarde bevat.

Voorbeelden

• Het lokaliseren van tekst:
  • driver.findElement(By.cssSelector("tagname:contains('text')"))
• Het lokaliseren van tabellen:
  • driver.findElement(By.cssSelector("table"))
• Het lokaliseren van invoervelden:
  • driver.findElement(By.cssSelector("input"))
• Het lokaliseren van knoppen:
  • driver.findElement(By.cssSelector("button"))
• Het lokaliseren van het eerste kind van een element:
  • driver.findElement(By.cssSelector("ul > li:first-child"))
• Het lokaliseren van een naburig siblingelement:
  • driver.findElement(By.cssSelector("h2 + p"))
• Het lokaliseren van een element op basis van een deel van de waarde van een attribuut:
  • driver.findElement(By.cssSelector("input[type$='text']"))

CSS-selectoren bieden geen directe manier om van een kind- naar een ouderelement te navigeren. Je moet in plaats daarvan de DOM-structuur van de pagina begrijpen en je selectoren dienovereenkomstig schrijven.

XPath

XPath (XML Path Language) is een taal die wordt gebruikt om elementen in een XML-document te selecteren. Selenium WebDriver kan XPath ook gebruiken om elementen in de DOM te lokaliseren.

Veelgebruikte XPath-uitdrukkingen

• //tagname: selecteert alle knooppunten met de opgegeven tagnaam.
• //tagname[@attribute='value']: selecteert alle knooppunten met de opgegeven tagnaam en attribuutwaarde.
• //tagname[text()='text']: selecteert alle knooppunten met de opgegeven tagnaam en tekst.

Geavanceerde XPath-uitdrukkingen

• As-selectie:
  • //book/ancestor::*: selecteert alle voorouders van het book element.
• Attribuutselectie:
  • //book[@price]: selecteert alle book elementen die een price attribuut hebben.
• Wildcards:
  • //price/../*: selecteert alle kinderen van de ouder van het price element.

Voorbeelden

• Het lokaliseren van tekst:
  • driver.findElement(By.xpath("//tagname[text()='text']"))
• Het lokaliseren van tabellen:
  • driver.findElement(By.xpath("//table"))
• Het lokaliseren van invoervelden:
  • driver.findElement(By.xpath("//input"))
• Het lokaliseren van knoppen:
  • driver.findElement(By.xpath("//button"))
• Het lokaliseren van het ouder element van een bepaald element:
  • driver.findElement(By.xpath("//td[text()='OpenAI']/parent::tr"))
• Het lokaliseren van het eerste kind van een bepaald element:
  • driver.findElement(By.xpath("//tr[td[text()='OpenAI']]/child::td[1]"))
• Het lokaliseren van het voorgaande siblingelement van een bepaald element:
  • driver.findElement(By.xpath("//td[text()='OpenAI']/preceding-sibling::td"))

Met deze geavanceerde selectoren kun je complexe queries maken om precies de elementen te vinden die je nodig hebt voor je geautomatiseerde tests.

Conclusie

Met de kennis van CSS-selectoren en XPath-uitdrukkingen die je in deze tutorial hebt opgedaan, ben je goed uitgerust om webtoepassingen te automatiseren met Selenium WebDriver. We bieden een opleidings programma aan van een aantal uur zodat je hier goed in kan worden.

Follow me on LinkedIn: www.linkedin.com/comm/mynetwork/discovery-see-all?usecase=PEOPLE_FOLLOWS&followMember=ralphvanderhorst