how locate elements chrome
Acesta este tutorialul nr. 7 din seria noastră de instruire online Selenium. Dacă doriți să verificați toate tutorialele Selenium din această serie vă rugăm să verificați această pagină .
În tutorialul anterior, am încercat să facem lumină asupra diferitelor tipuri de localizatori din Selenium și mecanismele lor de localizare pentru a construi scripturi de testare. Tutorialul a fost principalul constând în scurta introducere a diferitelor tipuri de localizatori, cum ar fi ID, clase, Xpaths, texte de legătură , Selectoare CSS etc. și identificarea lor.
Continuând cu următorul nostru tutorial, am profita de ocazie pentru a vă prezenta o extensie a strategiilor de localizare. Astfel, în următorul tutorial, am studia mecanismul de localizare a elementelor web pe Google Chrome și Internet Explorer.
Deoarece suntem cu toții conștienți de faptul că există o creștere rapidă a bazei de utilizatori de internet, astfel părțile interesate și programatorii construiesc aplicații web care ar putea funcționa pe majoritatea browserelor.
Astfel, imaginați-vă o situație în care aplicația dvs. web nu acceptă Firefox, dar funcționează bine pentru Chrome și Internet Explorer.
Acum, cum veți automatiza o astfel de aplicație folosind Selenium? Sau, mai precis, cum veți localiza elemente web în Chrome și Internet Explorer. Astfel, răspunsul se află în acest tutorial.
întrebări și răspunsuri de interviuri cu server SQL pentru 5 ani experimentați
Ce veți învăța:
Localizarea elementelor web în Google Chrome
Să începem cu înțelegerea strategiilor de localizare în Google Chrome.
La fel ca Firebug în Firefox, Google Chrome are propriul său instrument propriu pentru dezvoltatori care poate fi folosit pentru a identifica și localiza elemente web pe pagina web. Spre deosebire de firebug, un utilizator nu este obligat să descarce sau să instaleze niciun plugin separat; instrumentul pentru dezvoltatori este livrat cu Google Chrome.
Urmați pașii de mai jos pentru a localiza elementele web utilizând instrumentul pentru dezvoltatori Chrome:
Pasul 1: Pasul principal este lansarea instrumentului pentru dezvoltatori Google Chrome. Apăsați F12 pentru a lansa instrumentul. Utilizatorul ar putea vedea ceva de genul ecranului de mai jos.
Rețineți că fila „Element” este evidențiată în captura de ecran de mai sus. Astfel, fila element este cea care afișează toate proprietățile HTML aparținând paginii web curente. Navigați la fila „Element” dacă nu este deschisă în mod implicit la lansare.
De asemenea, puteți lansa instrumentul dezvoltator făcând clic dreapta oriunde în pagina web și selectând „Inspectare element”, care este foarte asemănător cu cel al inspecției firebug.
Pasul 2: Următorul pas este de a localiza obiectul dorit în pagina web. O modalitate de a face același lucru este să faceți clic dreapta pe elementul web dorit și să inspectați. Proprietatea HTML aparținând acelui element web ar fi evidențiată în instrumentul pentru dezvoltatori. O altă modalitate este să parcurgeți proprietățile HTML, iar elementul web de potrivire ar fi evidențiat. Astfel, în acest mod utilizatorul poate localiza id-uri, clase, linkuri etc.
Crearea unui Xpath în Instrumentul pentru dezvoltatori
Am discutat deja Xpaths în ultimul tutorial. De asemenea, am discutat despre strategia sa de creare. Aici ne-am baza discuția pentru a verifica validitatea XPath-ului creat în instrumentul pentru dezvoltatori Chrome.
Pasul 1: Pentru a crea XPath în instrumentul pentru dezvoltatori, deschideți fila consolă.
Pasul 2: Tastați Xpath-ul creat și îl includeți în $ x („// input (@ id =’ Email ’)”)
Pasul 3: Apăsați tasta Enter pentru a vedea toate elementele HTML potrivite cu Xpath specificat. În cazul nostru, există un singur element HTML care se potrivește. Plasați cursorul pe acel element HTML și elementul web corespunzător va fi evidențiat pe pagina web.
În acest fel, toate Xpath-urile pot fi create și verificate pentru validitatea lor în consolă.
Informațiile legate de CSS corespunzătoare elementului web pot fi găsite în instrumentul pentru dezvoltatori Chrome. Consultați captura de ecran de mai jos:
Localizarea elementelor web în Internet Explorer
Ca și Google Chrome, Internet Explorer are, de asemenea, propriul instrument pentru dezvoltatori care pot fi utilizate pentru a identifica elemente web pe baza proprietăților lor din pagina web. Utilizatorul nu este obligat să descarce sau să instaleze niciun plugin separat, instrumentul pentru dezvoltatori vine ușor la pachet cu Internet Explorer.
Urmați pașii de mai jos pentru a localiza elementele web utilizând instrumentul IE Developer:
Pasul 1: Pasul principal este lansarea instrumentului IE Developer. Apăsați F12 pentru a lansa instrumentul. Utilizatorul ar putea vedea ceva de genul ecranului de mai jos.
Rețineți că fila „HTML” este evidențiată în captura de ecran de mai sus. Astfel, fila HTML este cea care afișează toate proprietățile HTML aparținând paginii web curente. Extindeți fila HTML pentru a vizualiza proprietățile tuturor elementelor web aparținând paginii web curente.
Pasul 2: Următorul pas este de a localiza obiectul dorit în pagina web. O modalitate în acest sens este de a selecta elementul HTML, iar elementul web care se potrivește va fi evidențiat. Astfel, în acest mod utilizatorul poate localiza id-uri, clase, link-uri etc. Verificați în captura de ecran de mai jos în care Textbox e-mail ar fi evidențiat de îndată ce selectăm proprietatea HTML corespunzătoare.
O altă modalitate de localizare a elementului web este să faceți clic pe butonul „Găsiți” prezent în meniul de sus și făcând clic pe elementul web dorit din pagina web. Ca urmare, proprietățile HTML corespunzătoare ar fi evidențiate.
Astfel, utilizând instrumentul dezvoltator, un utilizator poate găsi id-uri, clase, nume de etichete și poate crea Xpaths pentru a localiza elemente web.
La fel ca instrumentul pentru dezvoltatori Chrome, instrumentul pentru dezvoltatori IE are o secțiune separată care afișează informații legate de CSS. Consultați captura de ecran de mai jos.
Concluzie
În acest tutorial, vom arunca o lumină asupra strategiilor de localizare a elementelor de bază folosind instrumentul dezvoltatorului pentru Google Chrome și Internet Explorer.
Următorul tutorial # 8 : Continuând cu următorul nostru tutorial, ne-ar face plăcere să vă prezentăm un instrument mai avansat numit WebDriver. WebDriver este unul dintre cele mai convingătoare instrumente de testare a automatizării. Deci, următorul nostru tutorial în continuare, ne-am orienta și ne vom baza discuțiile în jurul WebDriver și a întregului său aspect.
Lectură recomandată
- Verificați vizibilitatea elementelor web utilizând diverse tipuri de comenzi WebDriver - Tutorial Selenium # 14
- Introducere în Selenium WebDriver - Tutorial Selenium # 8
- Cum se folosește Selectorul CSS pentru identificarea elementelor web pentru scripturile Selenium - Tutorial Selenium # 6
- Scenarii eficiente cu scripturi și depanare Selenium - Tutorial Selenium # 27
- Depanarea scripturilor Selenium cu jurnale (Tutorial Log4j) - Tutorial Selenium # 26
- 30+ Cele mai bune tutoriale despre seleniu: învățați seleniul cu exemple reale
- Tutorial Castravete Seleniu: Integrare Castravete Java Seleniu WebDriver
- Utilizarea clasei Selenium Select pentru manipularea elementelor derulante pe o pagină web - Tutorial Selenium # 13