Lokátory v Selenium

Co jsou Lokátory?

Lokátor je příkaz, který říká Selenium IDE, které prvky GUI (řekněme Text Box, Tlačítka, Kontrola Boxes atd.) jeho potřeby provozovat. Identifikace správných prvků GUI je předpokladem pro vytvoření automatizačního skriptu. Přesná identifikace prvků GUI je však obtížnější, než se zdá. Někdy se stane, že budete pracovat s nesprávnými prvky GUI nebo vůbec! Proto, Selenium poskytuje řadu lokátorů pro přesné umístění prvku GUI

Existují příkazy, které nepotřebují lokátor (např. příkaz „open“). Většina z nich však potřebuje lokátory prvků Selenium webový ovladač.

Výběr lokátoru závisí do značné míry na vaší testované aplikaci. V tomto tutoriálu budeme přepínat mezi Facebookem, novými tours.demoaut na základě lokátorů, které tyto aplikace podporují. Stejně tak ve vašem Testování projektu, vyberete kterýkoli z výše uvedených lokátorů prvků Selenium webdriver, na základě vaší aplikační podpory.

Lokalizace podle ID

Toto je nejběžnější způsob umístění prvků, protože ID mají být pro každý prvek jedinečná.

Target Formát: id=id prvku

V tomto příkladu použijeme Facebook jako naši testovací aplikaci, protože Mercury Prohlídky nepoužívají atributy ID.

Krok 1) Od doby, kdy byl vytvořen tento tutoriál, Facebook změnil svůj design přihlašovací stránky. Použijte tuto ukázkovou stránku https://demo.guru99.com/test/facebook.html pro testování. Prohlédněte si textové pole „E-mail nebo telefon“ pomocí Firebugu a poznamenejte si jeho ID. V tomto případě je ID „e-mail“.

Krok 2) zahájit Selenium IDE a do pole zadejte „id=email“. Target krabice. Klikněte na tlačítko Najít a všimněte si, že textové pole „E-mail nebo telefon“ se zvýrazní žlutě a ohraničí zeleně, což znamená, Selenium IDE dokázalo správně najít tento prvek.

Lokalizace podle jména

Lokalizace prvků podle názvu je velmi podobná lokalizaci podle ID, kromě toho, že používáme "jméno =" místo toho předpona.

Target Formát: jméno=název prvku

V následující ukázce nyní použijeme Mercury Prohlídky, protože všechny významné prvky mají jména.

Krok 1) přejděte na https://demo.guru99.com/test/newtours/ a pomocí Firebugu zkontrolujte textové pole „Uživatelské jméno“. Všimněte si jeho atributu názvu.

Zde vidíme, že název prvku je „userName“.

Krok 2) In Selenium IDE, do pole zadejte „name=userName“. Target a klikněte na tlačítko Najít. Selenium IDE by mělo být schopno najít textové pole Uživatelské jméno jeho zvýrazněním.

Jak najít prvek podle názvu pomocí filtrů

Filtry lze použít, když má více prvků stejný název. Filtry jsou další atributy používané k rozlišení prvků se stejným názvem.

Target Formát: název=název_filtru_prvku=hodnota_filtru

Podívejme se na příklad –

Krok 1) Přihlaste se Mercury Prohlídky.

Přihlaste se Mercury Prohlídky pomocí „tutoriálu“ jako uživatelského jména a hesla. Mělo by vás to přesměrovat na stránku Flight Finder zobrazenou níže.

Krok 2) Při použití firebugu použijte atributy VALUE.

Pomocí Firebugu si všimněte, že přepínače Round Trip a One Way mají stejný název „tripType“. Mají však různé atributy VALUE, takže každý z nich můžeme použít jako náš filtr.

Krok 3) Klikněte na první řádek.

• Nejprve se dostaneme k přepínači One Way. Klepněte na první řádek v Editoru.
• V poli Příkaz z Selenium IDE, zadejte příkaz „click“.
• v Target zadejte „name=tripType value=oneway“. Část „hodnota=jednosměrná“ je naším filtrem.

Krok 4) Klepněte na tlačítko Najít.

Všimněte si to Selenium IDE je schopno zvýraznit přepínač One Way zelenou barvou – což znamená, že jsme schopni úspěšně přistupovat k prvku pomocí jeho atributu VALUE.

Krok 5) Vyberte přepínač Jednosměrná.

Stisknutím klávesy „X“ na klávesnici provedete tento příkaz kliknutí. Všimněte si, že byl vybrán přepínač Jednosměrná.

Úplně totéž můžete udělat s přepínačem Zpáteční cesta, tentokrát s použitím „name=tripType value=roundtrip“ jako svého cíle.

Lokalizace podle textu odkazu

Tento typ lokátoru CSS v Selenium platí pouze pro texty hypertextových odkazů. K odkazu přistupujeme tak, že před náš cíl dáme „link=“ a poté následuje text hypertextového odkazu.

Target Formát: odkaz=text_odkazu

V tomto příkladu přistoupíme k odkazu „REGISTROVAT“, který najdete na Mercury Domovská stránka prohlídek.

Krok 1)

• Nejprve se ujistěte, že jste odhlášeni z Mercury Prohlídky.
• Přejít Mercury Domovská stránka prohlídek.

Krok 2)

• Pomocí Firebugu zkontrolujte odkaz „REGISTROVAT“. Text odkazu se nachází mezi značkami a .
• V tomto případě je text našeho odkazu „REGISTROVAT“. Zkopírujte text odkazu.

Krok 3) Zkopírujte text odkazu ve Firebugu a vložte jej Selenium IDE Target krabice. Před ním uveďte „link=“.

Krok 4) Klikněte na tlačítko Najít a všimněte si toho Selenium IDE dokázalo správně zvýraznit odkaz REGISTROVAT.

Krok 5) Pro další ověření zadejte „clickAndWait“ do pole Příkaz a spusťte jej. Selenium IDE by mělo být schopno kliknout na odkaz REGISTROVAT úspěšně a přesměrovat vás na registrační stránku zobrazenou níže.

Lokalizace podle DOM (model objektu dokumentu)

Jedno Model objektu dokumentu (DOM), zjednodušeně řečeno, je způsob, jakým jsou prvky HTML strukturovány. Selenium IDE je schopno používat DOM při přístupu k prvkům stránky. Pokud použijeme tuto metodu, naše Target pole bude vždy začínat „dom=dokument…“; předpona „dom=“ je však normálně odstraněna, protože Selenium IDE je schopno automaticky interpretovat cokoli, co začíná klíčovým slovem „document“, jako cestu v rámci DOM in Selenium tak jako tak.

Existují čtyři základní způsoby, jak najít prvek prostřednictvím DOM Selenium:

• getElementById
• getElementsByName
• dom:name (platí pouze pro prvky v pojmenovaném formuláři)
• dom:index

Lokalizace podle DOM – getElementById

Zaměřme se na první metodu – pomocí metody getElementById DOM in Selenium. Syntaxe by byla:

Syntax

document.getElementById("id of the element")

• id prvku = toto je hodnota atributu ID prvku, ke kterému se má přistupovat. Tato hodnota by měla být vždy uzavřena v závorkách („“).

Krok 1) Použijte tuto ukázkovou stránku https://demo.guru99.com/test/facebook.html Přejděte na něj a pomocí Firebugu zkontrolujte zaškrtávací políčko „Ponechat mě přihlášeného“. Poznamenejte si jeho ID.

Vidíme, že ID, které bychom měli použít, je „persist_box“.

Krok 2) Otevřená Selenium IDE a v Target zadejte „document.getElementById(“persist_box“)“ a klikněte na Najít. Selenium IDE by mělo být schopno najít zaškrtávací políčko „Ponechat mě přihlášeného“. I když nemůže zvýraznit vnitřek zaškrtávacího políčka, Selenium IDE může stále obklopovat prvek jasně zeleným okrajem, jak je znázorněno níže.

Lokalizace podle DOM – getElementsByName

Metoda getElementById může přistupovat pouze k jednomu prvku současně, a to k prvku s ID, které jste zadali. Metoda getElementsByName je jiná. Shromažďuje pole prvků, které mají název, který jste zadali. K jednotlivým prvkům přistupujete pomocí indexu, který začíná na 0.

	getElementById Získá pro vás pouze jeden prvek. Tento prvek nese ID, které jste zadali v závorkách getElementById().
	getElementsByName Získá kolekci prvků, jejichž názvy jsou všechny stejné. Každý prvek je indexován číslem začínajícím od 0 stejně jako pole Určete, ke kterému prvku chcete přistupovat, uvedením jeho indexového čísla do hranatých závorek v syntaxi getElementsByName níže.

Syntax

document.getElementsByName(“name“)[index]

• name = jméno prvku, jak je definováno jeho atributem 'name'
• index = celé číslo, které označuje, který prvek v poli getElementsByName bude použit.

Krok 1) přejděte na Mercury Domovská stránka prohlídek a přihlášení pomocí „návodu“ jako uživatelského jména a hesla. Firefox byste měli přejít na obrazovku Flight Finder.

Krok 2) Pomocí Firebugu zkontrolujte tři přepínače ve spodní části stránky (přepínače ekonomické třídy, obchodní třídy a první třídy). Všimněte si, že všechny mají stejný název, který je „servClass“.

Krok 3) Nejprve přejděte k přepínači „Ekonomická třída“. Ze všech těchto tří přepínačů je tento prvek na prvním místě, takže má index 0. In Selenium IDE zadejte „document.getElementsByName(“servClass“)[0]“ a klikněte na tlačítko Najít. Selenium IDE by mělo být schopno správně identifikovat přepínač ekonomické třídy.

Krok 4) Změňte číslo indexu na 1 tak, aby vaše Target se nyní změní na document.getElementsByName(“servClass”)[1]. Klepněte na tlačítko Najít a Selenium IDE by mělo být schopno zvýraznit přepínač „Business class“, jak je znázorněno níže.

Lokalizace podle DOM – dom:name

Jak již bylo zmíněno dříve, tato metoda se použije pouze v případě, že prvek, ke kterému přistupujete, je obsažen v pojmenovaném formuláři.

Syntax

document.forms[“name of the form“].elements[“name of the element“]

• název formuláře = hodnota atributu name tagu formuláře, který obsahuje prvek, ke kterému chcete získat přístup
• jméno prvku = hodnota atributu name prvku, ke kterému chcete přistupovat

Krok 1) přejděte na Mercury Domovská stránka prohlídek https://demo.guru99.com/test/newtours/ a pomocí Firebugu zkontrolujte textové pole Uživatelské jméno. Všimněte si, že je obsažena ve formě s názvem „domov“.

Krok 2) In Selenium IDE, zadejte „document.forms[“home“].elements[“userName“]“ a klikněte na tlačítko Najít. Selenium IDE musí mít možnost úspěšně přistupovat k prvku.

Lokalizace podle DOM – dom:index

Tato metoda platí, i když prvek není v pojmenovaném formuláři, protože používá index formuláře, nikoli jeho název.

Syntax

document.forms[index of the form].elements[index of the element]

• index formuláře = indexové číslo (začínající 0) formuláře vzhledem k celé stránce
• index prvku = indexové číslo (začínající 0) prvku vzhledem k celému formuláři, který jej obsahuje

Vstoupíme do textového pole „Telefon“. Mercury Stránka registrace zájezdů. Formulář na této stránce nemá atribut name a ID, takže to bude dobrý příklad.

Krok 1) přejděte na Mercury Stránka Registrace prohlídek a prohlédněte si textové pole Telefon. Všimněte si, že formulář, který jej obsahuje, nemá žádné atributy ID a názvu.

Krok 2) Do pole zadejte „document.forms[0].elements[3]“. Selenium IDE Target a klikněte na tlačítko Najít. Selenium IDE by mělo mít správný přístup k textovému poli Telefon.

Krok 3) Případně můžete místo indexu použít název prvku a získat stejný výsledek. Do pole zadejte „document.forms[0].elements[“phone“]“. Selenium IDE Target krabice. Textové pole Telefon by mělo být stále zvýrazněno.

Lokalizace pomocí XPath

XPath je jazyk používaný při hledání uzlů XML (Extensible Markup Language). Vzhledem k tomu, že HTML lze považovat za implementaci XML, můžeme také použít XPath při hledání prvků HTML.

• Výhoda: Může přistupovat téměř ke každému prvku, dokonce i k prvkům bez atributů class, name nebo id.
• Nevýhoda: Je to nejsložitější metoda identifikace prvků kvůli příliš mnoha různým pravidlům a úvahám.

Naštěstí Firebug umí automaticky vygenerovat XPath Selenium lokátory. V následujícím příkladu přistoupíme k obrazu, ke kterému nelze přistupovat pomocí metod, o kterých jsme hovořili dříve.

Krok 1) přejděte na Mercury Prohlédněte si domovskou stránku a pomocí Firebugu zkontrolujte oranžový obdélník napravo od žlutého pole „Odkazy“. Viz obrázek níže.

Krok 2) Klikněte pravým tlačítkem na HTML kód prvku a vyberte možnost „Kopírovat XPath“.

Krok 3) In Selenium IDE, do pole zadejte jedno lomítko „/“. Target pak vložte cestu XPath, kterou jsme zkopírovali v předchozím kroku. Záznam ve vašem Target pole by nyní mělo začínat dvěma lomítky „//“.

Krok 4) Klepněte na tlačítko Najít. Selenium IDE by mělo být schopné zvýraznit oranžové pole, jak je znázorněno níže.