Zvládnutí XPath v Selenium: Jak najít prvky

autor:
Tweet
Share
Share
Pin

Testovací inženýři hrají klíčovou roli v procesu vývoje softwaru, neboť se starají o to, aby vývojový tým dodával aplikace bez chyb a s požadovanou funkcionalitou. Tito odborníci podrobují aplikace sérii testů, než jsou uvolněny pro koncové uživatele.

Testovací specialisté by měli být obratní v orientaci a interakci s webovými prvky. Selenium patří k nejvyužívanějším nástrojům pro automatizaci testování, a je široce využíván moderními vývojovými týmy. Tento nástroj se skládá ze čtyř hlavních komponent: Selenium Grid, Selenium WebDriver, Selenium IDE a Selenium RC.

V tomto článku se blíže podíváme na Selenium WebDriver, který využívá XPath. Cílem tohoto textu je definovat XPath, probrat jeho základní syntaxi a ukázat, jak se XPath používá v prostředí Selenium.

Co je XPath

XPath (XML Path Language) je dotazovací jazyk určený pro selekci a navigaci mezi atributy a elementy v rámci XML dokumentů. Pomocí XPath lze definovat cestu, která umožňuje přesně adresovat jednotlivé části XML dokumentu a získávat z něj požadované informace.

Jeho struktura připomíná adresářovou strukturu souborového systému. Obsahuje rovněž funkce a symboly, které usnadňují výběr prvků na základě jejich charakteristik a hierarchie. XPath lze použít v kombinaci s technologiemi jako XML, HTML a XSLT pro extrakci a manipulaci s daty.

Proč používat XPath?

  • Flexibilita: Na rozdíl od CSS selektorů, které vyhledávají prvky pouze podle názvu tagu, ID nebo třídy, XPath umožňuje hledání prvků podle dalších atributů.
  • Opakovaná použitelnost: XPath výrazy lze uložit do proměnných a znovu použít v kódu.
  • Přesný výběr uzlů: XPath nabízí standardizovaný způsob, jak přesně zacílit na konkrétní prvky v rámci webového dokumentu.

Základní syntaxe XPath

XPath umožňuje lokalizovat jakýkoliv prvek na webové stránce pomocí DOM. Před tím, než se ponoříme do syntaxe, je nezbytné si vyjasnit význam následujících XPath výrazů:

Výraz Popis
nodename/tagname Vybere všechny uzly s názvem ‚nodename’/’tagname‘
/ Vybere z kořenového uzlu
// Vybere uzly v aktuálním dokumentu z aktuálního uzlu, odpovídající výběru, bez ohledu na jejich umístění
@ Vybere atributy
.. Vybere nadřazený uzel aktuálního uzlu
. Vybere aktuální uzel

Základní syntaxe XPath vypadá takto:

XPath=//tagname[@attribute="value"]

Jak je vidět, syntaxe začíná dvojitým lomítkem (//), které označuje počáteční bod v aktuálním uzlu, následovaným názvem tagu/uzlu.

Absolutní XPath vs. Relativní XPath

Při práci s XPath máme k dispozici dvě metody: Absolutní XPath a Relativní XPath.

Absolutní XPath

Absolutní XPath představuje přímou cestu od kořenového uzlu k cílovému prvku. Začíná u kořene dokumentu a postupuje krok za krokem k požadovanému elementu.

Předpokládejme HTML dokument s následujícím obsahem:

<!DOCTYPE html>
<html>
<head>
    <title>etechblog.cz</title>
</head>
<body>
    <div>
        <h1>Vítejte na etechblog.cz</h1>
    </div>
</body>
</html>

Pokud chceme lokalizovat prvek s textem „Vítejte na etechblog.cz“, použijeme následující cestu:

/html/body/div/h1

V uvedeném dokumentu platí:

  • html je kořenový uzel: /html
  • body je nadřazený uzel: /html/body
  • div je potomek uzlu body: /html/body/div
  • h1 je potomek uzlu div: /html/body/div/h1

Pro dosažení nejhlouběji vnořeného prvku je nutné projít celou touto cestou.

Kdy použít Absolutní XPath

Absolutní XPath sleduje „přesnou“ cestu. Je ideální pro situace, kdy na stránce existuje více prvků s podobnými atributy. Zajišťuje tak, že zacílíte na přesný element v dokumentu.

Nicméně, Absolutní XPath je velmi citlivá na změny struktury HTML. Jednoduchá úprava může vaši Absolutní XPath narušit.

Relativní XPath

Relativní XPath začíná u libovolného uzlu a končí u cílového uzlu. Tato cesta není ovlivněna změnami v dokumentu, a proto je většinou preferovaná. S pomocí Relativní XPath lze lokalizovat prvky z libovolné části dokumentu. Relativní XPath výraz začíná dvojitým lomítkem //.

Pokud použijeme stejný HTML dokument, můžeme vyhledat H1 s textem „Vítejte na etechblog.cz“ takto:

<!DOCTYPE html>
<html>
<head>
    <title>etechblog.cz</title>
</head>
<body>
    <div>
        <h1>Vítejte na etechblog.cz</h1>
    </div>
</body>
</html>

Relativní XPath k h1 bude:

//body/div/h1

Kdy použít Relativní XPath

Pro vyvážení flexibility a specifičnosti je vhodné použít Relativní XPath. Tato cesta je odolná vůči změnám ve struktuře HTML, protože vztah mezi prvky zůstává specifikovaný.

Lokalizace prvků pomocí XPath v Selenium

Selenium je open-source framework pro automatizaci webových prohlížečů. Obsahuje knihovny a nástroje, které testerům umožňují systematicky a automatizovaně interagovat s webovými prvky.

Představme si webový dokument obsahující následující seznam skladeb:

<!DOCTYPE html>
<html>
<head>
    <title>Knihovna skladeb</title>
</head>
<body>
    <h1>Knihovna skladeb</h1>
    <ul class="song-list">
        <li class="song" title="Název skladby 1">Skladba 1 - Interpret 1</li>
        <li class="song" title="Název skladby 2">Skladba 2 - Interpret 2</li>
        <li class="song" title="Název skladby 3">Skladba 3 - Interpret 1</li>
        <li class="song" title="Název skladby 4">Skladba 4 - Interpret 3</li>
    </ul>
</body>
</html>
  • Kořenovým uzlem je <html>.
  • Nadřazeným uzlem je <body>.
  • <h1> je potomkem <body>.
  • <ul> je dítě <body>.
  • <li> jsou děti <ul>.

V uvedeném HTML dokumentu lze použít různé XPath lokátory. Můžeme například hledat prvky podle ID, jména, názvu třídy, obsahu, textu, konce a začátku a mnoha dalších kritérií. Selenium je kompatibilní s různými programovacími jazyky. V následujících příkladech použijeme Python.

Vyhledávání podle indexu

Pokud chceme vybrat třetí skladbu, můžeme použít následující kód:

third_song = driver.find_element_by_xpath("//li[@class="song"][3]")
print("Třetí skladba:", third_song.text)

Použili jsme Relativní XPath, začínající u uzlu <li>. Jakmile Selenium najde třetí skladbu v seznamu, vypíše její text.

Vyhledávání podle atributu

Můžeme vytvořit XPath výraz, který vyhledá všechny skladby interpreta „Interpret 1“ a vypíše jejich názvy. Náš kód by mohl vypadat takto:

songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Interpret 1')]")
print("Skladby od Interpreta 1:")
for song in songs_by_artist1:
    print(song.text)

Vyhledávání podle textu

Tento lokátor nám umožní najít prvky s konkrétním textem. Vyhledáme například skladbu s textem „Skladba 4“ a vypíšeme její text. Lokátor můžeme reprezentovat tímto kódem:

song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Skladba 4')]")
print("Skladba s textem:", song_with_text.text)

Osy XPath

Výše uvedené metody fungují dobře s jednoduššími webovými stránkami. Ovšem v některých případech, kdy metody vyhledávání prvků XPath jako podle textu, ID, názvu třídy a názvu selžou, přichází na řadu osy XPath.

Osy XPath se používají pro dynamický obsah, kde běžné lokátory nefungují. Umožňují vyhledávání prvků na základě jejich vztahu k jiným prvkům. Následují příklady nejběžnějších lokátorů XPath Axes:

Předek

Metoda Ancestor Axis je vhodná pro práci s XML dokumenty s hlubokou hierarchií prvků. Umožňuje vybrat všechny předcházející prvky, jako je rodič a prarodič daného uzlu, od nejbližšího k nejvzdálenějšímu.

Můžeme mít tento kód:

<bookstore>
  <book>
    <title>Velký Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fikce</genre>
  </book>
  <book>
    <title>Největší dilema</title>
    <author>George Orwell</author>
    <genre>Dystopický</genre>
  </book>
</bookstore>

Pokud chceme vybrat všechny předky prvku <title> pro knihu „Největší dilema“, můžeme použít metodu Ancestor Axis:

//title[text() = 'Největší dilema']/ancestor::*

Následující

Metoda Following Axis vyhledá všechny uzly, které se nacházejí za uzavírací značkou aktuálního uzlu. Neřeší hierarchii a umístění cílových uzlů. Například pokud máme XML dokument nebo webovou stránku s více sekcemi, můžeme identifikovat element, který se objeví za konkrétní sekcí, aniž bychom museli procházet celou stromovou strukturou.

Rodič

Metoda Parent Axis v XPath vybere rodiče aktuálního uzlu. K vyhledání rodičovského uzlu můžeme použít následující cestu:

//tag[@attribute="value"]/parent::tagName

Tato metoda je užitečná, když mají podřízené prvky v aktuálním uzlu jedinečné atributy, které lze snadno najít, a chceme je ověřit u rodiče.

Dítě

Metoda Child Axis v XPath vybere všechny potomky aktuálního uzlu. Je jednou z nejpoužívanějších metod XPath Axis, protože umožňuje vybrat podřízené uzly konkrétního prvku.

Uvažme tento kód:

<section id='text'>
    <p>Odstavec první</p>
    <p>Odstavec druhý</p>
    <p>Odstavec třetí</p>
    <p>Odstavec čtvrtý</p>
</section>

Pomocí této osy můžeme najít všechny prvky <p> v kódu:

//section[@id='text']/child::p

Nejčastější dotazy

Proč používat XPath místo CSS selektorů?

CSS selektory vyhledávají prvky pouze na základě jejich ID, názvu tagu a třídy. XPath oproti tomu umožňuje vyhledávat prvky na základě jejich umístění, textového obsahu a dalších atributů ve struktuře HTML. XPath výrazy lze navíc uložit do proměnných a opakovaně je používat v aplikaci.

Které jazyky podporují XPath v Selenium?

XPath je kompatibilní s libovolným jazykem, který podporuje Selenium. Skripty lze psát v jazycích JavaScript, Java, Python, Ruby, C# a PHP.

Jaké existují alternativy k XPath?

Alternativou k XPath mohou být CSS selektory, rozpoznávání obrázků nebo vestavěné lokátory Selenium. CSS selektory jsou nejrozšířenější – umožňují vyhledávat prvky podle názvu tagu, ID nebo třídy. Rozpoznávání obrázků umožňuje lokalizovat prvky na základě jejich vizuální podoby. Vestavěné lokátory Selenium jsou navrženy pro snadné použití.

Závěr

Nyní již umíte definovat XPath v Selenium, rozlišovat mezi absolutní a relativní XPath a lokalizovat prvky pomocí různých XPath lokátorů. Výběr lokátoru bude záviset na povaze obsahu a vašich specifických cílech.

Pokud se chcete připravit na pohovor o Selenium, nezapomeňte si prostudovat náš článek s otázkami k pohovorům.