Sökare i Selenium

Vad finns lokaliseringsverktyg i? Selenium?

En lokaliseringsanordning är ett kommando som styr Selenium IDE eller Selenium WebDriver till rätt GUI-element, till exempel en textruta, knapp, länk eller kryssruta, där en åtgärd måste utföras. Att identifiera rätt GUI-element är en förutsättning för att bygga ett pålitligt automatiseringsskript. Korrekt identifiering är dock mer utmanande än det låter. Ibland kan det sluta med att du interagerar med fel element, eller utan något element alls. För att åtgärda detta, Selenium erbjuder en mängd olika lokaliseringsstrategier som möjliggör exakt målinriktning av GUI-element.

Medan vissa kommandon, som till exempel kommandot ”öppna”, inte kräver en positionerare, är majoriteten av Selenium Kommandon är beroende av elementlokaliserare. Valet av lokaliseringsverktyg beror till stor del på din applikation under test (AUT). I den här handledningen kommer vi att växla mellan Facebook och Mercury Tours demosida (newtours.demoaut), baserat på vilka sökare varje applikation stöder. Likaså i din egen testning projektet, kommer du att välja en elementsökare i Selenium WebDriver baserat på strukturen i din applikation.

Lokaliseras med ID

Detta är den vanligaste metoden för att hitta element eftersom ID:n är avsedda att vara unika för varje element på en sida. När ett ID-attribut finns bör det vara ditt första val för snabba, stabila och läsbara testskript.

Target Format: id=id för elementet

I det här exemplet använder vi en Facebook-demosida eftersom Mercury Tours använder inte ID-attribut för sina huvudsakliga formulärfält.

Steg 1) Använd denna demosida https://demo.guru99.com/test/facebook.html för testning. Kontrollera textrutan "E-post eller telefon" med webbläsarens inbyggda utvecklarverktyg (tryck på F12 i Chrome, Edge eller Firefox) 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 rutan. Klicka på knappen Sök och lägg märke till att textrutan "E-post eller telefon" är markerad med gult och har en grön kantlinje, vilket indikerar att Selenium IDE har lokaliserat elementet korrekt.

Lokalisera efter namn

Att lokalisera element efter namn liknar att lokalisera efter ID, förutom att vi använder "namn =" prefix istället. Denna metod är användbar när element saknar ett ID men har ett definierat namnattribut.

Target Format: namn=namn på elementet

För följande demonstration kommer vi att använda Mercury Rundturer eftersom alla viktiga formulärelement på webbplatsen har ett namnattribut.

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

Här är elementets namn "användarnamn".

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

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

Filter är användbara när flera element delar samma namnattribut. Filter är ytterligare attribut som används för att skilja element som delar ett identiskt namn. Utan filter, Selenium skulle som standard endast det första matchande elementet.

Target Format: name=name_of_the_element filter=value_of_filter

Låt oss gå igenom ett exempel.

Steg 1) Logga in Mercury Turer.

Logga in Mercury Rundturer med "handledning" som både användarnamn och lösenord. Sidan Flight Finder bör visas, som visas nedan.

Steg 2) Använd utvecklarverktygen för att granska VALUE-attributen.

Observera att radioknapparna Tur- och returresa och Enkelresa delar samma namn ”resaTyp”. De har dock olika VÄRDE-attribut, så vi kan använda varje värde som ett filter.

Steg 3) Klicka på den första raden i redigeraren.

• Vi kommer först att öppna radioknappen Enkelriktad. Klicka på den första raden i Selenium IDE-redigerare.
• I kommandofältet skriver du in kommandot "klicka".
• I Target I rutan anger du "namn=resaTyp värde=enkelresa". Delen "värde=enkelresa" fungerar som vårt filter.

Steg 4) Klicka på knappen Sök.

Lägg märke till att Selenium IDE markerar alternativknappen Enkelriktad i grönt, vilket bekräftar att elementet har nåtts via dess VALUE-attribut.

Steg 5) Välj radioknappen Enkelriktad.

Tryck på "X"-tangenten på tangentbordet för att utföra klickkommandot. Radioknappen Enkelriktad är nu vald.

Du kan utföra samma åtgärd på alternativknappen Tur- och returresa, den här gången med "namn=resatyp värde=tur- och returresa" som mål.

Lokalisera via länktext

Denna lokaliseringsstrategi gäller endast för hyperlänktexter. Vi når länken genom att prefixa målet med "link=" följt av den synliga hyperlänktexten. Denna metod är mycket läsbar och fungerar bra för navigeringstestning.

Target Format: länk=länk_text

I följande exempel kommer vi att använda länken ”REGISTRERA” som finns på Mercury Tours hemsida.

Steg 1)

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

Steg 2)

• Använd utvecklarverktygen för att granska länken ”REGISTER”. Länktexten visas mellan den inledande och avslutande ankartaggen.
• I det här fallet är länktexten ”REGISTRERA”. Kopiera länktexten.

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

Steg 4) Klicka på knappen Sök. Selenium IDE kommer att markera REGISTER-länken korrekt.

Steg 5) För att verifiera ytterligare, skriv "clickAndWait" i kommandorutan och kör det. Selenium IDE klickar på länken REGISTRERA och tar dig till registreringssidan som visas nedan.

Lokalisering efter DOM (Document Object Model)

Ocuco-landskapet Dokumentobjektmodell (DOM)beskriver enkelt uttryckt hur HTML-element är strukturerade som ett träd av noder. Selenium IDE kan navigera i det här trädet för att komma åt sidelement. När den här metoden används, Target rutan börjar alltid med ”dom=dokument…”. Prefixet ”dom=” utelämnas vanligtvis eftersom Selenium IDE tolkar automatiskt alla värden som börjar med "dokument" som en DOM-sökväg.

Det finns fyra grundläggande sätt att hitta ett element via DOM:en i Selenium:

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

Sök efter DOM – getElementById

Låt oss först utforska getElementById-metoden i DOM:en i SeleniumDen här metoden returnerar ett enda element genom att matcha dess ID-attribut.

syntax

document.getElementById("id of the element")

• Elementets id = värdet på ID-attributet för det element som ska nås. Detta värde måste alltid omges av ett par citattecken.

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

ID:t vi ska använda är ”persist_box”.

Steg 2) Öppet Selenium IDE och i Target I rutan, skriv in document.getElementById("persist_box") och klicka sedan på Sök. Selenium IDE hittar kryssrutan "Håll mig inloggad". Även om den inte kan markera insidan av kryssrutan, omger den elementet med en ljusgrön kantlinje, som visas nedan.

Sök efter DOM – getElementsByName

Metoden getElementById använder endast ett element åt gången, nämligen elementet med det angivna ID:t. Metoden getElementsByName beter sig annorlunda. Den returnerar en array av element som delar det angivna namnet. Enskilda element nås med hjälp av ett numeriskt index som börjar på 0.

	getElementById Den returnerar bara ett element. Det elementet har det ID som anges inom parenteserna i getElementById().
	getElementsByName Den returnerar en samling element vars namn är identiska. Varje element indexeras med ett tal som börjar på 0, som en array. Du väljer ett specifikt element genom att placera dess index inom hakparenteserna i syntaxen 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 Gå till Tours hemsida och logga in med användarnamn och lösenord som ”tutorial”. Webbläsaren kommer att ladda skärmen Flight Finder.

Steg 2) Använd utvecklarverktygen för att granska de tre alternativknapparna längst ner på sidan (ekonomiklass, affärsklass och första klass). Observera att de alla delar samma namn, ”servClass”.

Steg 3) Låt oss först öppna alternativknappen "Ekonomiklass". Av de tre alternativknapparna visas detta element först, så dess index är 0. I Selenium IDE, skriv document.getElementsByName("servClass")[0] och klicka på knappen Sök. Selenium IDE kommer att identifiera alternativknappen för ekonomiklass korrekt.

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

Sök efter DOM – dom:namn

Som tidigare nämnts gäller den här metoden endast om elementet du öppnar finns i ett namngivet formulär. Sökvägen börjar vid formuläret och går sedan ner till målelementet efter namn.

syntax

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

• formulärets namn = värdet på attributet namn för formulärtaggen som innehåller det element 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 Utvecklarverktyg för att granska textrutan Användarnamn. Observera att den finns i ett formulär som heter ”hem”.

Steg 2) In Selenium IDE, skriv document.forms[“home”].elements[“userName”] och klicka på knappen Sök. Selenium IDE kommer att komma åt elementet utan problem.

Sök efter DOM – dom:index

Den här metoden gäller även när elementet inte finns i ett namngivet formulär eftersom det använder formulärets index istället för dess namn. Detta är användbart för äldre sidor eller automatiskt genererade formulär där namngivning inte är tillgänglig.

syntax

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

• index för formuläret = indexnumret (börjar på 0) för formuläret med avseende på hela sidan
• index för elementet = indexnumret (som börjar vid 0) för elementet i förhållande till den form som innehåller det

Vi kommer att öppna textrutan "Telefon" på Mercury Registreringssida för turer. Formuläret på den här sidan har varken ett namn eller ett ID-attribut, så det är ett bra exempel.

Steg 1) Navigera till Mercury Registreringssidan för rundturer och granska textrutan Telefon. Observera att det omgivande formuläret varken har ID- eller namnattribut.

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

Steg 3) Alternativt kan du använda elementets namn istället för dess index för samma resultat. Ange document.forms[0].elements["telefon"] i Target rutan. Textrutan Telefon kommer fortfarande att vara markerad.

Lokaliseras av XPath

XPath är frågespråket som används för att navigera i XML-noder (Extensible Markup Language). Eftersom HTML kan betraktas som en implementering av XML, XPath kan också hitta HTML-element. Det är en av de kraftfullaste lokaliseringsstrategierna i Selenium.

• Fördel: Den kan komma åt nästan vilket element som helst, inklusive de utan klass-, namn- eller ID-attribut.
• Nackdel: Det är den mest komplexa lokaliseringsstrategin på grund av dess många regler och syntaxvariationer.

Moderna webbläsarutvecklingsverktyg kan automatiskt generera XPath-uttryck. I Chrome, Edge eller Firefox, högerklicka på ett element i elementpanelen och välj Kopiera > Kopiera XPath. I följande exempel kommer vi att komma åt en bild som inte kan hittas med hjälp av metoderna som diskuterats tidigare.

Steg 1) Navigera till Mercury Gå till Tours hemsida och använd utvecklarverktygen för att granska den orange rektangeln till höger om den gula rutan "Länkar", som visas nedan.

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

Steg 3) In Selenium IDE, skriv ett enkelt snedstreck "/" i Target rutan och klistra sedan in XPath-koden som kopierades i föregående steg. Inlägget i Target rutan ska nu börja med två snedstreck "//".

Steg 4) Klicka på knappen Sök. Selenium IDE kommer att markera den orange rutan, som visas nedan.

Varför det är viktigt att välja rätt sökmotor

Att välja rätt lokaliseringsstrategi är ett av de mest inflytelserika besluten Selenium automatisering eftersom det direkt påverkar skriptstabilitet, exekveringshastighet och långsiktiga underhållskostnader. En dåligt vald positionerare kan orsaka otillräckliga tester, falska fel och frekventa omarbetningar när programmets användargränssnitt ändras. Den prioriterade ordningen som rekommenderas av erfarna automatiseringsingenjörer är ID först, sedan Namn, följt av CSS Selector, Länktext och slutligen XPath.

ID-baserade sökverktyg är snabbast eftersom webbläsarens sökning är optimerad för unika identifierare. Namnbaserade sökverktyg är nästan lika effektiva när namnen är unika. CSS-väljare och XPath ger flexibilitet men tenderar att vara långsammare och mer spröda när utvecklare omstrukturerar DOM:en. Länktext är utmärkt för navigeringslänkar men erbjuder begränsad återanvändning.

Stabil automatisering är också beroende av samarbete med utvecklare. När testare begär konsekventa och meningsfulla ID- eller data-*-attribut under kodgranskningar förbättras positioneringsverktygens hållbarhet avsevärt. Undvik att förlita sig på automatiskt genererade ID:n (som de som produceras av ramverk) eftersom de kan ändras mellan versioner. Genom att prioritera läsbara, avsiktsdrivna positioneringsverktyg kan team hålla testsviterna underhållbara och minska den tekniska skulden allt eftersom applikationen utvecklas.

Bästa praxis för att skriva pålitliga lokaliseringsverktyg

Tillförlitliga lokaliseringsanordningar är grunden för ett underhållbart Selenium testsvit. Följande metoder hjälper till att minska skriptfel, förbättra läsbarheten och göra tester motståndskraftiga mot gränssnittsändringar.

1. Föredra unika ID:n: Kontrollera alltid först om det finns ett ID-attribut. ID:n är avsedda att vara unika inom en sida och är det mest effektiva valet.
2. Använd semantiska namn och data-* attribut: Uppmuntra utvecklare att lägga till stabila testattribut som data-testid eller data-qa. Dessa förblir konsekventa även när CSS-klasser ändras.
3. Undvik absolut XPath: Absoluta sökvägar som /html/body/div[2]/div[3]/span bryts lätt. Använd relativa XPath-uttryck med attribut som //input[@name='userName'].
4. Kombinera attribut för precision: När ett enskilt attribut inte är unikt, kombinera flera attribut (till exempel //button[@type='submit' och @name='login']) för att rikta in sig på rätt element.
5. Använd text klokt: Lokaliseringsverktyg som är beroende av synlig text kan fungera felaktigt mellan språklokaliseringar. Använd endast textbaserade lokaliseringsverktyg när innehållet är stabilt och enspråkigt.
6. Centralisera lokaliseringspunkter: Lagra lokaliseringsverktyg i en POM-klass (Page Object Model) så att uppdateringar kan göras på ett ställe istället för över många testskript.
7. Validera i utvecklarverktyg: Innan du lägger till en locator i ett skript, testa den i webbläsarkonsolen med $x("//xpath") för XPath eller document.querySelector för CSS för att bekräfta att den returnerar exakt ett element.
8. Undvik indexbaserade positioner när det är möjligt: Indexpositioner som [3] beror på elementens ordning. Även mindre layoutändringar kan förskjuta indexet och förstöra skriptet.

Genom att tillämpa dessa metoder konsekvent skapar automationsingenjörer testsviter som kan skalas över flera team och överlever frekventa UI-uppdateringar med minimalt underhåll.

Vanliga frågor