Testingenjörer spelar en avgörande roll i mjukvaruutvecklingsprocessen. Deras uppgift är att säkerställa att programvaran är felfri och fungerar som den ska. Innan en applikation släpps eller anses redo för användning, genomgår den noggranna tester utförda av dessa specialister.
En testares förmåga att lokalisera och interagera med webbelement är av största vikt. Selenium är ett vanligt förekommande verktyg för testautomatisering bland moderna utvecklingsteam. Det består av fyra huvudkomponenter: Selenium Grid, Selenium WebDriver, Selenium IDE och Selenium RC.
I denna artikel kommer vi att fokusera på Selenium WebDriver, särskilt dess användning av XPath. Vi kommer att gå igenom vad XPath är, grundläggande syntax och hur man använder det i Selenium.
Vad är XPath?
XPath, som står för XML Path Language, är ett frågespråk som används för att välja och navigera genom attribut och element i XML-dokument. Det fungerar genom att definiera en sökväg, vilket gör det möjligt att adressera specifika delar av XML-dokument och hämta information från dem.
Syntaxen i XPath liknar den hos en sökväg till ett filsystem. Dessutom finns det funktioner och symboler som underlättar valet av element baserat på deras attribut och hierarkiska position. XPath är användbart i samband med tekniker som XML, HTML och XSLT för att utvinna och hantera data.
Varför använda XPath?
- Flexibilitet: Till skillnad från CSS-selektorer, som är begränsade till att hitta element med hjälp av taggnamn, ID eller klass, ger XPath möjligheten att identifiera element med hjälp av olika attribut.
- Återanvändbarhet: XPath-uttryck kan lagras i variabler och återanvändas i koden.
- Noggrann nodval: XPath erbjuder ett standardiserat sätt att rikta in sig på specifika element i ett webbdokument.
Grundläggande syntax för XPath
Med XPath kan du hitta alla element på en webbsida med hjälp av DOM (Document Object Model). Innan vi går in på syntaxen är det viktigt att förstå följande XPath-uttryck:
| Uttryck | Beskrivning |
| nodnamn/taggnamn | Väljer alla noder med namnet ’nodnamn’ eller ’taggnamn’. |
| / | Väljer från rotnoden. |
| // | Väljer noder i det aktuella dokumentet, oavsett deras placering. |
| @ | Väljer attribut. |
| .. | Väljer föräldern till den aktuella noden. |
| . | Väljer den aktuella noden. |
Standardmässig syntax för XPath är:
XPath=//taggnamn[@attribut="värde"]
Syntaxen inleds med ett dubbelt snedstreck (//), vilket indikerar att sökningen startar från den aktuella noden, definierad av taggen/nodnamnet.
Absolut XPath vs. Relativ XPath
Det finns två huvudtyper av XPath-sökvägar: Absolut XPath och Relativ XPath.
Absolut XPath
En absolut XPath-sökväg är en direkt väg från rotnoden till det önskade elementet. Den börjar med rotnoden och slutar vid den aktuella noden.
Här är ett exempel på ett HTML-dokument:
<!DOCTYPE html>
<html>
<head>
<title>adminvista.com</title>
</head>
<body>
<div>
<h1>Välkommen till adminvista.com</h1>
</div>
</body>
</html>
För att hitta elementet med texten ”Välkommen till adminvista.com”, skulle den absoluta sökvägen vara:
/html/body/div/h1
I det ovanstående dokumentet har vi:
- HTML som rotnod: /html
- Brödtexten (body) som en överordnad nod: /html/body
- div som en underordnad nod till brödtexten: /html/body/div
- H1 som underordnad nod till div: /html/body/div/h1
För att nå det innersta elementet, måste man följa denna specifika väg.
När ska du använda Absolut XPath?
Absolut XPath ger en mycket ”specifik” sökväg. Detta gör det lämpligt i situationer där det finns flera element med liknande attribut på en sida. Absolut XPath försäkrar att du riktar in dig på de exakta elementen i dokumentet.
Men det är viktigt att notera att Absolut XPath är känslig för ändringar i HTML-dokumentets struktur. En liten förändring kan göra att din Absolut XPath slutar fungera.
Relativ XPath
Relativ XPath börjar från valfri nod och slutar vid målnoden. Denna sökväg är inte beroende av dokumentstrukturen, vilket gör den att föredra i många situationer. Relativ XPath låter dig hitta element var som helst i dokumentet. Ett Relativ XPath-uttryck inleds med dubbla snedstreck ’//’.
Med hjälp av det tidigare HTML-dokumentet kan vi hitta vår H1 som innehåller texten ”Välkommen till adminvista.com” med följande relativa XPath:
<!DOCTYPE html>
<html>
<head>
<title>adminvista.com</title>
</head>
<body>
<div>
<h1>Välkommen till adminvista.com</h1>
</div>
</body>
</html>
Den relativa XPath-sökvägen för h1 kommer att vara:
//body/div/h1
När ska du använda Relativ XPath?
Relativ XPath bör användas när du behöver en balans mellan flexibilitet och precision. Denna sökväg är mer motståndskraftig mot ändringar i HTML-dokumentet, förutsatt att relationen mellan elementen bibehålls.
Hitta element med XPath i Selenium
Selenium är ett öppen källkod-ramverk som gör det möjligt för användare att automatisera webbläsare. Det har en samling bibliotek och verktyg som hjälper testare att interagera med webbelement på ett automatiskt och systematiskt sätt.
Låt oss säga att vi har ett webbdokument som innehåller en lista med låtar:
<!DOCTYPE html>
<html>
<head>
<title>Låtbibliotek</title>
</head>
<body>
<h1>Låtbibliotek</h1>
<ul class="song-list">
<li class="song" title="Låttitel 1">Låt 1 - Artist 1</li>
<li class="song" title="Låttitel 2">Låt 2 - Artist 2</li>
<li class="song" title="Låttitel 3">Låt 3 - Artist 1</li>
<li class="song" title="Låttitel 4">Låt 4 - Artist 3</li>
</ul>
</body>
</html>
- Rotnoden är .
- Den överordnade noden är .
- En underordnad nod till är
.
- En annan underordnad nod till är
- .
- En underordnad nod till
- är
- .
Vi kan använda olika XPath-sökare i ovanstående HTML-dokument. Till exempel kan vi lokalisera element baserat på ID, namn, klassnamn, innehåller, text, slutar med och börjar med. Selenium kan användas med olika programmeringsspråk, men vi kommer att använda Python i våra exempel.
Hitta efter index
Om vi vill hitta låt nummer 3, kan vi använda den här koden:
third_song = driver.find_element_by_xpath("//li[@class='song'][3]") print("Tredje låten:", third_song.text)Vi har använt Relativ XPath med början från ‘li’-noden. När Selenium hittar den tredje låten i listan, kommer den att skriva ut texten.
Hitta efter attribut
Vi kan använda en XPath som söker efter alla låtar av ”Artist 1” och skriver ut deras titlar. Koden kan se ut så här:
songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artist 1')]") print("Låtar av Artist 1:") for song in songs_by_artist1: print(song.text)Hitta efter text
Denna sökmetod hjälper till att hitta element med specifik text. Vi kan söka efter en låt med texten ”Låt 4” och skriva ut dess text. Vi kan använda den här koden:
song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Låt 4')]") print("Låt med text:", song_with_text.text)XPath Axes
De metoder vi har diskuterat hittills fungerar bra med enklare webbsidor. I vissa situationer kan det hända att de vanliga metoderna som att söka efter text, ID, klassnamn eller namn inte är tillräckliga.
XPath Axes används för dynamiskt innehåll där vanliga metoder inte fungerar. Med XPath Axes hittar du element baserat på deras relation till andra element. Här är några vanliga XPath Axes-metoder:
Förfader
Metoden Ancestor Axis är idealisk för XML-dokument med många inbäddade element. Med den kan du välja alla förfäder-element (som mor- och farföräldrar) till en viss nod, från de närmaste till de längst bort.
Till exempel, om vi har följande kod:
<bookstore> <book> <title>The Great Gatsby</title> <author>F. Scott Fitzgerald</author> <genre>Fiction</genre> </book> <book> <title>The Biggest Dilemma</title> <author>George Orwell</author> <genre>Dystopian</genre> </book> </bookstore>För att välja alla förfäder till elementet ”titel” i boken ”The Biggest Dilemma”, kan vi använda Ancestor Axis-metoden:
//title[text() = 'The Biggest Dilemma']/ancestor::*
Följande
Metoden Following Axis lokaliserar alla noder efter den aktuella nodens sluttagg. Metoden tar inte hänsyn till målnodens hierarki eller placering. Till exempel kan du, om du har ett XML-dokument eller en webbsida med flera sektioner, identifiera ett element som visas efter en viss sektion utan att behöva navigera i hela trädstrukturen.
Förälder
Metoden Parent Axis i XPath väljer föräldern till den aktuella noden. Du kan använda följande sökväg för att hitta den överordnade noden:
//tag[@attribut="värde"]/parent::taggnamn
Detta tillvägagångssätt är användbart när de underordnade elementen i den aktuella noden har unika attribut som du enkelt kan hitta och du vill verifiera den överordnade noden.
Barn
Child Axis-metoden i XPath väljer alla barn till den aktuella noden. Det är fortfarande en av de mest använda XPath-metoderna eftersom den hjälper till att välja barnnoder till ett specifikt element.
Tänk dig följande kod:
<section id='text'> <p>Paragraf ett</p> <p>Paragraf två</p> <p>Paragraf tre</p> <p>Paragraf fyra</p> </section>Vi kan lokalisera alla ‘p’-element i koden med hjälp av den här axeln:
//section[@id='text']/child::p
Vanliga frågor
Varför använda XPath istället för CSS-selektorer?
CSS-selektorer kan bara hitta element baserat på ID, taggnamn och klass. Med XPath kan du hitta element baserat på deras position, textinnehåll och andra attribut i HTML-strukturen. Du kan även spara XPath-uttryck i variabler och återanvända dem.
Vilka språk stöder XPath i Selenium?
XPath kan användas med alla språk som stöder Selenium. Du kan skriva skript i JavaScript, Java, Python, Ruby, C# och PHP.
Vilka är alternativen till XPath?
Du kan använda CSS-selektorer, bildigenkänning eller Seleniums inbyggda lokaliseringsverktyg som alternativ till XPath. CSS-selektorer är vanligast och låter dig hitta element baserat på deras taggnamn, ID eller klass. Bildigenkänning används för att hitta element baserat på bilder, och Seleniums inbyggda lokaliseringsverktyg är utformade för att vara användarvänliga.
Slutsats
Du har nu lärt dig vad XPath är i Selenium, skillnaden mellan absolut och relativ XPath och hur man hittar element med olika XPath-metoder. Vilken sökmetod du väljer beror på innehållets natur och dina specifika mål.
Om du vill lyckas på din nästa intervju, kolla in vår artikel om intervjufrågor om Selenium.