Locators in Selenium IDE: CSS Selector - DOM - XPath - ID

Obsah:

Anonim

Co jsou lokátory?

Locator je příkaz, který říká selenovému IDE, na které prvky grafického uživatelského rozhraní (řekněme textové pole, tlačítka, zaškrtávací políčka atd.) Musí pracovat. Identifikace správných prvků grafického uživatelského rozhraní je předpokladem pro vytvoření automatizačního skriptu. Ale přesná identifikace prvků grafického uživatelského rozhraní je obtížnější, než se zdá. Někdy skončíte s nesprávnými prvky GUI nebo s žádnými prvky vůbec! Selen proto poskytuje řadu lokátorů pro přesné vyhledání prvku GUI

Různé typy CSS Locator v Selenium IDE

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

Volba lokátoru do značné míry závisí na vaší testované aplikaci . V tomto tutoriálu budeme přepínat mezi Facebookem, novými prohlídkami. Demoaut na základě lokátorů, které tyto aplikace podporují. Podobně ve svém testovacím projektu vyberete některý z výše uvedených lokátorů prvků ve webovém ovladači Selenium na základě vaší aplikační podpory.

Vyhledání podle ID

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

Cílový formát: id = id prvku

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

Krok 1. Od vytvoření tohoto výukového programu Facebook změnil design své přihlašovací stránky. K testování použijte tuto ukázkovou stránku http://demo.guru99.com/test/facebook.html. Zkontrolujte pomocí aplikace Firebug textové pole „E-mail nebo telefon“ a poznamenejte si jeho ID. V tomto případě je ID „e-mail“.

Krok 2. Spusťte IDE selenu a do pole Cíl zadejte „id = email“. Klikněte na tlačítko Najít a všimněte si, že textové pole „E-mail nebo telefon“ bude zvýrazněno žlutě a ohraničeno zeleně, což znamená, že Selenium IDE dokázalo tento prvek správně najít.

Vyhledání podle jména

Vyhledání prvků podle názvu je velmi podobné vyhledání podle ID, kromě toho, že místo toho použijeme předponu "name =" .

Cílový formát: name = název prvku

V následující ukázce nyní použijeme prohlídky Merkuru, protože všechny významné prvky mají názvy.

Krok 1. Přejděte na stránku http://demo.guru99.com/test/newtours/ a pomocí Firebug zkontrolujte textové pole „Uživatelské jméno“. Poznamenejte si jeho atribut názvu.

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

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

Vyhledání podle názvu pomocí filtrů

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

Cílový formát : name = name_of_the_element filter = value_of_filter

Podívejme se na příklad -

Krok 1 . Přihlaste se na prohlídku Mercury Tours pomocí „tutoriálu“ jako uživatelského jména a hesla. Mělo by vás přejít na níže uvedenou stránku Vyhledávač letů.

Krok 2. Pomocí Firebug 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 můžeme každý z nich použít jako náš filtr.

Krok 3.

  • Nejprve přejdeme k přepínači One Way. Klikněte na první řádek v editoru.
  • Do pole Příkaz selenového IDE zadejte příkaz „kliknout“.
  • Do pole Cíl zadejte „name = tripType value = oneway“. Část „value = oneway“ je náš filtr.

Krok 4 . Klikněte na tlačítko Najít a všimněte si, že Selenium IDE dokáže zvýraznit přepínač One Way zeleně - to znamená, že jsme schopni úspěšně přistupovat k prvku pomocí jeho atributu VALUE.

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

Přesně to samé můžete udělat pomocí přepínače Round Trip, tentokrát s použitím „name = tripType value = roundtrip“ jako cíle.

Vyhledání podle textu odkazu

Tento typ lokátoru CSS v selenu platí pouze pro texty hypertextových odkazů. Odkaz získáme předponou cíle s „link =“ a následovaným textem hypertextového odkazu.

Cílový formát : link = link_text

V tomto příkladu přejdeme na odkaz „REGISTROVAT“ na domovské stránce Mercury Tours.

Krok 1.

  • Nejprve se ujistěte, že jste odhlášeni z Mercury Tours.
  • Přejít na domovskou stránku Mercury Tours.

Krok 2 .

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

Krok 3 . Zkopírujte text odkazu v Firebugu a vložte jej do pole Cíl Selenium IDE. Předponu předponu „link =“.

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

Krok 5. Chcete-li provést další ověření, zadejte do pole Příkaz „clickAndWait“ a proveďte jej. Selenium IDE by mělo být schopné úspěšně kliknout na tento odkaz REGISTROVAT a přesměrovat vás na registrační stránku zobrazenou níže.

Vyhledání pomocí CSS Selector

Selektory CSS v selenu jsou řetězcové vzory používané k identifikaci prvku na základě kombinace značky HTML, id, třídy a atributů. Lokalizace pomocí selektorů CSS v selenu je složitější než předchozí metody, ale je to nejběžnější strategie lokalizace pokročilých uživatelů selenu, protože má přístup i k těm prvkům, které nemají ID ani název.

Selektory CSS v selenu mají mnoho formátů, ale my se zaměříme pouze na ty nejběžnější.

  • Značka a ID
  • Značka a třída
  • Značka a atribut
  • Značka, třída a atribut
  • Vnitřní text

Při použití této strategie vždy předponu Target označíme znakem „css =“, jak bude ukázáno v následujících příkladech.

Vyhledání pomocí nástroje CSS Selector - značka a ID

V tomto příkladu opět použijeme textové pole E-mail Facebooku. Jak si pamatujete, má ID „e-mailu“ a my jsme k němu již přistupovali v části „Vyhledání podle ID“. Tentokrát použijeme Selenium CSS Selector s ID při přístupu ke stejnému prvku.

Syntax

Popis

css = tag # id
  • tag = značka HTML přístupného prvku
  • # = znak hash. To by mělo být vždy k dispozici, když používáte Selenium CSS Selector s ID
  • id = ID prvku, ke kterému se přistupuje

Mějte na paměti, že ID vždy předchází znak hash (#).

Krok 1. Přejděte na www.facebook.com. Pomocí Firebug zkontrolujte textové pole „E-mail nebo telefon“.

V tomto okamžiku vezměte na vědomí, že značka HTML je „vstup“ a její ID je „e-mail“. Naše syntaxe bude tedy „css = input # email“.

Krok 2. Do pole Cíl selenového IDE zadejte „css = input # email“ a klikněte na tlačítko Najít. Selen IDE by měl být schopen tento prvek zvýraznit.

Vyhledání pomocí nástroje CSS Selector - značka a třída

Vyhledání pomocí selektoru CSS v selenu pomocí značky HTML a názvu třídy je podobné použití značky a ID, ale v tomto případě se místo znaku hash použije tečka (.).

Syntax

Popis

css = značka. třída
  • tag = značka HTML přístupného prvku
  • . = tečka. To by mělo být vždy při použití CSS Selector s třídou
  • class = třída prvku, ke kterému se přistupuje

Krok 1. Přejděte na ukázkovou stránku http://demo.guru99.com/test/facebook.html a pomocí Firebug zkontrolujte textové pole „E-mail nebo telefon“. Všimněte si, že jeho značka HTML je „input“ a její třída je „inputtext“.

Krok 2. V Selenium IDE zadejte do pole Cíl „css = input.inputtext“ a klikněte na Najít. Selenium IDE by mělo být schopné rozpoznat textové pole E-mail nebo Telefon.

Vezměte na vědomí, že když více prvků má stejnou značku HTML a název, bude rozpoznán pouze první prvek ve zdrojovém kódu . Pomocí Firebug zkontrolujte textové pole Heslo na Facebooku a všimněte si, že má stejný název jako textové pole E-mail nebo Telefon.

Důvod, proč bylo na předchozím obrázku zvýrazněno pouze textové pole E-mail nebo Telefon, je ten, že ve zdroji stránky Facebook je na prvním místě.

Vyhledání pomocí nástroje CSS Selector - značka a atribut

Tato strategie používá značku HTML a specifický atribut prvku, ke kterému se má přistupovat.

Syntax

Popis

css = značka [atribut = hodnota]
  • tag = značka HTML přístupného prvku
  • [and] = hranaté závorky, do kterých bude umístěn konkrétní atribut a jeho odpovídající hodnota
  • atribut = atribut, který se má použít. Je vhodné použít atribut, který je pro prvek jedinečný, například název nebo ID.
  • value = odpovídající hodnota vybraného atributu.

Krok 1. Přejděte na registrační stránku Mercury Tours (http://demo.guru99.com/test/newtours/register.php) a zkontrolujte textové pole „Příjmení“. Poznamenejte si jeho značku HTML (v tomto případě „vstup“) a její název („příjmení“).

Krok 2. V Selenium IDE zadejte do pole Cíl „css = input [name = lastName]“ a klikněte na Najít. Selen IDE by měl mít přístup k poli příjmení úspěšně.

Pokud má více prvků stejnou značku a atribut HTML, bude rozpoznán pouze první . Toto chování je podobné vyhledání prvků pomocí selektorů CSS se stejnou značkou a třídou.

Vyhledání pomocí CSS Selector - značka, třída a atribut

Syntax Popis
css = tag.class [atribut = hodnota]
  • tag = značka HTML přístupného prvku
  • . = tečka. To by mělo být vždy při použití CSS Selector s třídou
  • class = třída prvku, ke kterému se přistupuje
  • [and] = hranaté závorky, do kterých bude umístěn konkrétní atribut a jeho odpovídající hodnota
  • atribut = atribut, který se má použít. Je vhodné použít atribut, který je pro prvek jedinečný, například název nebo ID.
  • value = odpovídající hodnota vybraného atributu.

Krok 1. Přejděte na ukázkovou stránku http://demo.guru99.com/test/facebook.html a pomocí Firebug zkontrolujte vstupní pole „E-mail nebo telefon“ a „Heslo“. Poznamenejte si jejich značku HTML, třídu a atributy. V tomto příkladu vybereme jejich atributy „tabindex“.

Krok 2. Nejprve vstoupíme do textového pole „E-mail nebo telefon“. Použijeme tedy hodnotu tabindexu 1. Zadejte "css = input.inputtext [tabindex = 1]" do pole Selenium IDE Target a klikněte na Najít. Je třeba zvýraznit vstupní pole „E-mail nebo telefon“.

Krok 3. Chcete-li vstoupit do pole pro zadání hesla, jednoduše nahraďte hodnotu atributu tabindex. Do pole Cíl zadejte „css = input.inputtext [tabindex = 2]“ a klikněte na tlačítko Najít. Selen IDE musí být schopen úspěšně identifikovat textové pole Heslo.

Lokalizace pomocí CSS Selector - vnitřní text

Jak jste si možná všimli, štítky HTML dostávají zřídka atributy id, name nebo class. Jak k nim tedy přistupujeme? Odpověď je prostřednictvím použití jejich vnitřních textů. Vnitřní texty jsou skutečné vzory řetězců, které štítek HTML zobrazuje na stránce.

Syntax

Popis

css = tag: contains ("vnitřní text")
  • tag = značka HTML přístupného prvku
  • vnitřní text = vnitřní text prvku

Krok 1. Přejděte na domovskou stránku Mercury Tours (http://demo.guru99.com/test/newtours/) a pomocí Firebug prozkoumejte štítek „Heslo“. Poznamenejte si jeho značku HTML (což je v tomto případě „font“) a všimněte si, že nemá žádné atributy třídy, id ani názvu.

Krok 2. Do pole Cíl selenium IDE zadejte css = font: contains ("Heslo:") a klikněte na Najít. Selenium IDE by mělo mít přístup k štítku Heslo, jak je znázorněno na obrázku níže.

Krok 3. Tentokrát nahraďte vnitřní text slovem „Boston“, aby se váš cíl nyní stal „css = font: contains („ Boston “)“. Klikněte na Najít. Měli byste si všimnout, že štítek „Boston až San Francisco“ bude zvýrazněn. To vám ukazuje, že selenové IDE má přístup k dlouhému štítku, i když jste právě označili první slovo jeho vnitřního textu.

Vyhledání podle DOM (objektový model dokumentu)

Zjednodušeně řečeno, Object Object Model (DOM) je způsob, jakým jsou strukturovány prvky HTML. Selen IDE je schopen použít DOM při přístupu k prvkům stránky. Použijeme-li tuto metodu, náš rámeček Target bude vždy začínat „dom = document…“; předpona "dom =" je však obvykle odstraněna, protože IDE selenu dokáže automaticky interpretovat vše, co začíná klíčovým slovem "dokument", aby byla cesta v rámci DOM v selenu stejně.

Existují čtyři základní způsoby, jak vyhledat prvek pomocí DOM v selenu:

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

Vyhledání podle DOM - getElementById

Zaměřme se na první metodu - pomocí metody getElementById modelu DOM v selenu. Syntaxe by byla:

Syntax

Popis

document.getElementById ("id prvku")

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 dvojici závorek ("").

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

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

Krok 2. Otevřete IDE selenu a do pole Cíl zadejte „document.getElementById („ persist_box “)“ a klikněte na Najít. Selen IDE by měl být schopen vyhledat zaškrtávací políčko „Ponechat mě přihlášené“. Ačkoli nemůže zvýraznit vnitřek zaškrtávacího políčka, může Selenium IDE stále obklopovat prvek s jasně zeleným okrajem, jak je znázorněno níže.

Hledání podle DOM - getElementsByName

Metoda getElementById má přístup pouze k jednomu prvku najednou, a to je prvek s ID, které jste zadali. Metoda getElementsByName se liší. 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á za 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 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, vložením jeho indexového čísla do hranatých závorek v syntaxi getElementsByName níže.

Syntax

Popis

document.getElementsByName ("name") [index]
  • name = název prvku definovaný jeho atributem 'name'
  • index = celé číslo, které označuje, který prvek v poli getElementsByName bude použit.

Krok 1. Přejděte na domovskou stránku Mercury Tours a přihlaste se pomocí „tutoriálu“ jako uživatelského jména a hesla. Firefox by vás měl přesunout na obrazovku Vyhledávač letů.

Krok 2. Pomocí Firebug zkontrolujte tři přepínače ve spodní části stránky (přepínače Economy Class, Business Class a First Class). Všimněte si, že všichni mají stejný název, který je „servClass“.

Krok 3. Nejprve přejděte do přepínače „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. V Selenium IDE zadejte „document.getElementsByName (" servClass ") [0]" a klikněte na tlačítko Najít. Selen IDE by měl být schopen správně identifikovat přepínač Economy Class.

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

Vyhledání podle DOM - dom: jméno

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

Syntax

Popis

document.forms ["název formuláře"] .elements ["název prvku"]
  • name of the form = hodnota atributu name tagu form, který obsahuje prvek, ke kterému chcete přistupovat
  • name of the element = hodnota atributu name prvku, ke kterému chcete přistupovat

Krok 1. Přejděte na domovskou stránku Mercury Tours (http://demo.guru99.com/test/newtours/) a pomocí Firebug zkontrolujte textové pole Uživatelské jméno. Všimněte si, že je obsažen ve formě s názvem „domov“.

Krok 2. V Selenium IDE zadejte „document.forms [" home "]. Elements [" userName "]" a klikněte na tlačítko Najít. Selen IDE musí mít přístup k prvku úspěšně.

Vyhledání podle DOM - dom: index

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

Syntax

Popis

document.forms [index formuláře] .elements [index prvku]
  • index formuláře = číslo indexu (počínaje 0) formuláře vzhledem k celé stránce
  • index prvku = číslo indexu (počínaje 0) prvku vzhledem k celému formuláři, který jej obsahuje

Dostaneme se do textového pole „Telefon“ na registrační stránce Mercury Tours. Formulář na této stránce nemá žádný název a atribut ID, takže to bude dobrým příkladem.

Krok 1. Přejděte na registrační stránku Mercury Tours a zkontrolujte textové pole Telefon. Všimněte si, že formulář, který jej obsahuje, nemá žádné atributy ID a názvu.

Krok 2. Do pole Target Selenium IDE zadejte „document.forms [0] .elements [3]“ 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. Alternativně můžete použít název prvku namísto jeho indexu a získat stejný výsledek. Do pole Cíl Selenium IDE zadejte „document.forms [0] .elements [„ phone “]“. Textové pole Telefon by mělo být stále zvýrazněno.

Vyhledání 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 XPath použít také k vyhledání prvků HTML.

Výhoda: Může přistupovat k téměř jakémukoli prvku, dokonce i k těm, které nemají atributy třídy, názvu nebo id.

Nevýhoda: Jedná se o nejsložitější metodu identifikace prvků kvůli příliš mnoha různým pravidlům a úvahám.

Naštěstí Firebug může automaticky generovat lokátory XPath Selenium. V následujícím příkladu přistoupíme k obrázku, ke kterému nelze přistupovat prostřednictvím metod, které jsme dříve probrali.

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

Krok 2 . Pravým tlačítkem klikněte na HTML kód prvku a poté vyberte možnost „Kopírovat XPath“.

Krok 3. V selenovém IDE zadejte jedno dopředné lomítko „/“ do pole Cíl a vložte XPath, který jsme zkopírovali v předchozím kroku. Položka v poli Cíl by nyní měla začínat dvěma lomítky „//“.

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

souhrn

Syntaxe pro použití lokátoru

Metoda

Cílová syntaxe

Příklad
Podle ID id = id_of_the_element id = email
Podle jména name = jméno_prvku jméno = uživatelské jméno
Podle názvu pomocí filtrů name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Textem odkazu link = link_text link = REGISTRACE
Značka a ID css = tag # id css = vstup # email
Značka a třída css = značka. třída css = input.inputtext
Značka a atribut css = značka [atribut = hodnota] css = vstup [jméno = příjmení]
Značka, třída a atribut css = značka. třída [atribut = hodnota] css = input.inputtext [tabindex = 1]