Sökare i Selenium

Vad är Locatorer?

Locator är ett kommando som talar om Selenium IDE vilka GUI-element (säg Text Box, Knappar, Check Boxes etc) dess behov att operera på. Identifiering av korrekta GUI-element är en förutsättning för att skapa ett automatiseringsskript. Men exakt identifiering av GUI-element är svårare än det låter. Ibland slutar du med att du arbetar med felaktiga GUI-element eller inga element alls! Därför, Selenium tillhandahåller ett antal Locatorer för att exakt lokalisera ett GUI-element

Det finns kommandon som inte behöver någon lokalisering (som kommandot "öppna"). De flesta av dem behöver dock elementsökare i Selenium webbdrivrutin.

Valet av lokalisering beror till stor del på din applikation som testas. I den här handledningen kommer vi att växla mellan Facebook, nya tours.demoaut på basis av lokaliseringsverktyg som dessa applikationer stöder. Likaså i din Testning projekt kommer du att välja någon av de ovan listade elementlokalisatorerna i Selenium webdriver, baserat på din applikationssupport.

Lokaliseras med ID

Detta är det vanligaste sättet att lokalisera element eftersom ID:n ska vara unika för varje element.

Target Format: id=id för elementet

För det här exemplet kommer vi att använda Facebook som vår testapp eftersom Mercury Turer använder inte ID-attribut.

Steg 1) Sedan den här handledningen skapades har Facebook ändrat sin inloggningssida design. Använd denna demosida https://demo.guru99.com/test/facebook.html för testning. Inspektera textrutan "E-post eller telefon" med Firebug och notera dess ID. I det här fallet är ID:t "e-post".

Steg 2) Starta Selenium IDE och ange "id=email" i Target låda. Klicka på knappen Sök och lägg märke till att textrutan "E-post eller telefon" blir markerad med gult och kantad med grönt, vilket betyder, Selenium IDE kunde lokalisera det elementet korrekt.

Lokalisera efter namn

Att lokalisera element efter namn är mycket likt att lokalisera efter ID, förutom att vi använder "namn =" prefix istället.

Target Format: namn=namn på elementet

I följande demonstration kommer vi nu att använda Mercury Turer eftersom alla viktiga element har namn.

Steg 1) Navigera till https://demo.guru99.com/test/newtours/ och använd Firebug för att inspektera textrutan "Användarnamn". Notera dess namnattribut.

Här ser vi att elementets namn är "användarnamn".

Steg 2) In Selenium IDE, ange "namn=användarnamn" i Target rutan och klicka på knappen Sök. Selenium IDE bör kunna hitta textrutan Användarnamn genom att markera den.

Hur man lokaliserar element efter namn med hjälp av filter

Filter kan användas när flera element har samma namn. Filter är ytterligare attribut som används för att särskilja element med samma namn.

Target Format: namn=namn_på_elementet filter=värde_på_filtret

Låt oss se ett exempel -

Steg 1) Logga in Mercury Turer.

Logga in Mercury Turer med "tutorial" som användarnamn och lösenord. Den bör ta dig till Flight Finder-sidan som visas nedan.

Steg 2) Använd VALUE attribut när du använder firebug.

Med hjälp av Firebug, lägg märke till att alternativknapparna Round Trip och One Way har samma namn "tripType." Men de har olika VALUE-attribut så vi kan använda var och en av dem som vårt filter.

Steg 3) Klicka på första raden.

• Vi kommer att komma åt One Way-radioknappen först. Klicka på första raden i editorn.
• I kommandorutan för Selenium IDE, ange kommandot "klicka".
• I Target rutan, ange "name=tripType value=oneway". "value=oneway"-delen är vårt filter.

Steg 4) Klicka på knappen Sök.

Lägg märke till att Selenium IDE kan markera One Way-radioknappen med grönt - vilket betyder att vi kan komma åt elementet framgångsrikt med dess VALUE-attribut.

Steg 5) Välj One Way alternativknapp.

Tryck på "X"-tangenten på ditt tangentbord för att utföra detta klickkommando. Lägg märke till att alternativknappen One Way blev vald.

Du kan göra exakt samma sak med alternativknappen Round Trip, den här gången, med "name=tripType value=roundtrip" som ditt mål.

Lokalisera via länktext

Denna typ av CSS-locator i Selenium gäller endast hyperlänktexter. Vi kommer åt länken genom att prefixet vårt mål med "länk=" och sedan följt av hyperlänkstexten.

Target Format: länk=länk_text

I det här exemplet kommer vi åt länken "REGISTRERA" som finns på Mercury Tours hemsida.

Steg 1)

• Se först till att du är utloggad från Mercury Turer.
• Gå till Mercury Tours hemsida.

Steg 2)

• Använd Firebug, kontrollera länken "REGISTRERA". Länktexten finns mellan och taggar.
• I det här fallet är vår länktext "REGISTRERA". Kopiera länktexten.

Steg 3) Kopiera länktexten i Firebug och klistra in den på Selenium Idus Target låda. Prefix det med "länk =".

Steg 4) Klicka på knappen Sök och märk det Selenium IDE kunde markera REGISTER-länken korrekt.

Steg 5) För att verifiera ytterligare, skriv "clickAndWait" i kommandorutan och kör det. Selenium IDE bör kunna klicka på den REGISTER-länken och ta dig till registreringssidan som visas nedan.

Lokalisering efter DOM (Document Object Model)

Din Dokumentobjektmodell (DOM), enkelt uttryckt, är det sätt på vilket HTML-element är strukturerade. Selenium IDE kan använda DOM för att komma åt sidelement. Om vi ​​använder denna metod, vår Target box kommer alltid att börja med "dom=dokument..."; men prefixet "dom=" tas normalt bort eftersom Selenium IDE kan automatiskt tolka allt som börjar med nyckelordet "dokument" för att vara en sökväg inom DOM i Selenium ändå.

Det finns fyra grundläggande sätt att lokalisera ett element genom DOM i Selenium:

• getElementById
• getElementsByName
• dom:namn (gäller endast element i en namngiven form)
• dom:index

Sök efter DOM – getElementById

Låt oss fokusera på den första metoden - att använda getElementById-metoden för DOM in Selenium. Syntaxen skulle vara:

syntax

document.getElementById("id of the element")

• id för elementet = detta är värdet på ID-attributet för elementet som ska nås. Detta värde ska alltid omges av ett par parenteser ("").

Steg 1) Använd denna demosida https://demo.guru99.com/test/facebook.html Navigera till den och använd Firebug för att inspektera kryssrutan "Håll mig inloggad". Notera dess ID.

Vi kan se att ID:t vi ska använda är "persist_box".

Steg 2) Öppet Selenium IDE och i Target rutan, ange "document.getElementById("persist_box")" och klicka på Sök. Selenium IDE bör kunna hitta kryssrutan "Håll mig inloggad". Även om det inte kan markera insidan av kryssrutan, Selenium IDE kan fortfarande omge elementet med en ljusgrön kant som visas nedan.

Sök efter DOM – getElementsByName

Metoden getElementById kan bara komma åt ett element åt gången, och det är elementet med det ID som du angav. Metoden getElementsByName är annorlunda. Den samlar in en rad element som har det namn du angav. Du kommer åt de enskilda elementen med hjälp av ett index som börjar på 0.

	getElementById Det kommer bara att få ett element för dig. Det elementet bär ID:t som du angav inom parentesen för getElementById().
	getElementsByName Det kommer att få en samling element vars namn är desamma. Varje element indexeras med ett tal som börjar från 0 precis som en array Du anger vilket element du vill komma åt genom att sätta dess indexnummer inom hakparenteser i getElementsByNames syntax nedan.

syntax

document.getElementsByName(“name“)[index]

• name = namnet på elementet som definieras av dess 'name'-attribut
• index = ett heltal som indikerar vilket element inom getElementsByNames array som kommer att användas.

Steg 1) Navigera till Mercury Tours hemsida och logga in med "tutorial" som användarnamn och lösenord. Firefox bör ta dig till Flight Finder-skärmen.

Steg 2) Använd Firebug, inspektera de tre alternativknapparna längst ned på sidan (ekonomiklass, Business class och First class radioknappar). Observera att de alla har samma namn som är "servClass".

Steg 3) Låt oss komma åt alternativknappen "Economy class" först. Av alla dessa tre radioknappar kommer detta element först, så det har ett index på 0. In Selenium IDE, skriv "document.getElementsByName("servClass")[0]" och klicka på knappen Sök. Selenium IDE bör kunna identifiera ekonomiklassradioknappen korrekt.

Steg 4) Ändra indexnumret till 1 så att din Target kommer nu att bli document.getElementsByName(“servClass”)[1]. Klicka på knappen Sök och Selenium IDE bör kunna markera alternativknappen "Business class", som visas nedan.

Sök efter DOM – dom:namn

Som nämnts tidigare kommer den här metoden endast att tillämpas om elementet du kommer åt finns i en namngiven form.

syntax

document.forms[“name of the form“].elements[“name of the element“]

• namn på formuläret = värdet på namnattributet för formulärtaggen som innehåller elementet du vill komma åt
• namn på elementet = värdet på namnattributet för elementet du vill komma åt

Steg 1) Navigera till Mercury Tours hemsida https://demo.guru99.com/test/newtours/ och använd Firebug för att inspektera textrutan Användarnamn. Observera att den finns i en form som heter "hem".

Steg 2) In Selenium IDE, skriv “document.forms[“home”].elements[“användarnamn”]” och klicka på knappen Sök. Selenium IDE måste kunna komma åt elementet framgångsrikt.

Sök efter DOM – dom:index

Den här metoden gäller även när elementet inte finns i en namngiven form eftersom det använder formulärets index och inte dess namn.

syntax

document.forms[index of the form].elements[index of the element]

• formulärets index = indexnumret (som börjar på 0) för formuläret med avseende på hela sidan
• elementets index = indexnumret (som börjar på 0) för elementet med avseende på hela formen som innehåller det

Vi kommer åt textrutan "Telefon" inom Mercury Registreringssida för turer. Formuläret på den sidan har inget namn och ID-attribut, så detta är ett bra exempel.

Steg 1) Navigera till Mercury Tours registreringssida och inspektera textrutan Telefon. Observera att formuläret som innehåller det inte har några ID- och namnattribut.

Steg 2) Ange "document.forms[0].elements[3]" i Selenium Idus Target rutan och klicka på knappen Sök. Selenium IDE bör kunna komma åt textrutan Telefon korrekt.

Steg 3) Alternativt kan du använda elementets namn istället för dess index och få samma resultat. Ange "document.forms[0].elements["phone"]" i Selenium Idus Target låda. Textrutan Telefon bör fortfarande vara markerad.

Lokaliseras av XPath

XPath är det språk som används för att lokalisera XML-noder (Extensible Markup Language). Eftersom HTML kan ses som en implementering av XML kan vi också använda XPath att hitta HTML-element.

• Fördel: Den kan komma åt nästan alla element, även de utan klass, namn eller id-attribut.
• Nackdel: Det är den mest komplicerade metoden att identifiera element på grund av för många olika regler och överväganden.

Lyckligtvis kan Firebug automatiskt generera XPath Selenium lokaliserare. I följande exempel kommer vi att komma åt en bild som omöjligen kan nås med de metoder vi diskuterade tidigare.

Steg 1) Navigera till Mercury Tours hemsida och använd Firebug för att inspektera den orangea rektangeln till höger om den gula "Länkar"-rutan. Se bilden nedan.

Steg 2) Högerklicka på elementets HTML-kod och välj sedan alternativet "Kopiera XPath".

Steg 3) In Selenium IDE, skriv ett snedstreck "/" framåt i rutan Target rutan klistra sedan in XPath som vi kopierade i föregående steg. Posten i din Target rutan ska nu börja med två snedstreck "//".

Steg 4) Klicka på knappen Sök. Selenium IDE bör kunna markera den orange rutan som visas nedan.