Menu

Ako nájsť prvky v prehliadačoch Chrome a IE na vytváranie skriptov selénu - selénový tutoriál # 7

how locate elements chrome

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Toto je tutoriál č. 7 v našej sérii Selenium Online Training Series. Ak chcete skontrolovať všetky tutoriály selénu v tejto sérii, skontrolujte to táto strana .

V predchádzajúcom tutoriáli sme sa pokúsili osvetliť rôzne typy lokátorov v seléne a ich lokalizačné mechanizmy na zostavenie testovacích skriptov. Výukový program bol primárne tvorený krátkym predstavením rôznych typov lokátorov, ako je ID, triedy, Xpaths, texty odkazov , Selektory CSS atď. a ich identifikácia.

V ďalšom výučbe by sme vám ponúkli príležitosť predstaviť vám rozšírenie stratégií lokalizácie. Teda v ďalší návod, preštudovali by sme si mechanizmus lokalizácie webových prvkov v prehliadačoch Google Chrome a Internet Explorer.

Vyhľadajte prvky v prehliadačoch Chrome a IE

Pretože si všetci dobre uvedomujeme skutočnosť, že v užívateľskej databáze internetu rýchlo rastie, zúčastnené strany a programátori tak vytvárajú webové aplikácie, ktoré pravdepodobne fungujú na väčšine prehľadávačov.

Predstavte si teda situáciu, že vaša webová aplikácia nepodporuje prehliadač Firefox, ale funguje dobre pre prehliadače Chrome a Internet Explorer.

Ako teraz budete automatizovať takúto aplikáciu pomocou selénu? Alebo konkrétnejšie, ako budete vyhľadávať webové prvky v prehliadačoch Chrome a Internet Explorer. V tomto návode teda zostáva odpoveď.

aplikácie špehovať na inom telefóne

Čo sa dozviete:

Umiestnenie webových prvkov v prehliadači Google Chrome

Začnime porozumením stratégií lokalizácie v prehliadači Google Chrome.

Rovnako ako Firebug vo Firefoxe, aj Google Chrome má svoje vlastný vývojársky nástroj ktoré možno použiť na identifikáciu a lokalizáciu webových prvkov na webovej stránke. Na rozdiel od firebugu sa od používateľa nevyžaduje, aby si sťahoval alebo inštaloval akýkoľvek samostatný doplnok; vývojársky nástroj je dodávaný s prehliadačom Google Chrome.

Podľa nasledujúcich pokynov vyhľadajte webové prvky pomocou nástroja pre vývojárov v prehliadači Chrome:

Krok 1: Hlavným krokom je spustenie vývojárskeho nástroja prehliadača Google Chrome. Stlačením klávesu F12 spustíte nástroj. Používateľ by bol schopný vidieť niečo ako nasledujúca obrazovka.

Skript selénu 1

Upozorňujeme, že karta „Element“ je zvýraznená na snímke obrazovky vyššie. Karta Element teda zobrazuje všetky vlastnosti HTML patriace k aktuálnej webovej stránke. Prejdite na kartu „Element“, ak nie je pri spustení predvolene otvorená.

Nástroj pre vývojárov môžete tiež spustiť kliknutím pravým tlačidlom myši na ľubovoľné miesto na webovej stránke a výberom možnosti „Skontrolovať prvok“, ktorý je veľmi podobný prvku kontroly nástroja Firebug.

Krok 2: Ďalším krokom je vyhľadanie požadovaného objektu na webovej stránke. Jedným zo spôsobov, ako urobiť to isté, je kliknúť pravým tlačidlom myši na požadovaný webový prvok a skontrolovať. Vlastnosť HTML patriaca k danému webovému prvku by bola v nástroji pre vývojárov zvýraznená. Ďalším spôsobom je prejsť kurzorom cez vlastnosti HTML a zodpovedajúci webový prvok by sa zvýraznil. Takto môže užívateľ nájsť ID, triedu, odkazy atď.

Skript selénu 2

Vytvorenie Xpath v nástroji pre vývojárov

Xpaths sme už diskutovali v minulom tutoriále. Diskutovali sme aj o jej stratégii tvorby. Tu by sme na základe našej diskusie mali skontrolovať platnosť vytvoreného XPath v nástroji pre vývojárov prehliadača Chrome.

Krok 1: Ak chcete vytvoriť XPath v nástroji pre vývojárov, otvorte kartu konzoly.

Krok 2: Zadajte vytvorený Xpath a vložte ho do $ x („// input (@ id =‘ Email ’)“)

Skript selénu 3

Krok č. 3: Stlačením klávesu Enter zobrazíte všetky zodpovedajúce prvky HTML so zadanou Xpath. V našom prípade existuje iba jeden zodpovedajúci prvok HTML. Umiestnenie kurzora myši na tento prvok HTML a zodpovedajúci webový prvok by boli na webovej stránke zvýraznené.

Skript selénu 4

Týmto spôsobom je možné vytvoriť všetky Xpaths a skontrolovať ich platnosť v rámci konzoly.

Informácie týkajúce sa CSS zodpovedajúce webovému prvku nájdete v nástroji Chrome pre vývojárov. Pozri snímku obrazovky nižšie:

Skript selénu 5

Umiestnenie webových prvkov v prehliadači Internet Explorer

Rovnako ako Google Chrome, Internet Explorer má tiež svoj vlastný vývojársky nástroj ktoré možno použiť na identifikáciu webových prvkov na základe ich vlastností na webovej stránke. Od používateľa sa nevyžaduje, aby si sťahoval alebo inštaloval samostatný doplnok, vývojársky nástroj je dodávaný s programom Internet Explorer.

Podľa nasledujúcich krokov vyhľadajte webové prvky pomocou nástroja pre vývojárov IE:

Krok 1: Primárnym krokom je spustenie nástroja IE Developer. Stlačením klávesu F12 spustíte nástroj. Používateľ by bol schopný vidieť niečo ako nasledujúca obrazovka.

Skript selénu 6

Upozorňujeme, že karta „HTML“ je zvýraznená na snímke obrazovky vyššie. Karta HTML teda zobrazuje všetky vlastnosti HTML patriace k aktuálnej webovej stránke. Rozbaľte kartu HTML, aby ste zobrazili vlastnosti všetkých webových prvkov patriacich k aktuálnej webovej stránke.

Krok 2: Ďalším krokom je vyhľadanie požadovaného objektu na webovej stránke. Jedným zo spôsobov, ako to urobiť, je výber prvku HTML a zodpovedajúci webový prvok by sa zvýraznil. Takto môže užívateľ nájsť ID, triedu, odkazy atď. Skontrolujte na nasledujúcom obrázku, kde by sa zvýraznilo e-mailové textové pole, akonáhle vyberieme zodpovedajúcu vlastnosť HTML.

Skript selénu 7

Ďalším spôsobom, ako vyhľadať webový prvok, je kliknúť na tlačidlo „Nájsť“ v hornom menu a kliknutím na požadovaný webový prvok na webovej stránke. Vo výsledku by sa zvýraznili príslušné vlastnosti HTML.

8. selénové písmo

Pomocou nástroja pre vývojárov teda môže užívateľ nájsť ID, triedy, názvy značiek a môže vytvoriť Xpath na vyhľadanie webových prvkov.

Rovnako ako vývojový nástroj prehliadača Chrome má aj vývojársky nástroj IE samostatnú sekciu, ktorá zobrazuje informácie týkajúce sa CSS. Skontrolujte nasledujúcu snímku obrazovky.

Selénové písmo 9

Záver

V tomto tutoriáli sme si objasnili základné stratégie lokalizácie prvkov pomocou vývojárskeho nástroja pre Google Chrome a Internet Explorer.

Nasledujúci tutoriál # 8 : V ďalšom výučbe by sme vám radi predstavili pokročilejší nástroj s názvom WebDriver. WebDriver je jedným z najpútavejších nástrojov na testovanie automatizácie. Takže náš ďalší výukový program by sme smerovali a zakladali naše diskusie na WebDriveri a všetkej jeho húževnatosti.

Odporúčané čítanie

^