hur man använder Firebug för att skapa Selenium Scripts – Selenium Tutorial #4

i föregående handledning lärde vi oss hur man skapar automatiserade testskript med Selenium IDE och dess inspelningsfunktion. Vi bläddrade också igenom folkrika funktioner i Selenium IDE. Vi syftade till att habingera läsaren med de viktigaste funktionerna och kommandona för Selenium IDE.

bara en påminnelse-det här är vår 4: e handledning i free Selenium training series.

Nu när du är van och kan skapa automatiserade skript med inspelningsläge för Selenium IDE, låt oss gå vidare med ett annat verktyg som spelar en mycket viktig roll för att hjälpa oss att skapa effektiva testskript som kallas ”Firebug”. Firebug hjälper oss att inspektera egenskaperna hos webbelement och webbsidor.

således består denna handledning av installationen av Firebug och dess användbarhet.

notera att innehållet i denna handledning inte bara är tillämpligt i samband med Selenium IDE; snarare kan det tillämpas på varje verktyg för Selenium suite. Således skulle jag helst använda termen selen istället för Selen IDE.

i den här handledningen kan du lära dig hur du använder Firebug-tillägg för att skapa Selenium-skript. I processen kommer vi också att lära oss hur man installerar Firebug.

introduktion till Firebug

Firebug är ett Mozilla Firefox-tillägg. Detta verktyg hjälper oss att identifiera eller vara mer specifik inspektera HTML, CSS och JavaScript-element på en webbsida. Det hjälper oss att identifiera elementen unikt på en webbsida. Elementen kan hittas unikt baserat på deras lokaliseringstyper som vi skulle diskutera senare i denna handledning.

hur man installerar Firebug?

för att underlätta förståelsen skulle vi dela upp installationsprocessen i följande steg.

steg -1: starta Mozilla Firefox-webbläsaren och navigera till den här nedladdningssidan för Firebug-tillägg. Webbadressen tar oss till Firefox add-ons avsnitt.

steg -2: klicka på knappen” Lägg till Firefox ” som finns på webbsidan. Se följande figur för samma.

steg-3: Så snart vi klickar på knappen ”Lägg till Firefox” visas en säkerhetsvarningsruta, klicka på knappen ”Tillåt” nu.

steg-4: Nu hämtar Firefox tillägget i bakgrunden och en förloppsindikator visas.

Steg-5: så snart processen är klar visas programvaruinstallationsfönstret. Klicka nu på knappen” Installera nu”.

steg-6: så snart installationen är klar visas en popup som säger att firebug har installerats. Välj nu att stänga denna pop up.

notera: Till skillnad från Selenium IDE behöver vi inte starta om Firefox för att återspegla firebug-installationen, utan det kommer lätt.

Steg-7: nu för att starta firebug kan vi välja något av följande sätt:

• tryck på F12
• Klicka på Firebug-ikonen som finns i det extrema övre högra hörnet av Firefox-fönstret.
• 
• Klicka på Firefox menyrad ->webbutvecklare ->firebug -> öppna Firebug.

steg-8: Nu kan firebug ses längst ner i Firefox-fönstret.

Nu när vi har laddat ner och installerat firebug, låt oss gå vidare med de typer av lokaliserare som vi skulle skapa med firebug.

skapa Selenium Script med Firebug

Till skillnad från Selenium IDE, i Firebug, skapar vi automatiserade testskript manuellt genom att lägga till flera teststeg för att bilda ett logiskt och konsekvent testskript.

Låt oss följa ett progressivt tillvägagångssätt och förstå processen steg för steg.

Scenario:

• öppna ”https://accounts.google.com”.
• hävda titeln på ansökan
• ange ett ogiltigt användarnamn och ogiltigt lösenord och skicka in uppgifterna för att logga in.

Steg 1-Starta Firefox och öppna Selenium IDE från menyraden.

steg 2-Ange adressen för ansökan under test (”https://accounts.google.com”) inuti Basadressen textrutan.

steg 3 – som standard är inspelningsknappen i PÅ-läge. Kom ihåg att ställa in det för att inaktivera inspelningsläget. Lägg märke till om inspelningsläget är i ON-läge kan det leda till inspelning av våra interaktioner med webbläsaren.

steg 4 – Öppna programmet under test (https://accounts.google.com) I Firefox.

Steg 5-Starta Firebug i webbläsaren.

steg 6 – Välj det tomma teststeget i redigeraren.

Steg 7 – Skriv ”öppna” i kommandotextrutan som finns i redigeringsfönstret. Kommandot ”Öppna” öppnar den angivna webbadressen i webbläsaren.

rekommendation: när du skriver kommandon i kommandotextrutan kan användaren utnyttja funktionen för automatisk val. Så snart användaren skriver en sekvens av tecken, skulle de matchande förslagen automatiskt fyllas i.

användaren kan också klicka på rullgardinsmenyn tillgänglig i kommandotextrutan för att titta på alla kommandon som tillhandahålls av Selenium IDE.

steg 8-Nu, rörelse mot Firebug-sektionen i webbläsaren, expandera” head ” – delen av HTML-koden. Lägg märke till HTML-taggen <title>. Således för att hävda titeln på webbsidan, skulle vi kräva värdet av<title> taggen.

kopiera titeln på webbsidan som är” Logga in – Google-konton ” i vårt fall.

steg 9-Välj det andra tomma teststeget i redigeraren.

steg 10-Skriv ”assertTitle” i kommandotextrutan som finns i redigeringsfönstret. Kommandot ”assertTitle” returnerar den aktuella sidtiteln och jämför den med den angivna titeln.

steg 11 – klistra in titeln kopierad i steg 8 i målfältet för den andra.

steg 12 – Välj nu det tredje tomma teststeget i redigeringsfönstret

steg 13 – skriv” typ ” – kommandot i kommandotextrutan. Kommandot ” typ ” anger ett värde i det angivna webbelementet till GUI.

steg 14 – byt nu till webbläsaren, Ta muspekaren till textrutan” E-post ” i inloggningsformuläret och tryck på ett högerklick.

Välj alternativet” Inspektera Element med Firebug”. Lägg märke till att Firebug automatiskt markerar motsvarande HTML-kod för webbelementet, dvs ”e-post Textbox”.

steg 15 – HTML-koden i ovanstående illustration visar de distinkta egenskapsattribut som hör till textrutan ”E-post”. Observera att det finns fyra egenskaper (ID, typ, platshållare och namn) som unikt identifierar webbelementet på webbsidan. Således är det upp till användaren att välja en eller flera egenskaper för att identifiera webbelementet.

således väljer vi i detta fall ID som lokaliserare. Kopiera ID-värdet och klistra in det i målfältet i det tredje teststeget prefixet med ”id=” för att indikera Selenium IDE för att hitta ett webbelement som har ID som ”e-post”.

(Klicka för att visa förstorad bild)

notera att Selenium IDE är skiftlägeskänsligt, skriv sålunda attributvärdet noggrant och exakt samma som det visas i HTML-koden.

Steg 16-klicka på knappen Sök för att verifiera om den valda lokaliseraren hittar och lokaliserar det angivna användargränssnittet på webbsidan.

steg 17-Nu är nästa steg att ange testdata i textrutan värde i det tredje teststeget i redigeringsfönstret. Ange ”InvalidEmailID” i textrutan värde. Användaren kan ändra testdata när och när det är önskvärt.

Steg 18 – Välj nu det fjärde tomma teststeget i redigeringsfönstret

steg 19 – skriv” typ ” – kommandot i kommandotextrutan.

steg 20-byt nu till webbläsaren, Ta muspekaren till textrutan ”Lösenord” i inloggningsformuläret och tryck på ett högerklick.

Välj alternativet ”Inspektera Element med Firebug”.

steg 21-HTML-koden nedan visar de distinkta egenskapsattributen som tillhör textrutan” Lösenord”. Observera att det finns fyra egenskaper (ID, typ, platshållare och namn) som unikt identifierar webbelementet på webbsidan. Således är det upp till användaren att välja en eller flera egenskaper för att identifiera webbelementet.

således väljer vi i detta fall ID som lokaliserare. Kopiera ID-värdet och klistra in det i målfältet i det tredje teststeget prefixet med ”id=”.

(Klicka för att visa förstorad bild)

steg 22 – Klicka på knappen Sök för att verifiera om Locator-fliken hittar och lokaliserar det angivna användargränssnittet på webbsidan.

steg 23-nu är nästa steg att ange testdata i textrutan värde i det fjärde teststeget i redigeringsfönstret. Ange ”InvalidPassword” i textrutan värde. Användaren kan ändra testdata när och när det är önskvärt.

steg 24 – Välj nu det femte tomma teststeget i redigeringsfönstret

steg 25 – skriv ”klicka” – kommandot i kommandotextrutan. Kommandot ”klicka” klickar på ett angivet webbelement på webbsidan.

steg 26-byt nu till webbläsaren, Ta muspekaren till ”Logga in” – knappen i inloggningsformuläret och tryck på ett högerklick.

Välj alternativet ”Inspektera Element med Firebug”.

steg 27 – HTML-koden nedan visar de distinkta egenskapsattributen som tillhör” logga in ” – knappen.

Välj ID som locator. Kopiera ID-värdet och klistra in det i målfältet i det tredje teststeget prefixet med ”id=”.

(Klicka för att visa förstorad bild)

steg 28 – klicka på knappen Sök för att verifiera om lokaliseraren plockade hittar och lokaliserar det angivna användargränssnittet på webbsidan.

testskriptet är klart nu. Se följande illustration för att visa det färdiga testskriptet.

steg 29 – spela upp det skapade testskriptet och spara det på samma sätt som vi gjorde i föregående handledning.

slutsats

i denna handledning introducerade vi ännu ett verktyg för att skapa skript eller snarare ett verktyg som hjälper till att skapa skript.

Firebug har överraskande en stor potential att hitta webbelement på en webbsida. Således kan användaren utnyttja verktygets förmåga att skapa effektiva och effektiva automatiseringstestskript manuellt.

nästa handledning # 5: Vi går vidare i nästa handledning, vi skulle titta på de olika typerna av lokaliserare i selen och deras tillgänglighetsteknik för att bygga testskript. Under tiden kan reader börja bygga sina automatiseringstestskript med Firebug.