As you get more familiar and comfortable with Selenium WebDriver, you will notice that majority of the issues lie with identifying objects in the UI. Since developers tend to design the UI in different ways, as an automation expert, it is your job to find a way to correctly identify objects in the UI.

Some of the pain points are:

• when multiple objects have the same class name
• when objects have multiple classes
• when objects are embedded deep within <div> and other tags
• when objects do not have traditional ways of identification

With a bit of research, you should be able to successfully identify all of the objects.

Google search is a classic example where the above issues are present. Hence being able to automate the Google search page will be quite instrumental in developing skills as an automation tester.

The automation process will involve the following steps:

1. Open http://www.google.com page in Firefox
2. In the search box, type the text “Pluralsight”
3. Click Enter
4. This shows the list of Pluralsight search results
5. Click the “Images” link at the top of the page
6. This will show all Pluralsight images
7. Click the first Pluralsight image
8. The image is opened in the same tab

Please refer to the below url for an understanding of how to setup Visual Studio for Selenium Automation with C#.

https://www.guru99.com/selenium-csharp-tutorial.html

Assuming that you are now ready to automate in Visual Studio, let’s open the web page in Firefox browser (step-1). The first task is to identify the search box object. Right click on the search box and select Inspect Element.

As you can see, the search box can be uniquely identified using the <Id> tag where “Id = lst-ib”.

Now type the text “Pluralsight” in the search box (step-2) and click Enter (step-3).

The code for opening the webpage, typing the text and then clicking Enter is as below. Note that after opening the url, I have automated for the browser to maximise.

Google search will return a list of results (step-4).

 

To click the link called “Images” at the top of the page (highlighted in red rectangle), we need to identify this object.

Looking at the element inspection, we can see that the “Images” text is embedded within the following <div> tag.

<div id = “hdtb-msb-vis”>

Under this <div>, we have multiple <div> with the same class name.

<div class = “hdtb-mitem hdtb-imb”>

Each of these <div> with the same class name has multiple classes. The class name separated by a space indicates that the <div> tags have two classes: “hdtb-mitem” and “hdtb-imb”.

Under one of the <div class=”hdtb-mitem hdtb-imb”> tag is the required <a> tag.

<a class =”q qs”>

Same as before, a space indicates that <a> tag has two classes: “q” and “qs”.

Note that there are other <div class = “hdtb-mitem hdtb-imb”> with <a class = “q qs”> tags. So how do you find the Images link object?

To identify “Images” text and click it (step-5), you need to use the below code snippet. Note how the <a> is identified by the full XPath. In order to correctly identify the <a> tag, you have to use both multiple class name within single quote and the text “Images”.

//div[Identified by Id]/div[identified by multiple class]/a[identified by multiple class and the text “Images”].

This will result in Google showing all Pluralsight related images (step-6).

Identify the first image (element inspection shows that it can be uniquely identified by Id = “sO9K3DdA00QfNM:”) and click it using the below code snippet (step-7).

This shows the image (step-8) and automation completes.

The full C# code is shown below.

Easy, right?