Locating one element
Een van de meest fundamentele technieken om te leren bij het gebruik van WebDriver is het vinden van elementen op de pagina. WebDriver biedt een aantal ingebouwde selectortypen, waaronder het vinden van een element op basis van zijn ID-attribuut:
Zoals in het voorbeeld te zien is, wordt het lokaliseren van elementen in WebDriver gedaan op hetWebDriver instance-object. De methode findElement(By) retourneert een ander fundamenteel objecttype, de WebElement.
-
WebDriververtegenwoordigt de browser -
WebElementvertegenwoordigt een bepaald DOM-knooppunt (een besturingselement, b.v. een link of invoerveld, enz.
Als je eenmaal een verwijzing hebt naar een webelement dat is “gevonden”, kun je de reikwijdte van je zoekopdracht beperken door dezelfde oproep te gebruiken op die objectinstantie:
Je kunt dit doen omdat zowel de WebDriver- als de WebElement-typen de SearchContext-interface implementeren. In WebDriver wordt dit een op rollen gebaseerde interface genoemd. Met op rollen gebaseerde interfaces kunt u bepalen of een bepaalde implementatie van een stuurprogramma een bepaalde functie ondersteunt. Deze interfaces zijn duidelijk gedefinieerd en proberen zich te houden aan het hebben van slechts één enkele rol van verantwoordelijkheid. U kunt meer lezen over het ontwerp van WebDriver en welke rollen in welke drivers worden ondersteund in Some Other Section WhichMust Be Named.
Daarom ondersteunt de hierboven gebruikte By interface ook een aantal aanvullende locator strategieën. Een geneste lookup is misschien niet de meest effectieve locator-strategie voor kaas, omdat daarvoor twee afzonderlijke opdrachten aan de browser moeten worden gegeven: eerst in het DOM zoeken naar een element met ID “cheese”, en dan in een beperkte context zoeken naar “cheddar”.
Om de prestaties iets te verbeteren, moeten we proberen een meer specifieke locator te gebruiken: WebDriver ondersteunt het opzoeken van elementen door CSS locators, waardoor we de twee vorige locators kunnen combineren in één zoekopdracht:
Locatie van meerdere elementen
Het is mogelijk dat het document waarmee we werken een geordende lijst blijkt te bevatten van de kaas die we het lekkerst vinden:
<ol id=cheese> <li id=cheddar>… <li id=brie>… <li id=rochefort>… <li id=camembert>…</ol>Omdat meer kaas onbetwistbaar beter is, en het onhandig zou zijn om elk van de items afzonderlijk op te vragen, is een superieure techniek om kaas op te vragen gebruik te maken van de meervoudige versie findElements(By). Deze methode retourneert een verzameling webelementen. Als er maar één element wordt gevonden, zal het toch een verzameling (van één element) teruggeven. Als geen enkel element overeenkomt met de locator, wordt een lege lijst geretourneerd.
Selectiestrategieën voor elementen
Er zijn acht verschillende ingebouwde strategieën voor het lokaliseren van elementen in WebDriver:
| Locator | Description |
|---|---|
| Klassenaam | Localiseert elementen waarvan de klassenaam de zoekwaarde bevat (samengestelde klassenamen zijn niet toegestaan) |
| css selector | Localiseert elementen die overeenkomen met een CSS selector |
| id | Loceert elementen waarvan het ID-attribuut overeenkomt met de zoekwaarde |
| name | Loceert elementen waarvan het NAAM-attribuut overeenkomt met de zoekwaarde |
| link tekst | Localiseert ankerelementen waarvan de zichtbare tekst overeenkomt met de zoekwaarde |
| gedeeltelijke linktekst | Localiseert ankerelementen waarvan de zichtbare tekst de zoekwaarde bevat. Als er meerdere elementen overeenkomen, wordt alleen het eerste element geselecteerd. |
| tagnaam | Localiseert elementen waarvan de tagnaam overeenkomt met de zoekwaarde |
| xpath |
Tips voor het gebruik van selectors
In het algemeen, zijn HTML-ID’s, als ze beschikbaar, uniek en consistent voorspelbaar zijn, de beste methode om een element op een pagina te lokaliseren.
Als unieke ID’s niet beschikbaar zijn, is een goedgeschreven CSS-selector de voorkeursmethode om een element te lokaliseren. XPath werkt net zo goed als CSS-selectors, maar de syntax is gecompliceerd en vaak moeilijk te debuggen. Hoewel XPath-selectors erg flexibel zijn, worden ze meestal niet op prestaties getest door browser-leveranciers en zijn ze vaak erg traag.
Selectiestrategieën op basis van linkText en partialLinkText hebben als nadeel dat ze alleen werken op link-elementen. Bovendien doen ze intern in WebDriver een beroep op XPath-selectors.
Tag name kan een gevaarlijke manier zijn om elementen te lokaliseren. Er zijn vaak meerdere elementen van dezelfde tag aanwezig op de pagina. Dit is vooral nuttig bij het aanroepen van de findElements(By) methode die een verzameling elementen retourneert.
De aanbeveling is om je locators zo compact en leesbaar mogelijk te houden. WebDriver vragen om de DOM structuur te doorzoeken is een dure operatie, en hoe meer u het bereik van uw zoekopdracht kunt beperken, hoe beter.
Relative Locators
Selenium 4 brengt Relative Locators die voorheen Friendly Locators werden genoemd. Deze functionaliteit is toegevoegd om u te helpen elementen te lokaliseren die zich in de buurt van andere elementen bevinden.De beschikbare Relative Locators zijn:
- boven
- onder
- naar links
- naar rechts
- dichtbij
findElement methode accepteert nu een nieuwe methode withTagName() die een RelativeLocator retourneert.
Hoe werkt het
Selenium gebruikt de JavaScript-functiegetBoundingClientRect()om de relatieve elementen te vinden. Deze functie geeft eigenschappen van een element terug, zoals rechts, links, onder en boven.
Laten we het onderstaande voorbeeld eens bekijken om de relatieve locators te begrijpen.
above()
Het WebElement dat boven het opgegeven element staat, wordt geretourneerd
below()
Het WebElement dat onder het opgegeven element staat, wordt geretourneerd, dat onder het gespecificeerde element verschijnt
toLeftOf()
Haalt het WebElement terug dat links van het gespecificeerde element staat
toRightOf()
Het WebElement dat rechts van het gespecificeerde element staat wordt teruggegeven
near()
Het WebElement dat maximaal 50px van het gespecificeerde element staat wordt teruggegeven.