Sökare i Selen IDE: CSS Selector - DOM - XPath - ID

Innehållsförteckning:

Anonim

Vad är Locators?

Locator är ett kommando som berättar för Selen IDE vilka GUI-element (t.ex. textruta, knappar, kryssrutor etc) som de behöver fungera 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 arbeta med felaktiga GUI-element eller inga element alls! Selen ger därför ett antal lokaliserare för att exakt lokalisera ett GUI-element

De olika typerna av CSS Locator i Selen IDE

Det finns kommandon som inte behöver lokalisera (t.ex. kommandot "öppen"). Men de flesta av dem behöver elementlokaliserare i Selen webdriver.

Valet av locator beror till stor del på din applikation under test . I den här handledningen växlar vi mellan Facebook, nya turer. Demoaut på grundval av lokaliserare som dessa applikationer stöder. På samma sätt i ditt testprojekt väljer du någon av de ovan listade elementlokalerna i Selenium webdriver, baserat på din applikationsstöd.

Lokalisering efter ID

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

Målformat: id = id för elementet

I det här exemplet använder vi Facebook som vår testapp eftersom Mercury Tours inte använder ID-attribut.

Steg 1. Sedan denna handledning skapades har Facebook ändrat sin inloggningssidesdesign. Använd denna demosida http://demo.guru99.com/test/facebook.html för testning. Inspektera textrutan "E-post eller telefon" med Firebug och notera dess ID. I detta fall är ID "e-post".

Steg 2. Starta Selen IDE och ange "id = e-post" i rutan Mål. Klicka på knappen Sök och lägg märke till att textrutan "E-post eller telefon" blir markerad med gul och kantad med grönt, vilket innebär att Selen IDE kunde hitta det elementet korrekt.

Hitta efter namn

Lokaliseringselement med namn liknar mycket att hitta med ID, förutom att vi istället använder prefixet "name =" .

Målformat: namn = elementets namn

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

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

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

Steg 2. I Selen IDE anger du "namn = användarnamn" i rutan Mål och klickar på Sök-knappen. Selen IDE bör kunna hitta textrutan Användarnamn genom att markera den.

Hitta 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 skilja element med samma namn.

Målformat : name = name_of_the_element filter = value_of_filter

Låt oss se ett exempel -

Steg 1 . Logga in på Mercury Tours med "tutorial" som användarnamn och lösenord. Det tar dig till Flight Finder-sidan som visas nedan.

Steg 2. Med hjälp av Firebug märker du att alternativknapparna Round Trip och One Way har samma namn "tripType". De har dock olika VALUE-attribut så att vi kan använda var och en av dem som vårt filter.

Steg 3.

  • Vi kommer att komma åt alternativet One Way-knappen först. Klicka på den första raden i redigeraren.
  • I kommandorutan för Selen IDE anger du kommandot "klicka".
  • I rutan Mål anger du "name = tripType value = oneway". Delen "value = oneway" är vårt filter.

Steg 4 . Klicka på Sök-knappen och lägg märke till att Selen IDE kan markera alternativet Envägsknapp med grönt - vilket betyder att vi har tillgång till elementet framgångsrikt med dess VALUE-attribut.

Steg 5. Tryck på "X" -tangenten på tangentbordet för att utföra detta klickkommando. Lägg märke till att alternativknappen Enväg 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.

Lokalisering med länktext

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

Målformat : länk = länk_text

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

Steg 1.

  • Kontrollera först att du är inloggad från Mercury Tours.
  • Gå till Mercury Tours hemsida.

Steg 2 .

  • Inspektera länken "REGISTER" med Firebug. 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å Selen IDE: s målruta. Prefixa det med "link =".

Steg 4. Klicka på knappen Sök och märker att Selen IDE kunde markera REGISTER-länken korrekt.

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

Lokalisering med CSS Selector

CSS-väljare i selen är strängmönster som används för att identifiera ett element baserat på en kombination av HTML-tagg, id, klass och attribut. Att lokalisera med CSS-väljare i Selen är mer komplicerat än de tidigare metoderna, men det är den vanligaste lokaliseringsstrategin för avancerade Selen-användare eftersom den kan komma åt även de element som inte har något ID eller namn.

CSS-väljare i Selen har många format, men vi fokuserar bara på de vanligaste.

  • Tagg och ID
  • Tagg och klass
  • Tagga och attribut
  • Tagga, klass och attribut
  • Inre text

När vi använder den här strategin, prefixar vi alltid målrutan med "css =" som kommer att visas i följande exempel.

Lokalisering med CSS Selector - Tagg och ID

Återigen kommer vi att använda Facebooks textruta E-post i det här exemplet. Som du kommer ihåg har det ett ID med "e-post" och vi har redan öppnat det i avsnittet "Hitta efter ID". Den här gången använder vi en Selenium CSS-väljare med ID för att komma åt samma element.

Syntax

Beskrivning

css = tag # id
  • tag = HTML-taggen för elementet som nås
  • # = hash-tecknet. Detta bör alltid finnas när du använder en Selenium CSS-väljare med ID
  • id = ID för elementet som nås

Tänk på att ID alltid föregås av ett hash-tecken (#).

Steg 1. Navigera till www.facebook.com. Med hjälp av Firebug undersöker du textrutan "E-post eller telefon".

Observera nu att HTML-taggen är "input" och dess ID är "e-post". Så vår syntax blir "css = input # email".

Steg 2. Ange "css = input # email" i rutan Mål i Selen IDE och klicka på Sök-knappen. Selen IDE bör kunna markera det elementet.

Lokalisering med CSS-väljare - Tagg och klass

Att lokalisera med CSS Selector i Selen med en HTML-tagg och ett klassnamn liknar att använda en tagg och ID, men i detta fall används en punkt (.) Istället för ett hash-tecken.

Syntax

Beskrivning

css = tagg. klass
  • tag = HTML-taggen för elementet som nås
  • . = punkttecknet. Detta bör alltid finnas när du använder en CSS-väljare med klass
  • klass = klassen för elementet som nås

Steg 1. Gå till demosidan http://demo.guru99.com/test/facebook.html och använd Firebug för att inspektera textrutan "E-post eller telefon". Observera att dess HTML-tagg är "input" och dess klass är "inputtext."

Steg 2. I Selen IDE anger du "css = input.inputtext" i rutan Mål och klickar på Sök. Selen IDE borde kunna känna igen textrutan E-post eller telefon.

Observera att när flera element har samma HTML-tagg och namn, kommer bara det första elementet i källkoden att kännas igen . Med hjälp av Firebug, inspektera textrutan Lösenord på Facebook och märk att den har samma namn som textrutan E-post eller telefon.

Anledningen till att endast textrutan E-post eller telefon markerades i föregående illustration är att den kommer först i Facebooks sidkälla.

Lokalisering med CSS Selector - Tagg och attribut

Denna strategi använder HTML-taggen och ett specifikt attribut för elementet som ska nås.

Syntax

Beskrivning

css = tagg [attribut = värde]
  • tag = HTML-taggen för elementet som nås
  • [och] = hakparenteser inom vilka ett specifikt attribut och motsvarande värde kommer att placeras
  • attribut = attributet som ska användas. Det är tillrådligt att använda ett attribut som är unikt för elementet, till exempel ett namn eller ID.
  • värde = motsvarande värde för det valda attributet.

Steg 1. Navigera till registreringssidan för Mercury Tours (http://demo.guru99.com/test/newtours/register.php) och inspektera textrutan "Efternamn". Notera dess HTML-tagg ("input" i detta fall) och dess namn ("lastName").

Steg 2. I Selen IDE anger du "css = input [name = efternamn]" i rutan Mål och klickar på Sök. Selen IDE ska kunna komma åt rutan Efternamn framgångsrikt.

När flera element har samma HTML-tagg och attribut, kommer bara det första att kännas igen . Detta beteende liknar att hitta element som använder CSS-väljare med samma tagg och klass.

Lokalisering efter CSS Selector - tagg, klass och attribut

Syntax Beskrivning
css = tag.class [attribut = värde]
  • tag = HTML-taggen för elementet som nås
  • . = punkttecknet. Detta bör alltid finnas när du använder en CSS-väljare med klass
  • klass = klassen för elementet som nås
  • [och] = hakparenteser inom vilka ett specifikt attribut och motsvarande värde kommer att placeras
  • attribut = attributet som ska användas. Det är tillrådligt att använda ett attribut som är unikt för elementet, till exempel ett namn eller ID.
  • värde = motsvarande värde för det valda attributet.

Steg 1. Gå till demosidan http://demo.guru99.com/test/facebook.html och använd Firebug för att inspektera inmatningsrutorna 'E-post eller telefon' och 'Lösenord'. Notera deras HTML-tagg, klass och attribut. I det här exemplet väljer vi deras 'tabindex'-attribut.

Steg 2. Vi kommer först till textrutan "E-post eller telefon". Således kommer vi att använda ett tabindexvärde på 1. Ange "css = input.inputtext [tabindex = 1]" i Selenium IDE: s målruta och klicka på Sök. Inmatningsfältet 'E-post eller telefon' ska markeras.

Steg 3. För att komma åt rutan för inmatning av lösenord, ersätt helt enkelt värdet för tabindex-attributet. Ange "css = input.inputtext [tabindex = 2]" i rutan Mål och klicka på knappen Sök. Selen IDE måste kunna identifiera textrutan Lösenord framgångsrikt.

Lokalisering med CSS Selector - inre text

Som du kanske har märkt får HTML-etiketter sällan id-, namn- eller klassattribut. Så, hur kommer vi åt dem? Svaret är genom användning av deras inre texter. Inre texter är de faktiska strängmönstren som HTML-etiketten visar på sidan.

Syntax

Beskrivning

css = tag: innehåller ("inre text")
  • tag = HTML-taggen för elementet som nås
  • innertext = elementets inre text

Steg 1. Navigera till Mercury Tours hemsida (http://demo.guru99.com/test/newtours/) och använd Firebug för att undersöka etiketten "Lösenord". Notera dess HTML-tagg (som i det här fallet är "font") och observera att den inte har några klass-, id- eller namnattribut.

Steg 2. Skriv css = font: innehåller ("Lösenord:") i Selen IDE: s målruta och klicka på Sök. Selen IDE ska kunna komma åt lösenordsetiketten som visas i bilden nedan.

Steg 3. Den här gången ersätter du den inre texten med "Boston" så att ditt mål nu blir "css = font: innehåller (" Boston ")". Klicka på Sök. Du bör märka att etiketten "Boston till San Francisco" blir markerad. Detta visar att Selen IDE kan komma åt en lång etikett även om du bara angav det första ordet i dess inre text.

Lokalisering efter DOM (Document Object Model)

Document Object Model (DOM) är i enkla termer det sätt på vilket HTML-element är strukturerade. Selen IDE kan använda DOM för att komma åt sidelement. Om vi ​​använder den här metoden kommer vår målruta alltid att börja med "dom = dokument ..."; emellertid tas prefixet "dom =" normalt bort eftersom Selen IDE automatiskt kan tolka allt som börjar med nyckelordet "dokument" för att vara en väg inom DOM i Selen ändå.

Det finns fyra grundläggande sätt att hitta ett element genom DOM i Selen:

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

Lokalisering efter DOM - getElementById

Låt oss fokusera på den första metoden - med hjälp av getElementById-metoden för DOM i Selen. Syntaksen skulle vara:

Syntax

Beskrivning

document.getElementById ("elementets element")

elementets id = detta är värdet på ID-attributet för det element som ska nås. Detta värde ska alltid vara inneslutet i ett par parenteser ("").

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

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

Steg 2. Öppna Selen IDE och i rutan Mål anger du "document.getElementById (" persist_box ")" och klickar på Sök. Selen IDE borde kunna hitta kryssrutan "Håll mig inloggad". Även om det inte kan markera det inre av kryssrutan, kan Selen IDE fortfarande omge elementet med en ljusgrön kant som visas nedan.

Lokalisering efter DOM - getElementsByName

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

getElementById

  • Det får bara ett element åt dig.
  • Det elementet har det ID som du angav inom parenteserna 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 matris
  • Du anger vilket element du vill komma åt genom att placera dess indexnummer i hakparenteserna i getElementsByNames syntax nedan.

Syntax

Beskrivning

document.getElementsByName ("namn") [index]
  • namn = elementets element som definieras av dess attribut 'namn'
  • index = ett heltal som anger vilket element i getElementsByName: s array kommer att användas.

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

Steg 2. Inspektera de tre alternativknapparna längst ned på sidan med hjälp av Firebug (alternativknapparna Economy Class, Business class och First class). Lägg märke till att de alla har samma namn som är "servClass".

Steg 3. Låt oss öppna radioknappen "Ekonomiklass" först. Av alla dessa tre alternativknappar kommer detta element först, så det har ett index på 0. I Selen IDE skriver du "document.getElementsByName (" servClass ") [0]" och klickar på Sök-knappen. Selen IDE borde kunna identifiera alternativknappen Economy class korrekt.

Steg 4. Ändra indexnumret till 1 så att ditt mål nu blir document.getElementsByName ("servClass") [1]. Klicka på Sök-knappen så kommer Selen IDE att kunna markera alternativknappen "Business class", som visas nedan.

Lokalisering efter DOM - dom: namn

Som tidigare nämnts gäller den här metoden endast om elementet du öppnar finns i en namngiven form.

Syntax

Beskrivning

document.forms ["formulärets namn"] .elements ["elementets namn"]
  • formens namn = värdet på namnet attributet för formuläretiketten som innehåller elementet du vill komma åt
  • elementets namn = värdet på namnet attributet för det element som du vill komma åt

Steg 1. Navigera till Mercury Tours hemsida (http://demo.guru99.com/test/newtours/) och använd Firebug för att inspektera textrutan Användarnamn. Lägg märke till att den finns i ett formulär som heter "hem".

Steg 2. I "Selen IDE" skriver du "document.forms [" home "]. Elements [" userName "]" och klickar på Sök-knappen. Selen IDE måste kunna komma åt elementet framgångsrikt.

Lokalisering efter DOM - dom: index

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

Syntax

Beskrivning

document.forms [index of the form] .elements [index of the element]
  • index för formuläret = indexnumret (börjar vid 0) för formuläret i förhållande till hela sidan
  • elementets element = indexnumret (börjar med 0) för elementet i förhållande till hela formen som innehåller det

Vi kommer till textrutan "Telefon" på Mercury Tours registreringssida. Formen på den sidan har inget namn- och ID-attribut, så detta kommer att vara ett bra exempel.

Steg 1. Navigera till registreringssidan för Mercury Tours 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 IDE: s målruta och klicka på Sök-knappen. Selen 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 IDE: s målruta. Textrutan Telefon ska fortfarande markeras.

Lokalisering med XPath

XPath är det språk som används vid lokalisering av XML-noder (Extensible Markup Language). Eftersom HTML kan ses som en implementering av XML kan vi också använda XPath för 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 åt en bild som omöjligt kan nås via de metoder som vi diskuterade tidigare.

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

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

Steg 3. I Selen IDE skriver du ett snedstreck "/" i rutan Mål och klistrar sedan in XPath som vi kopierade i föregående steg. Inmatningen i din målruta bör nu börja med två snedstreck "//".

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

Sammanfattning

Syntax för Locator-användning

Metod

Målsyntax

Exempel
Efter ID id = id_of_elementet id = e-post
Vid namn namn = namn_element namn = användarnamn
Efter namn med filter name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Med länktext länk = länktext länk = REGISTRERA
Tagg och ID css = tag # id css = input # e-post
Tagg och klass css = tagg. klass css = input.inputtext
Tagga och attribut css = tagg [attribut = värde] css = input [namn = efternamn]
Tagg, klass och attribut css = tagg. klass [attribut = värde] css = input.inputtext [tabindex = 1]