how locate elements chrome
Det här är handledning nr 7 i vår Selenium Online Training Series. Om du vill kontrollera alla Selen-självstudier i denna serie, vänligen kontrollera denna sida .
I föregående handledning försökte vi belysa olika typer av lokaliserare i Selen och deras lokaliseringsmekanismer för att bygga testskript. Självstudien var primär består av en kort introduktion av olika lokaliseringstyper som ID, klasser, Xpaths, länktexter , CSS-väljare etc. och deras identifiering.
Fortsätt med vår nästa handledning, skulle vi ta tillfället i akt att presentera dig med en förlängning av lokaliseringsstrategier. Således, i nästa handledning, vi skulle studera mekanismen för att lokalisera webbelement i Google Chrome och Internet Explorer.
Eftersom vi alla är väl medvetna om att det finns en snabb tillväxt i internetanvändarbasen, så bygger intressenter och programmerare webbapplikationer som sannolikt kommer att fungera på de flesta webbläsare.
Tänk dig alltså en situation där din webbapplikation inte stöder Firefox men fungerar bra för Chrome och Internet Explorer.
Hur ska du nu automatisera en sådan applikation med Selen? Eller för att vara specifik hur ska du hitta webbelement i Chrome och Internet Explorer. Således ligger svaret framåt i denna handledning.
java mot c ++
Vad du kommer att lära dig:
Hitta webbelement i Google Chrome
Låt oss börja med att förstå lokaliseringsstrategierna i Google Chrome.
Precis som Firebug i Firefox har Google Chrome sitt eget utvecklarverktyg som kan användas för att identifiera och lokalisera webbelement på webbsidan. Till skillnad från Firebug är en användare inte skyldig att ladda ner eller installera något separat plugin. utvecklarverktyget levereras enkelt med Google Chrome.
Följ stegen nedan för att hitta webbelement med hjälp av Chrome: s utvecklarverktyg:
Steg 1: Det primära steget är att starta utvecklaren av Google Chrome. Tryck på F12 för att starta verktyget. Användaren skulle kunna se något som nedanstående skärm.
Notera att fliken 'Element' är markerad i skärmdumpen ovan. Således är elementfliken den som visar alla HTML-egenskaper som tillhör den aktuella webbsidan. Navigera till fliken 'Element' om den inte öppnas som standard vid start.
Du kan också starta utvecklarverktyget genom att högerklicka var som helst på webbsidan och genom att välja 'Inspektera element' som är mycket likt det för firebugs inspektion.
Steg 2: Nästa steg är att hitta önskat objekt på webbsidan. Ett sätt att göra detsamma är att högerklicka på önskat webbelement och inspektera. HTML-egenskapen som tillhör det webbelementet skulle markeras i utvecklarverktyget. Ett annat sätt är att sväva genom HTML-egenskaperna och det matchande webbelementet skulle markeras. Således kan användaren på detta sätt lokalisera id, klass, länkar etc.
Skapa en Xpath i Developer Tool
Vi har redan diskuterat Xpaths i den senaste handledningen. Vi diskuterade också dess skapande strategi. Här baserar vi vår diskussion för att kontrollera giltigheten för den skapade XPath i Chrome-utvecklarverktyget.
Steg 1: Öppna konsolfliken för att skapa XPath i utvecklarverktyget.
Steg 2: Skriv in den skapade Xpath och bifoga den i $ x (“// input (@ id =’ Email ’)”)
Steg 3: Tryck på Enter-tangenten för att se alla matchande HTML-element med angiven Xpath. I vårt fall finns det bara ett matchande HTML-element. Håll muspekaren över det HTML-elementet och motsvarande webbelement markeras på webbsidan.
På detta sätt kan alla Xpaths skapas och kontrolleras för deras giltighet inom konsolen.
Information relaterad till CSS som motsvarar webbelementet finns i Chromes utvecklarverktyg. Se skärmdumpen nedan:
Hitta webbelement i Internet Explorer
Som Google Chrome, Internet Explorer har också sitt eget utvecklarverktyg som kan användas för att identifiera webbelement baserat på deras egenskaper på webbsidan. Användaren behöver inte ladda ner eller installera något separat plugin, utvecklarverktyget levereras enkelt med Internet Explorer.
Följ stegen nedan för att hitta webbelement med hjälp av IE Developer Tool:
Steg 1: Det primära steget är att starta verktyget IE Developer. Tryck på F12 för att starta verktyget. Användaren skulle kunna se något som nedanstående skärm.
Notera att fliken “HTML” är markerad i ovanstående skärmdump. HTML-fliken är alltså den som visar alla HTML-egenskaper som tillhör den aktuella webbsidan. Expandera HTML-fliken för att visa egenskaperna för alla webbelement som tillhör den aktuella webbsidan.
Steg 2: Nästa steg är att hitta önskat objekt på webbsidan. Ett sätt till detta är att välja HTML-element och det matchande webbelementet kommer att markeras. På så sätt kan användaren hitta id, klass, länkar etc. Kolla in nedanstående skärmdump där e-posttextrutan skulle markeras så snart vi väljer motsvarande HTML-egenskap.
Ett annat sätt att hitta webbelementet är att klicka på 'Sök' -knappen i toppmenyn och genom att klicka på önskat webbelement på webbsidan. Som ett resultat skulle motsvarande HTML-egenskaper markeras.
Genom att använda utvecklarverktyget kan en användare hitta id, klasser, taggnamn och skapa Xpaths för att hitta webbelement.
I likhet med Chromes utvecklarverktyg har IE-utvecklarverktyget ett separat avsnitt som visar CSS-relaterad information. Kolla in skärmdumpen nedan.
Slutsats
I den här handledningen belyser vi de grundläggande lokaliseringsstrategierna med hjälp av utvecklarens verktyg för Google Chrome och Internet Explorer.
Nästa handledning # 8 : Fortsätt med vår nästa handledning, vi skulle glädja oss att presentera dig för ett mer avancerat verktyg som heter WebDriver. WebDriver är ett av de mest övertygande verktygen för automatiseringstestning. Så vår nästa handledning och framåt skulle vi dirigera och basera våra diskussioner kring WebDriver och alla dess nitty-gritty.
Rekommenderad läsning
- Kontrollera synligheten för webbelement med olika typer av WebDriver-kommandon - Selen Tutorial # 14
- Introduktion till Selen WebDriver - Selen Tutorial # 8
- Hur man använder CSS Selector för att identifiera webbelement för selen-skript - Selen-handledning nr 6
- Effektiv skriptning av selen och felsökning av scenarier - Selen-handledning # 27
- Felsökning av selenskript med loggar (Log4j-handledning) - Selen-handledning # 26
- 30+ bästa selen-självstudier: Lär dig selen med riktiga exempel
- Gurka Selen Tutorial: Gurka Java Selen WebDriver Integration
- Användning av Selen Select Class för hantering av rullgardinselement på en webbsida - Selen Tutorial # 13