Elementen zoeken met CSS Selector in Selenium

CSS-selectors zijn een krachtig hulpmiddel voor het lokaliseren van elementen op een webpagina bij het automatiseren van browsertests met Selenium. Met behulp van CSS-selectors kunt u elementen op een nauwkeurige en flexibele manier targeten. In deze uitgebreide gids bespreken we alles wat u moet weten om een professional te worden in het vinden van elementen via de CSS-selector in Selenium.

Een inleiding tot CSS-kiezers

Met CSS-kiezers kunt u HTML-elementen selecteren op basis van id, klasse, attribuut, positie in de DOM-boom en meer. Hier zijn enkele van de meest gebruikte CSS-selectors:

ID-kiezer – Selecteert een element op basis van zijn unieke ID. Bijvoorbeeld #main-header zal het element met id=”main-header” selecteren.
Klassenkiezer – Selecteert elementen op basis van de klassenaam. Bijvoorbeeld .article selecteert alle elementen met class="article".
Kenmerkkiezer – Selecteert elementen op basis van een bepaald attribuut of attribuutwaarde. Bijvoorbeeld input[type="text"] selecteert alle invoerelementen met type="text".
Afstammeling-kiezer – Selecteert elementen die afstammelingen zijn van een ander opgegeven element. Bijvoorbeeld div p selecteert alle p-elementen binnen div-elementen.
Kindkiezer – Selecteert elementen die directe onderliggende elementen zijn van een ander opgegeven element. Bijvoorbeeld div > p zal p elementen selecteren die directe kinderen zijn van div.
Aangrenzende broer/zus-selector – Selecteert het zusterelement dat onmiddellijk volgt op een ander element. Bijvoorbeeld h2 + p selecteert het p-element dat onmiddellijk na een h2-element komt.
Algemene broer/zuskiezer – Selecteert alle verwante elementen die op een ander element volgen. Bijvoorbeeld h2 ~ p selecteert alle p-elementen die na een h2-element komen.

Dit zijn slechts enkele voorbeelden van de vele CSS-selectortypen. U kunt meerdere selectors combineren om elementen op een zeer specifieke manier te targeten.

Elementen zoeken via CSS Selector in Selenium

Selenium biedt twee hoofdmethoden voor het vinden van elementen met behulp van CSS-selectors:

driver.find_element_by_css_selector()

Deze methode retourneert het eerste overeenkomende element.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

Deze methode retourneert een lijst met alle overeenkomende elementen.

elements = driver.find_elements_by_css_selector(‘.article‘)

Wanneer u deze methoden gebruikt, geeft u de CSS-selector als een tekenreeks door. Hier volgen enkele voorbeelden van hoe u elementen met verschillende selectors kunt lokaliseren:

ById:

driver.find_element_by_css_selector(‘#signup-form‘)

Per klasse:

driver.find_element_by_css_selector(‘.footer-links‘)

Op kenmerk:

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

Aflopend:

driver.find_element_by_css_selector(‘div#content p.summary‘)

Kind:

driver.find_element_by_css_selector(‘ul.menu > li.active‘)

Aangrenzende broer of zus:

driver.find_element_by_css_selector(‘h1 + p.intro‘)

Algemeen broer of zus:

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

Zoals u kunt zien, bieden CSS-selectors u veel opties om elementen op verschillende manieren te targeten.

Tips voor het schrijven van effectieve CSS-kiezers

Hier zijn enkele tips die u kunt volgen bij het schrijven van CSS-selectors voor het vinden van elementen in Selenium:

Wees zo specifiek mogelijk – Gebruik id, klasse, attributen en meerdere selectors samen om elementen nauwkeurig te targeten. Dit voorkomt vals-positieve matches.
Geef de voorkeur aan klasse boven tagnaam – Tagnamen zoals div, p, a, etc. zijn niet erg onderscheidend. Klassen maken specifiekere targeting mogelijk.
Gebruik unieke kenmerken zoals naam of titel – De kenmerken naam en titel hebben doorgaans unieke waarden die één enkel element kunnen identificeren.
Gebruik de selectors voor broers en zussen zorgvuldig – Aangrenzende en algemene selectors voor broers en zussen kunnen meer elementen matchen dan bedoeld als ze niet goed zijn geschreven.
Vermijd complexe geneste selectors – Door veel onderliggende selectors aan elkaar te koppelen, kunnen selectors gevoelig zijn voor breuken. Probeer elke selector te beperken tot 3-4 gekoppelde niveaus.
Verdeel lange selectors in meerdere regels: CSS-selectors hoeven niet uit één regel te bestaan. Door ze in meerdere regels op te splitsen, kunt u de leesbaarheid verbeteren.

Door deze tips te volgen, kunt u robuuste en onderhoudbare CSS-selectors schrijven voor het automatiseren van webtests.

Veelvoorkomende voorbeelden en gebruiksscenario's

Laten we nu eens kijken naar enkele veelvoorkomende voorbeelden van hoe CSS-selectors worden gebruikt voor webscraping en browsertests met Selenium:

Navigatielinks selecteren

Om de belangrijkste navigatielinks te selecteren, kunnen we een klassenkiezer gebruiken:

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

Formuliervelden selecteren

We kunnen formulierinvoervelden selecteren op basis van de invoertag en het type-attribuut:

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

Tabelrijen en -kolommen selecteren

Met CSS-kiezers kunt u eenvoudig specifieke rijen en cellen in een HTML-tabel targeten:

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

Onderliggende elementen selecteren

Om alleen directe div-kinderen van een container te selecteren, kunnen we de kindkiezer gebruiken:

children = driver.find_elements_by_css_selector(‘#container > div‘)

Elementen selecteren op basis van tekst

We kunnen de linktekst gedeeltelijk matchen met behulp van de *-selector:

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

Deze voorbeelden laten zien hoe CSS-selectors kunnen worden gebruikt in realistische testautomatiseringsscenario's.

CSS-kiezers gebruiken in andere talen

In de voorbeelden tot nu toe is gebruik gemaakt van Python, maar CSS-selectors kunnen in elke taalbinding voor Selenium worden gebruikt:

Java

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

JavaScript

// $ 
const element = await driver.$(‘div.main #login-form‘);

Welke taal u ook gebruikt, CSS-selectors bieden een krachtige en flexibele manier om elementen te targeten.

Elementen lokaliseren op klassenaam

Een veelvoorkomend gebruiksscenario is het lokaliseren van elementen op klassenaam. Hier zijn enkele tips voor het selecteren op klasse in Selenium:

Match de exacte klassenaam – driver.find_element_by_class_name(‘primary-btn‘)
Gebruik een CSS-klasseselector – driver.find_element_by_css_selector(‘.primary-btn‘)
Gedeeltelijke wedstrijd meerdere klassen – driver.find_element_by_css_selector(‘.primary.btn‘)
Match nakomeling met klasse – driver.find_element_by_css_selector(‘div .primary-btn‘)
Gebruik meerdere klassen voor uniciteit – driver.find_element_by_css_selector(‘.primary-btn.large‘)

Matchen op klassenaam is erg handig, maar zorg ervoor dat u klassen target die uniek zijn op de pagina.

Elementen zoeken op tagnaam

Het lokaliseren van elementen op basis van de HTML-tagnaam is een andere veel voorkomende Selenium-taak. Hier zijn enkele voorbeelden:

Zoek het eerste exemplaar van de tagnaam:

element = driver.find_element_by_tag_name(‘button‘)

Zoek alle exemplaren van de tagnaam:

buttons = driver.find_elements_by_tag_name(‘button‘)

Combineren met CSS-selector:

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

Omdat tagnamen zoals <div> en <span> vaak voorkomen, probeer dan ook ID's, klassen of attributen te gebruiken om het element uniek te identificeren.

Elementen zoeken op naam of ID

Als elementen ID- of naamattributen hebben, is lokaliseren op naam of ID de eenvoudigste optie.

Zoeken op precieze ID:

element = driver.find_element_by_id(‘signup-form‘)

Zoek op exacte naam:

element = driver.find_element_by_name(‘email‘)

De ID- en naamlocators komen alleen overeen met de exacte attribuutwaarden. Dit maakt ze zeer specifiek, maar ook vatbaar voor breuk als ID's of namen veranderen.

Elementen zoeken via XPath versus CSS Selector

XPath is de andere veel voorkomende elementlocatiestrategie in Selenium. Dus wanneer moet u XPath versus CSS-selectors gebruiken?

Hier zijn enkele verschillen:

leesbaarheid – CSS-selectors zijn voor de meeste ontwikkelaars beter leesbaar en gemakkelijker te begrijpen.
Onderhoud – CSS-selectors zijn minder broos en gevoelig voor het breken van wijzigingen in vergelijking met lange, complexe XPaths.
Mogelijkheden – XPath heeft toegang tot bepaalde elementeigenschappen die CSS-selectors niet hebben, zoals tekstinhoud.
Performance – CSS-selectors kunnen sneller door browsers worden gecombineerd in vergelijking met complexe XPaths.

Geef over het algemeen de voorkeur aan CSS-selectors vanwege onderhoudbaarheid en prestaties. Gebruik XPath alleen als dat nodig is om toegang te krijgen tot iets dat niet mogelijk is met CSS.

Beste praktijken bij het gebruik van CSS-kiezers

Hier volgen enkele praktische tips die u kunt volgen bij het lokaliseren van elementen met CSS-selectors:

Geef de voorkeur aan uniciteit boven complexiteit – Vermijd indien mogelijk lange ketens van geneste selectors.
Gebruik ID's en klassen boven tagnamen en nesten.
Probeer 3 of minder aan elkaar gekoppelde niveaus te matchen – Meer niveaus verhogen de kwetsbaarheid.
Vermijd universele selectors zoals * – Deze zijn gevoelig voor vals-positieve overeenkomsten.
Verdeel lange selectors in meerdere regels – Verbetert de leesbaarheid.
Veelgebruikte selectors in cache opslaan – Slaat herhaalde selectorzoekopdrachten op.
Gebruik beschrijvende selectornamen – Helpt de bedoeling te verduidelijken en vermijdt magische reeksen.

Door deze best practices te volgen, kun je robuuste, leesbare en betrouwbare CSS-selectors voor Selenium-automatisering schrijven.

Tips voor het debuggen van CSS-kiezers

Het debuggen van CSS-selectors is een essentiële vaardigheid voor testautomatisering. Hier volgen enkele tips voor het oplossen van problemen:

Gebruik de ontwikkelaarstools van uw browser om selectors te testen. Chrome DevTools biedt een handige elementinspecteur.
Afgestemde elementen afdrukken en inspecteren – na gebruik find_elements(), druk de resultaten af om te zien wat er overeenkomt.
het worstelen NoSuchElementException – Verpak vondsten in een try/except-blok om te vangen wanneer een element niet wordt gevonden.
Genereer XPath uit doelelement – In veel browsers kunt u de XPath kopiëren, wat kan helpen bij het bouwen van de CSS-selector.
Vereenvoudig complexe selectors – Probeer attributen/klassen/nesten te verwijderen totdat de selector werkt.
Gebruik indien nodig expliciete wachttijden: voor dynamische pagina's kan het nodig zijn dat er gewacht moet worden voordat selectors beschikbaar komen.
Valideer de nauwkeurigheid van de selector – Zorg ervoor dat de selector daadwerkelijk het gewenste element vindt, en niet zomaar een element.

De tijd nemen om selectors zorgvuldig te debuggen, zal zijn vruchten afwerpen door stabielere tests.

Conclusie

Deze gids behandelde alle belangrijke aspecten van het lokaliseren van elementen door CSS-selector in Selenium:

Syntaxis en typen van CSS-selector
Gebruik met Selenium find_element methoden
Het schrijven van nauwkeurige en onderhoudbare selectors
Veelvoorkomende gebruiksscenario's en voorbeelden
Vergelijking met XPath
Foutopsporing en best practices

CSS-selectors bieden een krachtige, flexibele manier om elementen te targeten voor webscraping en testautomatisering. Door de hier getoonde technieken onder de knie te krijgen, kunt u robuuste automatiseringsscripts schrijven die bestand zijn tegen wijzigingen in de gebruikersinterface van de toepassing. Het juiste gebruik van CSS-selectors is een onmisbare vaardigheid voor elke doorgewinterde Selenium-ingenieur.