how locate elements chrome
Toto je tutoriál č. 7 v naší Selenium Online Training Series. Pokud chcete zkontrolovat všechny výukové programy selenu v této sérii, zkontrolujte prosím tato stránka .
V předchozím kurzu jsme se pokusili osvětlit různé typy lokátorů v selenu a jejich lokalizační mechanismy pro sestavení testovacích skriptů. Výukový program byl primárně tvořen krátkým představením různých typů lokátorů ID, třídy, Xpaths, texty odkazů , Selektory CSS atd. a jejich identifikace.
Pokračujeme v našem dalším výukovém programu a využili bychom příležitosti, abychom vám představili rozšíření strategií lokalizace. Tak, v další tutoriál, studovali bychom mechanismus k vyhledání webových prvků v prohlížečích Google Chrome a Internet Explorer.
Jelikož si všichni dobře uvědomujeme, že dochází k rychlému růstu uživatelské základny internetu, zúčastněné strany a programátoři vytvářejí webové aplikace, které pravděpodobně fungují na většině prohlížečů.
Představte si tedy situaci, kdy vaše webová aplikace nepodporuje Firefox, ale funguje dobře pro Chrome a Internet Explorer.
Jak se chystáte automatizovat takovou aplikaci pomocí selenu? Nebo konkrétně, jak budete vyhledávat webové prvky v Chrome a Internet Exploreru. Odpověď tedy leží v tomto tutoriálu.
nejlepší bezpečný převodník z youtube na mp3
Co se naučíte:
- Umístění webových prvků v prohlížeči Google Chrome
- Umístění webových prvků v aplikaci Internet Explorer
Umístění webových prvků v prohlížeči Google Chrome
Začněme pochopením strategií lokalizace v Google Chrome.
Stejně jako Firebug ve Firefoxu má i Google Chrome své vlastní vývojový nástroj které lze použít k identifikaci a lokalizaci webových prvků na webové stránce. Na rozdíl od firebugu není uživatel povinen stahovat nebo instalovat žádný samostatný plugin; vývojářský nástroj je dodáván s Google Chrome.
Pomocí následujících kroků vyhledejte webové prvky pomocí nástroje pro vývojáře v prohlížeči Chrome:
Krok 1: Primárním krokem je spuštění vývojářského nástroje Google Chrome. Stisknutím klávesy F12 nástroj spustíte. Uživatel by mohl vidět něco jako níže uvedená obrazovka.
Vezměte na vědomí, že na výše uvedeném snímku obrazovky je zvýrazněna karta „Element“. Karta prvek je tedy ta, která zobrazuje všechny vlastnosti HTML patřící k aktuální webové stránce. Pokud při spuštění není ve výchozím nastavení otevřena, přejděte na kartu „Element“.
Nástroj pro vývojáře můžete spustit také tak, že kliknete pravým tlačítkem na libovolné místo na webové stránce a vyberete možnost „Zkontrolovat prvek“, která je velmi podobná prvku kontroly Firebug.
Krok 2: Dalším krokem je vyhledání požadovaného objektu na webové stránce. Jedním ze způsobů, jak udělat totéž, je kliknout pravým tlačítkem na požadovaný webový prvek a zkontrolovat. Vlastnost HTML patřící tomuto webovému prvku by byla v nástroji pro vývojáře zvýrazněna. Dalším způsobem je přejet myší vlastnostmi HTML a odpovídající webový prvek by byl zvýrazněn. Takto může uživatel vyhledávat ID, třídu, odkazy atd.
Vytvoření Xpath v Developer Tool
Xpaths jsme již probrali v posledním kurzu. Diskutovali jsme také o jeho strategii vytváření. Zde bychom na základě naší diskuse ověřili platnost vytvořeného XPath v nástroji pro vývojáře v prohlížeči Chrome.
Krok 1: Chcete-li vytvořit XPath v nástroji pro vývojáře, otevřete kartu konzoly.
Krok 2: Zadejte vytvořený Xpath a uzavřete jej do $ x („// input (@ id =‘ Email ‘)“)
Krok č. 3: Stisknutím klávesy Enter zobrazíte všechny odpovídající prvky HTML se zadanou Xpath. V našem případě existuje pouze jeden odpovídající prvek HTML. Umístěním kurzoru na tento prvek HTML a odpovídajícím webovým prvkem se na webové stránce zvýrazní.
Tímto způsobem lze vytvořit všechny Xpaths a zkontrolovat jejich platnost v konzole.
Informace týkající se CSS odpovídající webovému prvku najdete v nástroji pro vývojáře v prohlížeči Chrome. Viz níže uvedený snímek obrazovky:
Umístění webových prvků v aplikaci Internet Explorer
Stejně jako Google Chrome, Internet Explorer má také svůj vlastní vývojový nástroj které lze použít k identifikaci webových prvků na základě jejich vlastností na webové stránce. Uživatel není povinen stahovat ani instalovat žádný samostatný plugin, vývojářský nástroj je dodáván s aplikací Internet Explorer.
Pomocí následujících kroků vyhledejte webové prvky pomocí nástroje IE Developer:
Krok 1: Primárním krokem je spuštění nástroje IE Developer. Stisknutím klávesy F12 nástroj spustíte. Uživatel by mohl vidět něco jako níže uvedená obrazovka.
Všimněte si, že na výše uvedeném snímku obrazovky je zvýrazněna karta „HTML“. Karta HTML je tedy ta, která zobrazuje všechny vlastnosti HTML patřící k aktuální webové stránce. Rozbalte kartu HTML a zobrazte vlastnosti všech webových prvků patřících k aktuální webové stránce.
Krok 2: Dalším krokem je vyhledání požadovaného objektu na webové stránce. Jedním ze způsobů, jak toho dosáhnout, je vybrat prvek HTML a odpovídající webový prvek by byl zvýrazněn. Tímto způsobem tedy může uživatel najít ID, třídu, odkazy atd. Podívejte se na níže uvedený snímek obrazovky, ve kterém bude zvýrazněno e-mailové textové pole, jakmile vybereme odpovídající vlastnost HTML.
Dalším způsobem, jak vyhledat webový prvek, je kliknout na tlačítko „Najít“ v horním menu a kliknutím na požadovaný webový prvek na webové stránce. Ve výsledku by byly zvýrazněny odpovídající vlastnosti HTML.
Takže pomocí vývojářského nástroje může uživatel najít ID, třídy, názvy značek a může vytvořit Xpath k vyhledání webových prvků.
Stejně jako vývojový nástroj prohlížeče Chrome má i vývojářský nástroj IE samostatnou část, která zobrazuje informace související s CSS. Podívejte se na níže uvedený snímek obrazovky.
Závěr
V tomto tutoriálu osvětlíme základní strategie lokalizace prvků pomocí vývojářského nástroje pro Google Chrome a Internet Explorer.
Další výuka č. 8 : Pokračujeme v dalším výukovém programu a rádi bychom vám představili pokročilejší nástroj s názvem WebDriver. WebDriver je jedním z nejpřesvědčivějších nástrojů pro testování automatizace. Náš další výukový program by dále směřoval a zakládal naše diskuse kolem WebDriveru a všech jeho hloupostí.
Doporučené čtení
- Zkontrolujte viditelnost webových prvků pomocí různých typů Příkazy WebDriver - Selenium Tutorial # 14
- Úvod do Selenium WebDriver - Selenium Tutorial # 8
- Jak používat selektor CSS k identifikaci webových prvků pro skripty selenu - výuka selenu č. 6
- Efektivní scénáře selenu a řešení potíží - Scénář selenu č. 27
- Ladění selenových skriptů pomocí protokolů (výuka Log4j) - výuka selenu č. 26
- 30+ nejlepších návodů na selen: Naučte se selen se skutečnými příklady
- Cucumber Selenium Tutorial: Cucumber Java Selenium WebDriver Integration
- Použití třídy Select Selenium pro zpracování prvků rozevíracího seznamu na webové stránce - Selenium Tutorial # 13