Selenium WebDriver 3 Practical Guide: End-to-end automation testing for web and mobile browsers with Selenium WebDriver , Second Edition

The newer versions of Mozilla Firefox provide built-in ways to inspect the page and elements. To inspect an element from the page, move the mouse over the desired element and right-click to open the pop-up menu. Select the Inspect Element option, as shown in the following screenshot:

This will display the Inspector tab with the HTML code in a tree format with the selected element highlighted, as shown in the following screenshot:

Using Inspector, we can also validate the XPath or CSS Selectors using the search box shown in the Inspector section. Just enter the XPath or CSS Selector and Inspector will highlight the elements that match the expression, as shown in the following screenshot:

The Developer tools provide various other debugging features. It also generates XPath and CSS selectors for elements. For this, select the desired element in the tree, right-click, and select the Copy >XPath or Copy > CSS Path option from the pop-up menu, as shown in the following screenshot:  

This will paste the suggested XPath or CSS selector value to the clipboard to be used later with the findElement() method.

Similar to Mozilla Firefox, Google Chrome also provides a built-in feature to inspect pages and elements. We can move the mouse over a desired element on the page, right-click to open the pop-up menu, and then select the Inspect element option. This will open Developer tools in the browser, which displays information similar to that of Firefox, as shown in the following screenshot:

Similar to Firefox, we can also test XPath and CSS Selectors in Google Chrome Developer tools. Press Ctrl + F (on Mac, use Command + F) in the Elements tab. This will display a search box. Just enter XPath or CSS Selector, and matching elements will be highlighted in the tree, as shown in the following screenshot:

Chrome Developer Tools also provides a feature where you can get the XPath for an element by right-clicking on the desired element in the tree and selecting the Copy XPath option from the pop-up menu.

Browser developer tools come in really handy during the test-script development. These tools will help you to find the locator details for the elements with which you need to interact as part of the test. These tools parse the code for a page and display the information in a hierarchal tree. 

On a web page, each element is uniquely identified by an ID attribute, which is optionally provided. An ID can be assigned manually by the developer of the web application or left to be dynamically generated by the application. Dynamically-generated IDs can be changed on every page refresh or over a period of time. Now, consider the HTML code of the Search box:

<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">

In the preceding code, the id attribute value of the search box is search.

Let's see how to use the ID attribute as a locating mechanism to find the Search box:

@Test
public void byIdLocatorExample() {
    WebElement searchBox = driver.findElement(By.id("search"));
searchBox.sendKeys("Bags");
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Bags'");
}

In preceding code, we used the By.id() method and the search box's id attribute value to find the element.

Here, try to use the By.id identifier, and use the name value (that is, q) instead of the id value (that is, search). Modify line three as follows:

WebElement searchBox = driver.findElement(By.id("q")); 

The test script will fail to throw an exception, as follows:

Exception in thread "main"org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"id","selector":"q"}

WebDriver couldn't find an element by id whose value is q. Thus, it throws an exception saying NoSuchElementException.

As seen earlier, every element on a web page has many attributes. Name is one of them. For instance, the HTML code for the Search box is:

<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">

Here, name is one of the many attributes of the search box, and its value is q. If we want to identify this search box and set a value in it in your test script, the code will look as follows:

@Test
public void searchProduct() {
// find search box and enter search string
WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys("Phones");
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Phones'");
}

If you observe line four, the locating mechanism used here is By.name and the name is q. So, where did we get this name from? As discussed in the previous section, it is the browser developer tools that helped us get the name of the button. Launch Developer tools and use the inspect elements widget to get the attributes of an element.

Before we discuss the className() method, we have to talk a little about style and CSS. Every HTML element on a web page, generally, is styled by the web page developer or designer. It is not mandatory that each element should be styled, but they generally are to make the page appealing to the end user.

So, in order to apply styles to an element, they can be declared directly in the element tag, or placed in a separate file called the CSS file and can be referenced in the element using the class attribute. For instance, a style attribute for a button can be declared in a CSS file as follows:

.buttonStyle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0% 2%;
}

Now, this style can be applied to the button element in a web page as follows:

<button name="sampleBtnName" id="sampleBtnId" class="buttonStyle">I'm Button</button>

So, buttonStyle is used as the value for the class attribute of the button element, and it inherits all the styles declared in the CSS file. Now, let's try this on our Homepage. We will try to make WebDriver identify the search button using its class name and click on it.

First, in order to get the class name of the search button, as we know, we will use Developers tools to fetch it. After getting it, change the location mechanism to By.className and specify the class attribute value in it. The code for that is as follows:

@Test
public void byClassNameLocatorExample() {
    WebElement searchBox = driver.findElement(By.id("search"));
searchBox.sendKeys("Electronics");
WebElement searchButton = 
driver.findElement(By.className("search-button"));
searchButton.click();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Electronics'");
}

In the preceding code, we have used the By.className locating mechanism by passing the class attribute value to it.

Sometimes, an element might have multiple values given for the class attribute. For example, the Search button has button and search-button values specified in the class attribute in the following HTML snippet:

<button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>

We have to use one of the values of the class attribute with the By.className method. In this case, we can either use button or search-button, whichever uniquely identifies the element.

As the name suggests, the By.linkText locating mechanism can only be used to identify the HTML links. Before we start discussing how WebDriver can be commanded to identify a link element using link text, let's see what an HTML link element looks like. The HTML link elements are represented on a web page using the <a> tag, an abbreviation for the anchor tag. A typical anchor tag looks like this:

<a href="http://demo-store.seleniumacademy.com/customer/account/" title="My Account">My Account</a>

Here, href is the link to a different page where your web browser will take you when you click on the link. So, the preceding HTML code when rendered by the browser looks like this:

This MY ACCOUNT is the link text. So the By.linkText locating mechanism uses this text on an anchor tag to identify the WebElement. The code would look like this:

@Test
public void byLinkTextLocatorExample() {
    WebElement myAccountLink = 
driver.findElement(By.linkText("MY ACCOUNT"));
myAccountLink.click();
assertThat(driver.getTitle())
            .isEqualTo("Customer Login");
}

Here, the By.linkText locating mechanism is used to identify the MY ACCOUNT link.

The By.partialLinkText locating mechanism is an extension of the By.linkText locator. If you are not sure of the entire link text or want to use only part of the link text, you can use this locator to identify the link element. So, let's modify the previous example to use only partial text on the link; in this case, we will use Privacy from the Privacy Policy link in the site footer:

The code would look like this:

@Test
public void byPartialLinkTextLocatorExample() {
    WebElement orderAndReturns = 
driver.findElement(By.partialLinkText("PRIVACY"));
orderAndReturns.click();
assertThat(driver.getTitle())
            .isEqualTo("Privacy Policy");
}

What happens if there are multiple links whose text has Privacy in it? That is a question for the findElement() method rather than the locator. Remember when we discussed the findElement() method earlier, it will return only the first WebElement that it comes across. If you want all the WebElements that contain Privacy in its link text, use the findElements() method, which will return a list of all those elements.

Locating an element by tag name is slightly different from the locating mechanisms we saw earlier. For example, on a  Homepage, if you search for an element with the button tag name, it will result in multiple WebElements because there are nine buttons present on the Homepage. So, it is always advisable to use the findElements() method rather than the findElement() method when trying to locate elements using tag names.

Let's see how the code looks when a search for the number of links present on a  Homepage is made:

@Test
public void byTagNameLocatorExample() {

// get all links from the Home page
List<WebElement> links = driver.findElements(By.tagName("a"));

System.out.println("Found links:" + links.size());

// print links which have text using Java 8 Streams API
links.stream()
            .filter(elem -> elem.getText().length() > 0)
            .forEach(elem -> System.out.println(elem.getText()));
}

In the preceding code, we have used the By.tagName locating mechanism and the findElements() method, which return a list of all the links, that is, the a anchor tags defined on the page. On line five,  we printed the size of the list, and then printed text of only links where the text has been provided. We use the Java 8 Stream API to filter the element list and output the text value by calling the getText() method. This will generate the following output:

Found links:88
 ACCOUNT
 CART
 WOMEN
 ...

WebDriver uses XPath to identify a WebElement on the web page. Before we see how it does that, let's quickly look at the syntax for XPath. XPath is a short name for the XML path, the query language used for searching XML documents. The HTML for our web page is also one form of the XML document. So, in order to identify an element on an HTML page, we need to use a specific XPath syntax:

So, we need to pass the XPath expression to the By.xpath locating mechanism to make it identify our target element. 

Now, let's see the code example and how WebDriver uses this XPath to identify the element:

@Test
public void byXPathLocatorExample() {
    WebElement searchBox = 
driver.findElement(By.xpath("//*[@id='search']"));
searchBox.sendKeys("Bags");
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Bags'");
}

In the preceding code, we are using the By.xpath locating mechanism and passing the XPath of the WebElement to it.

One disadvantage of using XPath is that it is costly in terms of time. For every element to be identified, WebDriver actually scans through the entire page, which is very time consuming, and too much usage of XPath in your test script will actually make it too slow to execute.

The By.cssSelector() method is similar to the By.xpath() method in its usage, but the difference is that it is slightly faster than the By.xpath locating mechanism. The following are the commonly used syntaxes to identify elements:

Let's try to modify the previous code, which uses the XPath locating mechanism to use the cssSelector mechanism:

@Test
public void byCssSelectorLocatorExample() {
    WebElement searchBox = 
driver.findElement(By.cssSelector("#search"));
searchBox.sendKeys("Bags");
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Bags'");
}

The preceding code uses the By.cssSelector locating mechanism, which uses the css selector ID of the Search box.

Let's look at a slightly complex example. We will try to identify the About Us on the Homepage:

@Test
public void byCssSelectorLocatorComplexExample() {

    WebElement aboutUs =
driver.findElement(By
                    .cssSelector("a[href*='/about-magento-demo-store/']"));

aboutUs.click();

assertThat(driver.getTitle())
            .isEqualTo("About Us");
}

The preceding code uses the cssSelector() method to find the anchor element identified by its href attribute.

The getAttribute method can be executed on all the WebElements. Remember, we have seen attributes of WebElement in the WebElements section. The HTML attributes are modifiers of HTML elements. They are generally key-value pairs that appear in the start tag of an element. For example:

<labelname="Username"id="uname">Enter Username: </label>

In the preceding code, name and id are the attributes or attribute keys and Username and uname are the attribute values.

The API syntax of the getAttribute() method is as follows:

java.lang.String getAttribute(java.lang.String name)

In the preceding code, the input parameter is String, which is the name of the attribute. The return type is again String, which is the value of the attribute.

Now let's see how we can get all the attributes of a WebElement using WebDriver. Here, we will make use of the Search box from the example application. This is what the element looks like:

<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">

We will list all the attributes of this WebElement using WebDriver. The code for that is as follows:

@Test
public void elementGetAttributesExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Name of the box is: "
+ searchBox.getAttribute("name"));
System.out.println("Id of the box is: " + searchBox.getAttribute("id"));
System.out.println("Class of the box is: "
+ searchBox.getAttribute("class"));
System.out.println("Placeholder of the box is: "
+ searchBox.getAttribute("placeholder"));
}

In the preceding code, the last four lines of code use the getAttribute() method to fetch the attribute values of the name, id, class, and placeholder attributes of the WebElement search box. The output of the preceding code will be following:

 Name of the box is: q
 Id of the box is: search
 Class of the box is: input-text required-entry
 Placeholder of the box is: Search entire store here...

Going back to the By.tagName() method of the previous section, if the search by a locating mechanism, By.tagName, results in more than one result, you can use the getAttribute() method to further filter the results and get to your exact intended element.

The getText method can be called from all the WebElements. It will return visible text if the element contains any text on it, otherwise it will return nothing.  The API syntax for the getText() method is as follows:

java.lang.String getText()

There is no input parameter for the preceding method, but it returns the visible innerText string of the WebElement if anything is available, otherwise it will return an empty string.

The following is the code to get the text present on the Site notice element present on the example application Homepage:

@Test
public void elementGetTextExample() {
    WebElement siteNotice = driver.findElement(By
            .className("global-site-notice"));

System.out.println("Complete text is: "
+ siteNotice.getText());
}

The preceding code uses the getText() method to fetch the text present on the Site notice element, which returns the following:

Complete text is: This is a demo store. Any orders placed through this store will not be honored or fulfilled.

The getCssValue method can be called on all the WebElements. This method is used to fetch a CSS property value from a WebElement. CSS properties can be font-family, background-color, color, and so on. This is useful when you want to validate the CSS styles that are applied to your WebElements through your test scripts. The API syntax for the getCssValue() method is as follows:

java.lang.StringgetCssValue(java.lang.String propertyName)

In the preceding code, the input parameter is the String value of the CSS property name, and the return type is the value assigned to that property name.

The following is the code example to retrieve font-family of the text from the Search box:    

@Test
public void elementGetCssValueExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Font of the box is: "
+ searchBox.getCssValue("font-family"));
}

The preceding code uses the getCssValue() method to find font-family of the text visible in the Search box. The output of the method is shown here:

Font of the box is: Raleway, "Helvetica Neue", Verdana, Arial, sans-serif

The getLocation method can be executed on all the WebElements. This is used to get the relative position of an element where it is rendered on the web page. This position is calculated relative to the top-left corner of the web page of which the (x, y) coordinates are assumed to be (0, 0). This method will be of use if your test script tries to validate the layout of your web page.

The API syntax of the getLocation() method is as follows:

Point getLocation()

The preceding method obviously doesn't take any input parameters, but the return type is a Point class that contains the (x, y) coordinates of the element.

The following is the code to retrieve the location of the Search box:

WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Location of the box is: "
+ searchBox.getLocation());

The output for the preceding code is the (x, y) location of the Search box, as shown in the following screenshot:

Location of the box is: (873, 136)

The getSize method can also be called on all the visible components of HTML. It will return the width and height of the rendered WebElement. The API syntax of the getSize() method is as follows:

Dimension getSize()

The preceding method doesn't take any input parameters, and the return type is a class instance named Dimension. This class contains the width and height of the target WebElement. The following is the code to get the width and height of the Search box:

WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Size of the box is: "
+ searchBox.getSize());

The output for the preceding code is the width and height of the Search box, as shown in the following screenshot:

Size of the box is: (281, 40) 

The getTagName method can be called from all the WebElements. This will return the HTML tag name of the WebElement. For example, in the following HTML code, the button is the tag name of the HTML element:

<buttonid="gbqfba"class="gbqfba"name="btnK"aria-label="Google Search">

In the preceding code, the button is the tag name of the HTML element.

The API syntax for the getTagName() method is as follows:

java.lang.String getTagName()

The return type of the preceding method is String, and it returns the tag name of the target element.

The following is the code that returns the tag name of the Search button:

@Test
public void elementGetTagNameExample() {
    WebElement searchButton = driver.findElement(By.className("search-button"));
System.out.println("Html tag of the button is: "
+ searchButton.getTagName());
}

The preceding code uses the getTagName() method to get the tag name of the Search button element. The output of the code is as expected:

Html tag of the button is: button

ThesendKeys  action is applicable for textbox or textarea HTML elements. This is used to type text into the textbox. This will simulate the user keyboard and types text into WebElements exactly as a user would. The API syntax for the sendKeys() method is as follows:

void sendKeys(java.lang.CharSequence...keysToSend)

The input parameter for the preceding method is CharSequence of text that has to be entered into the element. This method doesn't return anything. Now, let's see a code example of how to type a search text into the Search box using the sendKeys() method:

@Test
public void elementSendKeysExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys("Phones");
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Phones'");
}

In the preceding code, the sendKeys() method is used to type the required text in the textbox element of the web page. This is how we deal with normal keys, but if you want to type in some special keys, such as Backspace, Enter, Tab, or Shift, we need to use a special enum class of WebDriver, named Keys. Using the Keys enumeration, you can simulate many special keys while typing into a WebElement.

Now let's see some code example, which uses the Shift key to type the text in uppercase in the Search Box:

@Test
public void elementSendKeysCompositeExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
searchBox.submit();
assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'PHONES'");
}

In the preceding code, the chord() method from the Keys enum is used to type the key, while the text specified is being given as an input to be the textbox. Try this in your environment to see all the text being typed in uppercase.

The clear action is similar to the sendKeys() method, which is applicable for the textbox and textarea elements. This is used to erase the text entered in a WebElement using the sendKeys() method. This can be achieved using the Keys.BACK_SPACE enum, but WebDriver has given us an explicit method to clear the text easily. The API syntax for the clear() method is as follows:

void clear()

This method doesn't take any input and doesn't return any output. It is simply executed on the target text-entry element.

Now, let's see how we can clear text that is entered in the Search box. The code example for it is as follows:

@Test
public void elementClearExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
searchBox.clear();
}

We have used the WebElement's clear() method to clear the text after typing phones into the Search box.

The submit() action can be taken on a Form or on an element, which is inside a Form element. This is used to submit a form of a web page to the server hosting the web application. The API syntax for the submit() method is as follows:

void submit()

The preceding method doesn't take any input parameters and doesn't return anything. But a NoSuchElementException is thrown when this method is executed on a WebElement that is not present within the form.

Now, let's see a code example to submit the form on a Search page:                                       

@Test
public void elementSubmitExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
searchBox.submit();
}

In the preceding code, toward the end is where the Search form is submitted to the application servers using the submit() method. Now, try to execute the submit() method on an element, let's say the About link, which is not a part of any form. We should see NoSuchElementException is thrown. So, when you use the submit() method on a WebElement, make sure it is part of the Form element.

The isDisplayed action verifies whether an element is displayed on the web page and can be executed on all the WebElements. The API syntax for the isDisplayed() method is as follows:

boolean isDisplayed()

The preceding method returns a Boolean value specifying whether the target element is displayed on the web page. The following is the code to verify whether the Search box is displayed, which obviously should return true in this case:

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Search box is displayed: "
+ searchBox.isDisplayed());
}

The preceding code uses the isDisplayed() method to determine whether the element is displayed on a web page. The preceding code returns true for the Search box:  

Search box is displayed: true

The isEnabled action verifies whether an element is enabled on the web page and can be executed on all the WebElements. The API syntax for the isEnabled() method is as follows:

boolean isEnabled()

The preceding method returns a Boolean value specifying whether the target element is enabled on the web page. The following is the code to verify whether the Search box is enabled, which obviously should return true in this case:    

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Search box is enabled: "
+ searchBox.isEnabled());
}

The preceding code uses the isEnabled() method to determine whether the element is enabled on a web page. The preceding code returns true for the Search box:  

Search box is enabled: true 

The isSelected method returns a boolean value if an element is selected on the web page and can be executed only on a radio button, options in select, and checkbox WebElements. When executed on other elements, it will return false. The API syntax for the isSelected() method is as follows:

boolean isSelected()

The preceding method returns a Boolean value specifying whether the target element is selected on the web page. The following is the code to verify whether the Search box is selected on a search page:

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Search box is selected: "
+ searchBox.isSelected());
}

The preceding code uses the isSelected() method. It returns false for the Search box, because this is not a radio button, options in select, or a checkbox. The preceding code returns false for the Search box:

Search box is selected: false