Understanding Locators in Selenium IDE : Questions and Answers

In this article, we will discuss various locators in Selenium IDE and how to identify the elements on the page using locators.Hope this be useful step in understanding Selenium IDE locators.

Question 1: What is meant by locators in Selenium IDE?

Answer: In the previous Post about Selenium Commands, we get to know that to execute most of the commands, we require target on which to execute commands. The target identifies an element in web application by the locators. Suppose there is an input box with id as username, this element in the page will be located and identified by ‘id=username’ and then we can set value in the input box by executing command ‘type’ on the target object identified by locator ‘id=username’ with required value.

Question 2: What are various locator types in Selenium IDE?

Answer: The various locator types in Selenium IDE are as follows: 

       a.  Locating elements by ID – an element can be identified using ‘id’ attribute if attribute is defined for the object. Since it is assumed that attribute id will be unique for elements if defined, hence element will be uniquely identified in the Page using id attribute in target. E.g. ‘id=gbqfq’.

      b.  Locating elements by name – if id attribute is not available, we can identify the element using name attribute in the target. E.g. ‘name = nickel’. In case of object not identified by name locator, we can use multiple locators like ‘name = nickel value = core’ to uniquely identify the object.

      c.  Locating elements by link text – For link object, we can identify an element using link text in the target. e.g. ‘link =logout’ will identify a link with text as logout.

      d.   Locating elements by XPath – We can also use XPath to identify an element in the page. XPath allows us to query the DOM structure of the page like a XML document. For e.g. //input will find first input box in the page and perform action on the same.

      e.   Locating elements by css – Elements in the webpage can be identified using CSS selectors to find the objects that you need. Selenium is compatible with CSS 1.0, CSS 2.0, and CSS 3.0 selectors. Syntax for identifying an element using css is ‘css = CSS Selector’ for e.g. ‘css=input.gbqfif’ where input is the tag name for element and gbqfif is the classname. Both xpath and css are useful to identify elements with complex identifiers.

Question 3: How can I found the attributes and properties which define an element in the webpage?

Answer: We can identify the element structure using different developer tools in different browsers.

Below are some of the developer tools that help to identify objects in the page.

a.   Firebug: Firebug is a Firefox developer tool used to identify elements on the page by using the find functionality.

b.   Firefinder: It is a Firefox tool and helps in testing XPath and CSS on the page. Highlights all elements on the page that match the selector to your element location.

c.   IE Developer Tools: IE developer tools helps in identifying element. This is inbuilt with IE browser and can be launched by pressing F12.

d.  Google Chrome Developer Tools: This is inbuilt in Google chrome and can be launched by Pressing F12.

Below image shows how to identify object in google chrome browser by pressing F12.

Using developer tool to identify an object

Question 4: Is there any specific feature in selenium IDE by which we can use the best locator to identify an element?

Answer: Yes, when we work on an element in Firefox, selenium IDE identifies an object in various possible ways. To understand this better, consider the google Page and search edit box. When we type in the edit box, Selenium IDE provides various options to uniquely identify an element as shown in the screenshot below. We can also verify if object is correctly identified using Find Button in Selenium IDE tool. This identification can be very useful to identify the element in Selenium Web driver.

Selecting best fit locator for an element in Selenium IDE

Question 5: Explain how to create XPath and CSS with some examples?

Answer: As explained earlier, XPath and CSS can be used to identify element in webpage. Below are some examples that show correlation between css and xpath and how to create the same.

      a.  Element <El> : XPath – //El : CSS – css = El: for e.g. El can be a(for link), img(for image).

      b.  Element <El> with name ‘na’ : XPath – //El[@name =’na’] :  CSS – css = El[name= na]

      c.  Element <El> with id ‘na’: XPath – //El[@id =’na’] :  CSS – css = El#na

      d.  Element <El> with class ‘na’: XPath – //El[@class =’na’] :  CSS – css = El.na

Understanding Commands in Selenium IDE: Questions and Answers

This post explains various Selenese commands used in Selenium IDE which are frequently used in Questions and answers for easy understanding of the topic.

Question 1: What are the various components of a test step in Selenium?

Answer: A test step in Selenium comprises of Commands, target object on which to execute the commands and value which acts as input or the expected result on execution of command on the target object. Selenese Commands are the set of selenium commands that we use in Selenium IDE. A target object can be identified by the Property of the object. For e.g. by Id, classname, xpath, or CSS to name a few.

Understanding commands, target and value

Question 2: Explain some of the useful and widely used Selenium commands in Selenium IDE?

Answer: Below are some of the useful commands used in Selenium.

              a.    Open - open(url). URL provided accepts both relative and absolute URLs. The "open" command waits for the page to load before proceeding. URL is provided in the target of the command. In case only ‘/’is provided in the target. It will open the URL as provided in base URL. Following are few ways in which open command works. Suppose base url is http://www.google.com, below are the scenarios

•  / in target will open http://www.google.com/ (relative path)
• /#q=google in target will open http://www.google.com/#q=google (relative Path)
• http://www.rediff.com in target will open http://www.rediff.com (absolute Path). Similar to this is OpenWindow(url) – This will open url provided in target in a new window.     

b.    type(Locator, value) - Types the value in the object identified by the locator. This can be used to set the value of combo boxes, check boxes, etc. Target will be object

c.     Sendkeys(Locator, value) - This command types the value key-by-key defined in value on the object identified by Locator. It may be confusing for new users the use of sendkeys when type command already exists. The difference between Sendkeys and type is when we use sendkeys, it does not replace the existing content in the field, whereas when we use type, it replaces the content of the field. Both the methods are used to input data in an edit field.

d.    Click(locator) – Clicks an object defined by locator in Target. In case we need to wait for page to load completely before performing further action, we use ClickandWait.

e.    Select(Locator, value) – This is used to select a value from a webList identified by Locator defined in target and sets the value as defined in the value. In case of Page load in case of selecting value from the weblist, use selectandwait.

f.     store(expression, variable Name) – This stores the value of element defined in expression in the target and stores in the variable name defined in value. This value can be used further in the test by using variable as $variableName.

Similar to store are storeAttribute(an element locator followed by a @ sign and then the name of the attribute, e.g. "id=name@href"), storeText(stores the text of an element) to name a few.

g.    waitForPageToLoad(time in millisecond) – This waits for the Page to Load completely in the time defined in target. Will move to next step in case the Page loads before the defined time

h.    pause(time in milliseconds) – This is similar to wait statement and execution is paused for the time defined for pause command in target.

i.      Refresh – This command refreshes the page.

j.      verifyText(locator, expected pattern) – This compares the text in the locator element with the expected pattern defined in value. To provide a pattern, you can use text within *value*. This will verify if value appears in the text displayed for locator. Similar to verifyText, we can use verifynottext, verifyalert, verifyattribute to validate information in the Page.

k.     AssertText(locator, expected pattern) – This compares the text in the locator element with the expected pattern defined in value. To provide a pattern, you can use text within *value*. This will verify if value appears in the text displayed for locator. Similar to AssertText, we can use Assertnottext, Assertalert, Assertattribute to validate information in the Page. Difference between Assert and verify is while test stops in case of assert fails but remaining statements in the test are executed in case of verify statement even if the verify statement fails.

l.      Highlight(Locator) – highlights the object identified by locator in the page.

m.   Break – This halts the test execution, test execution will continue once we click on continue in the IDE. This should be used in test but removed once test stabilizes as it results in manual intervention.

n.    captureEntirePageScreenshot(filename) – This command captures screenshot and save in the location defined in filename in the target.

o.    check(locator) – this checks a radio button/checkbox based on locator defined in target.

p.    Close() – This command simulates the user clicking the "close" button in the title bar of a popup window or tab.

           q.    windowMaximize() – this command will resize currently selected window to take up entire screen

Question 3: What are different types of Selenese Commands?

Answer: Selenese commands can be classified into following types:

a.    Actions – Performs action on an object. E.g. Click, type

b.    Assertions – Used to add validation steps. E.g. AssertText, verifytext

c.    Accessors – checks the state of application and stores values from the test. E.g. storetext.

Question 4: What is the default timeout for Selenium Commands?

Answer: Default timeout for selenium commands is 30000. The timeout can be changed from Options>General>default timeout of recorded command

First Steps in Selenium IDE - Understanding Selenium: Questions and Answers

In one of the previous blog, we explained in brief how Selenium IDE looks and the features Selenium IDE provides. In this post, we discuss on creating first test in Selenium IDE, adding assertions and verify statements, difference between assert and verify statements, storing value of an element at run time, adding comments to the test. 
In upcoming posts, I will cover on advance features in Selenium IDE and also include how to create test suites and details of useful commands in Selenium IDE

Before proceeding further, we must have Mozilla Firefox with Selenium IDE Add-on installed. Selenium IDE Add-on can be installed from Selenium official website.  Let us start now for creating first test in Selenium IDE.

Question 1: What are the points to be considered before starting automation on Selenium IDE?

Answer:  Below are some of points to be considered before starting with Automation on Selenium IDE.

•      Test should have known start point for the workflow.
•           Test should be independent of other test and complete in itself
•      Test should clean up itself. This means Page should return to initial state on completion.

Question 2: Please explain how to create a new test in Selenium IDE?

Answer:  Creating first test in Selenium IDE:

Let us assume, we want to record on Google Page using Selenium IDE, We will open Firefox and selenium IDE and record on Google Page, by searching for ‘test’. Below are the steps stored in the test for action performed on Google Page? We can save the test and play it back.

First Test in Selenium IDE

Question 3: What is the difference between verify and assert statement in Selenium

Answer: Adding Validation and Assertion to test:

When we record and playback in Selenium IDE, we perform the actions on object in workflow, i.e. launching the URL, setting value test in edit box and clicking on submit. Now we need to verify if the title of the Page is correct or particular object is visible in the Page.

Difference between Assert and verify is while test stops in case of assert fails but remaining statements in the test are executed in case of verify statement even if the verify statement fails.

We know the difference between verify and assert but do not know how to add assertion in a test in Selenium. Assertions are not added during recording but needs to be added manually to enhance the test.

To add an assert in the page, right click on the object as shown below. In the Google Page, I click on edit box and right click. On clicking, I get following options as shown below. Once I click on an option, it is displayed in the Selenium IDE test as shown below. In this manner we can add different assertions, verify, wait, and store statements in the test.

Adding assert and verify statements in test

Question 4: What is the need of comments in script and how to insert comments in script in Selenium IDE?

Answer: For better understanding of the script, we need to add comments in the test flow.  This can be done as explained in screenshot below:

Adding a comment in Selenium IDE

Question 5: How can we store the value of an element in Selenium IDE and use it further in the test flow?

Answer: we can store the text of an element using StoreText Command; Target will be the object whose text we need to store and value will be the variable whose value needs to be stored.

We can use the variable as ${stroredValue} where storedValue is the variable in which value was stored.