In one of the chapter of Selenium IDE Tutorial series we learned How to Record IDE Scripts. In this chapter, we will have a look at How to Create Selenium IDE Script using Firebug Manually.
What is Firebug?
The Firebug is one of the most popular add-on feature and a web development tool that was created by Joe Hewitt. It facilitates you to edit, debug and monitor any website’s JavaScript CSS, HTML, XHR, and DOM. It also helps you to view the source code of any web page. Firebug includes all live test editing, script error logging and enables you to run arbitrary JavaScript.
It is a life Saver for Selenium Users, as it helps to Identify element’s property on the HTML page.
Install Firebug in Mozilla Firefox
1. Launch the Mozilla Firefox browser And Click on Firefox Menu which you may see in the upper right corner. Click on Add-Ons option.
2) Type Firebug in the search box shown in the top right corner. It will display the search result. Click on Add to Firefox against the Firebug.
3) You may see a pop up depending upon the browser you are using. Click on Install button. Once you click the Install button, it will start downloading.
4) Now you have successfully installed the firebug in Mozilla Firefox.
Creating Selenium Script using Firebug
Step 1 : Launch Selenium IDE
Launch the Firefox browser and then Selenium IDE. Type the base URL (http://store.demoqa.com./) inside the Base URL textbox.
Note: By default, the Record button is in ON state. Make sure to toggle this Off before starting.
Step 2: Open URL
Click on the first empty test step in the Editor.
Type open command in the command text box. The “open” command opens the specified URL.
Step 3: Verify Title
Open up the http://store.demoqa.com/ URL in the Firefox browser. Click on Firebug,
In Firebug, expand the <head> tag to display the <title> tag. Click on the value of the <title> tag. Copy the title of the webpage which is ONLINE STORE | Toolsqa Dummy Test site.
Click on the second empty test step in the Editor and Type verifyTitle command in the command text box. verifyTitle command returns the current page title and compares it with the specified title. And Paste the title copied in step 4 into the Target field of the second step.
Step 4: Click on My Account
For third command Click on the third empty test step in the Editor and Type clickAndWait command in the command text box. We shall use the clickAndWait command for the user to click on My Account button.
In Firebug, click on the Inspect button and then Click on the My Account button. Notice that Firebug automatically shows you the HTML code for that element. My Account button does not have any ID or Name. We shall, therefore, use its xpath or css as the locator.
Now, Right-click the highlighted code in the Firebug panel and Copy the xpath and paste it onto the Target field in Selenium IDE.
Target text box, prefix with xpath=, indicating that Selenium IDE should target an element whose Xpath attribute is /html/body/div[2]/div/div/header/div[2]/a.
Step 5: Enter Username and Password
For fourth command Click on the fourth empty test step in the Editor and Type type command in the command text box.
In Firebug, click on the Inspect button. Click on the Username text box. Firebug shows you the HTML code for that element.
Username text box have an ID attribute. Use its ID as the locator. Copy the ID value and paste it into the Target field in Selenium IDE.
Type your username in the Value text box of Selenium IDE.
Exactly the same way make one step script for password as well.
Step 6: Click on Login
Now, we will have to click the login button. Click on the sixth empty test step in the Editor and Type clickAndWait command in the command text box. As usual we shall utilize firebug to find out an appropriate locator.
Copy the ID value and paste it into the Target field in Selenium IDE. Type your Password in the Value text box of Selenium IDE.
Step 7: Play Back the Script
Our test script is complete now. Save the test case and the completed script will look like As Shown in Image bellow
