how locate elements chrome
Dette er tutorial nr. 7 i vores Selenium Online Training Series. Hvis du vil tjekke alle Selen-tutorials i denne serie, skal du kontrollere denne side .
I den foregående vejledning forsøgte vi at kaste lys over forskellige typer lokaliseringer i Selen og deres lokaliseringsmekanismer til at oprette testskripter. Selvstudiet var primært bestående af en kort introduktion af forskellige lokaliseringstyper som f.eks ID, klasser, Xpaths, linktekster , CSS-vælgere osv. og deres identifikation.
Fortsæt med vores næste tutorial, ville vi benytte lejligheden til at introducere dig med en udvidelse af lokaliseringsstrategier. Således i næste tutorial vi ville undersøge mekanismen til at lokalisere webelementer i Google Chrome og Internet Explorer.
Da vi alle er klar over, at der er hurtig vækst i internetbrugerbasen, bygger interessenter og programmører således webapplikationer, som sandsynligvis fungerer på de fleste browsere.
Forestil dig således en situation, hvor din webapplikation ikke understøtter Firefox, men fungerer godt for Chrome og Internet Explorer.
Hvordan skal du nu automatisere en sådan applikation ved hjælp af Selen? Eller for at være specifik, hvordan skal du finde webelementer i Chrome og Internet Explorer. Således ligger svaret foran i denne vejledning.
hvad man skal åbne xml filer med
Hvad du lærer:
Lokalisering af webelementer i Google Chrome
Lad os begynde med at forstå lokaliseringsstrategierne i Google Chrome.
Ligesom Firebug i Firefox har Google Chrome sit eget udviklerværktøj der kan bruges til at identificere og lokalisere webelementer på websiden. I modsætning til firebug er en bruger ikke forpligtet til at downloade eller installere noget separat plugin; udviklerværktøjet leveres let med Google Chrome.
Følg nedenstående trin for at finde webelementer ved hjælp af Chromes udviklerværktøj:
Trin 1: Det primære trin er at starte Google Chromes udviklerværktøj. Tryk på F12 for at starte værktøjet. Brugeren kunne se noget som nedenstående skærmbillede.
Noter, at fanen 'Element' er fremhævet i ovenstående skærmbillede. Elementfanen er således den, der viser alle de HTML-egenskaber, der hører til den aktuelle webside. Naviger til fanen 'Element', hvis den ikke åbnes som standard ved lanceringen.
Du kan også starte udviklerværktøjet ved at højreklikke et vilkårligt sted på websiden og ved at vælge 'Undersøg element', der minder meget om firebugs inspektion.
Trin # 2: Det næste trin er at finde det ønskede objekt på websiden. En måde at gøre det samme på er at højreklikke på det ønskede webelement og inspicere. HTML-egenskaben, der hører til dette webelement, vil blive fremhævet i udviklerværktøjet. En anden måde er at svæve gennem HTML-egenskaberne, og det matchende webelement vil blive fremhævet. På denne måde kan brugeren således lokalisere id'er, klasse, links osv.
Oprettelse af en Xpath i Developer Tool
Vi har allerede diskuteret Xpaths i den sidste tutorial. Vi diskuterede også dets oprettelsesstrategi. Her baserer vi vores diskussion for at kontrollere gyldigheden af den oprettede XPath i Chrome's Developer-værktøj.
Trin 1: Åbn konsolfanen for at oprette XPath i Developer-værktøjet.
Trin # 2: Indtast den oprettede Xpath, og omslut den i $ x (“// input (@ id =’ Email ’)”)
Trin # 3: Tryk på enter-tasten for at se alle de matchende HTML-elementer med den angivne Xpath. I vores tilfælde er der kun et matchende HTML-element. Hold markøren over dette HTML-element og det tilsvarende webelement fremhævet på websiden.
På denne måde kan alle Xpaths oprettes og kontrolleres for deres gyldighed i konsollen.
Oplysninger relateret til CSS svarende til webelementet kan findes i Chromes udviklerværktøj. Se skærmbilledet nedenfor:
Find webelementer i Internet Explorer
Ligesom Google Chrome, Internet Explorer har også sit eget udviklerværktøj der kan bruges til at identificere webelementer baseret på deres egenskaber på websiden. Brugeren er ikke forpligtet til at downloade eller installere et separat plugin, udviklerværktøjet leveres let med Internet Explorer.
Følg nedenstående trin for at finde webelementer ved hjælp af IE Developer-værktøjet:
Trin 1: Det primære trin er at starte IE Developer-værktøjet. Tryk på F12 for at starte værktøjet. Brugeren kunne se noget som nedenstående skærmbillede.
Vær opmærksom på, at fanen 'HTML' er fremhævet i ovenstående skærmbillede. HTML-fanen er således den, der viser alle de HTML-egenskaber, der hører til den aktuelle webside. Udvid HTML-fanen for at se egenskaberne for alle de webelementer, der hører til den aktuelle webside.
Trin # 2: Det næste trin er at finde det ønskede objekt på websiden. En måde at dette er på er at vælge HTML-elementet, og det matchende webelement vil blive fremhævet. På denne måde kan brugeren således lokalisere id'er, klasse, links osv. Tjek i nedenstående skærmbillede, hvor e-mail-tekstfelt vil blive fremhævet, så snart vi vælger den tilsvarende HTML-egenskab.
En anden måde at finde webelementet på er at klikke på knappen 'Find' i topmenuen og ved at klikke på det ønskede webelement på websiden. Som et resultat blev de tilsvarende HTML-egenskaber fremhævet.
Ved at bruge udviklerværktøjet kan en bruger således finde id'er, klasser, tagnavne og oprette Xpaths for at finde webelementer.
Ligesom Chromes udviklerværktøj har IE-udviklerværktøjet et separat afsnit, der viser CSS-relateret information. Tjek nedenstående skærmbillede.
Konklusion
I denne vejledning belyser vi de grundlæggende lokaliseringsstrategier ved hjælp af udviklerens værktøj til Google Chrome og Internet Explorer.
Næste tutorial # 8 : Fortsæt med vores næste vejledning, ville vi være glade for at introducere dig til et mere avanceret værktøj navngivet som WebDriver. WebDriver er et af de mest overbevisende værktøjer til automatiseringstest. Så vores næste tutorial videre, ville vi rute og basere vores diskussioner omkring WebDriver og alle dens nitty-gritty.
Anbefalet læsning
- Kontroller synligheden af webelementer ved hjælp af forskellige typer WebDriver-kommandoer - Selen-vejledning nr. 14
- Introduktion til Selen WebDriver - Selen Tutorial # 8
- Sådan bruges CSS Selector til identifikation af webelementer til selen-scripts - Selen Tutorial # 6
- Effektiv Selen Scripting og fejlfinding af scenarier - Selen Tutorial # 27
- Fejlfinding af selen-scripts med logfiler (Log4j-vejledning) - Selen-tutorial # 26
- 30+ bedste selen-tutorials: Lær selen med rigtige eksempler
- Agurk Selen Tutorial: Agurk Java Selen WebDriver Integration
- Brug af Selen Select Class til håndtering af dropdown-elementer på en webside - Selen Tutorial # 13