how locate elements chrome
Dette er veiledning nr. 7 i vår Selenium Online Training Series. Hvis du vil sjekke alle Selenium-opplæringene i denne serien, kan du sjekke denne siden .
I den forrige opplæringen prøvde vi å belyse ulike typer lokaliseringer i Selen og deres lokaliseringsmekanismer for å bygge testskripter. Opplæringen var primær bestående av en kort introduksjon av forskjellige lokaliseringstyper som ID, klasser, Xpaths, lenke tekster , CSS-velgere etc. og deres identifikasjon.
Fortsett med vår neste opplæring, vil vi benytte anledningen til å introdusere deg med en utvidelse av lokaliseringsstrategier. Dermed i neste opplæring, vi ville studere mekanismen for å finne webelementer i Google Chrome og Internet Explorer.
Siden vi alle er klar over det faktum at det er rask vekst i internettbrukerbasen, bygger interessenter og programmerere derfor webapplikasjoner som sannsynligvis fungerer på de fleste nettlesere.
Tenk deg derfor en situasjon der webapplikasjonen din ikke støtter Firefox, men fungerer bra for Chrome og Internet Explorer.
Nå, hvordan skal du automatisere et slikt program ved hjelp av Selen? Eller for å være spesifikk hvordan skal du finne webelementer i Chrome og Internet Explorer. Dermed ligger svaret foran i denne opplæringen.
loadrunner intervju spørsmål og svar for erfarne
Hva du vil lære:
Finne nettelementer i Google Chrome
La oss begynne med å forstå lokaliseringsstrategiene i Google Chrome.
I likhet med Firebug i Firefox har Google Chrome sitt eget utviklerverktøy som kan brukes til å identifisere og lokalisere webelementer på websiden. I motsetning til firebug, er en bruker ikke pålagt å laste ned eller installere noen separat plugin; utviklerverktøyet leveres lett med Google Chrome.
Følg trinnene nedenfor for å finne webelementer ved hjelp av Chrome-utviklerverktøyet:
Trinn 1: Hovedtrinnet er å starte utvikleren av Google Chrome. Trykk på F12 for å starte verktøyet. Brukeren kunne se noe som skjermbildet nedenfor.
Legg merke til at 'Element' -fanen er uthevet i skjermbildet ovenfor. Dermed er elementfanen den som viser alle HTML-egenskapene som tilhører den gjeldende websiden. Naviger til 'Element' -fanen hvis den ikke åpnes som standard ved lanseringen.
Du kan også starte utviklerverktøyet ved å høyreklikke hvor som helst på websiden og ved å velge 'Inspiser element' som er veldig likt det som Firebug inspiserer.
Steg 2: Neste trinn er å finne ønsket objekt på websiden. En måte å gjøre det samme på er å høyreklikke på ønsket webelement og inspisere. HTML-egenskapen som tilhører det webelementet, vil bli uthevet i utviklerverktøyet. En annen måte er å sveve gjennom HTML-egenskapene, og det matchende webelementet vil bli uthevet. Dermed kan brukeren på denne måten finne ID-er, klasse, lenker osv.
Opprette en Xpath i Developer Tool
Vi har allerede diskutert Xpaths i den siste opplæringen. Vi diskuterte også etableringsstrategien. Her vil vi basere diskusjonen vår for å sjekke gyldigheten til den opprettede XPath i utviklerverktøyet til Chrome.
Trinn 1: For å lage XPath i Developer-verktøyet, åpne konsollfanen.
Steg 2: Skriv inn den opprettede Xpath og legg den i $ x (“// input [@ id =’ Email ’]”)
Trinn 3: Trykk på enter-tasten for å se alle samsvarende HTML-elementer med den angitte Xpath. I vårt tilfelle er det bare ett samsvarende HTML-element. Hold markøren over det HTML-elementet og det tilsvarende webelementet uthevet på websiden.
På denne måten kan alle Xpaths opprettes og kontrolleres for deres gyldighet i konsollen.
Informasjon relatert til CSS som tilsvarer webelementet, finner du i Chrome-utviklerverktøyet. Se skjermbildet nedenfor:
Finne nettelementer i Internet Explorer
Som Google Chrome, Internet Explorer har også sitt eget utviklerverktøy som kan brukes til å identifisere webelementer basert på egenskapene deres på websiden. Brukeren er ikke pålagt å laste ned eller installere noe eget plugin, utviklerverktøyet følger lett med Internet Explorer.
Følg trinnene nedenfor for å finne webelementer ved hjelp av IE Developer-verktøyet:
Trinn 1: Det primære trinnet er å starte IE Developer-verktøyet. Trykk på F12 for å starte verktøyet. Brukeren kunne se noe som skjermbildet nedenfor.
Legg merke til at 'HTML' -fanen er uthevet i skjermbildet ovenfor. Dermed er HTML-fanen den som viser alle HTML-egenskapene som tilhører den nåværende websiden. Utvid HTML-fanen for å vise egenskapene til alle webelementene som tilhører den gjeldende websiden.
Steg 2: Neste trinn er å finne ønsket objekt på websiden. En måte å gjøre dette på er å velge HTML-element, og det samsvarende webelementet vil bli uthevet. Dermed kan brukeren på denne måten finne ID-er, klasse, lenker osv. Sjekk ut i skjermbildet nedenfor der e-posttekstboks vil bli uthevet så snart vi velger den tilsvarende HTML-egenskapen.
En annen måte å finne webelementet på er å klikke på 'Finn' -knappen i toppmenyen og ved å klikke på ønsket webelement på websiden. Som et resultat vil de tilsvarende HTML-egenskapene bli uthevet.
Dermed, ved å bruke utviklerverktøyet, kan en bruker finne ID-er, klasser, tagnavn og kan opprette Xpaths for å finne webelementer.
I likhet med Chrome-utviklerverktøyet har IE-utviklerverktøyet en egen seksjon som viser CSS-relatert informasjon. Sjekk ut skjermbildet nedenfor.
Konklusjon
I denne veiledningen belyser vi de grunnleggende lokaliseringsstrategiene ved hjelp av utviklerens verktøy for Google Chrome og Internet Explorer.
Neste opplæring # 8 : Fortsett med vår neste opplæring, vil vi glede oss over å introdusere deg for et mer avansert verktøy kalt WebDriver. WebDriver er et av de mest overbevisende verktøyene for automatiseringstesting. Så vår neste opplæring videre, ville vi rute og basere diskusjonene våre rundt WebDriver og alt det nitty-gritty.
Anbefalt lesing
- Kontroller synligheten til nettelementer ved hjelp av forskjellige typer WebDriver-kommandoer - Selenium-veiledning nr. 14
- Introduksjon til Selen WebDriver - Selenium Tutorial # 8
- Slik bruker du CSS Selector for å identifisere webelementer for selenskripter - Selenveiledning nr. 6
- Effektiv Selen Scripting og feilsøking av scenarier - Selenium Tutorial # 27
- Feilsøking av selen-skript med logger (Log4j-opplæring) - Selen-opplæring # 26
- 30+ beste selenopplæringsprogrammer: Lær selen med virkelige eksempler
- Agurk Selen Tutorial: Agurk Java Selen WebDriver Integration
- Bruk av selen valgt klasse for håndtering av nedtrekkselementer på en webside - Selenium-veiledning nr. 13