A Detailed Introduction To Selenium: Using The Class Name Locator In Selenium

What is Selenium and what is it used for?

Macbook with lines of code on it's screen — Image source: Unsplash.com

Selenium is an open source software that is used to test and validate applications on the web across different varieties of platforms and web browsers. It was originally developed by Jason Huggins in 2004 to function as an internal tool at a firm called Thought Works. The platform offers testers accessibility through multiple languages like Java, Python, JavaScript, C#, Perl and Ruby. Usually, the testing that is done through Selenium is known as Selenium testing. However, contrary to popular belief, this software is not just a single tool. Instead, it is a suite of other software tools that work together. All these tools are often required by a tester to make software validated across several browsers and parameters. Here are some of the tools that Selenium incorporates within itself:

Selenium Remote Control
WebDriver
Selenium Grid

Selenium Integrated Development Environment

Selenium can and is being used to automate functional tests. It can also be integrated with automation test tools like Maven, Jenkins and Docker to achieve the phenomenon of continuous testing. It can be integrated very well with tools that already exist in this field—for instance, TestNG and JUnit to manage test cases and generate reports.

Getting started with Selenium for automated website testing

Selenium is specifically designed to automate testing for your website automation tests. A short Selenium test might confirm that a browser might load a page at all, while a more complex test could automate an entire journey right from the log-in to the shopping cart. Selenium basically has a client-server architecture that includes components from both sides. The Selenium Client includes the following components:

The WebDriver API which lets the user develop test scripts to interact with the page and elements from the application
The RemoteWebDriver class, which communicates with a remote Selenium server

On the other hand, the Selenium Server includes the following elements:

A component from the server which helps it to receive various requests from the server
The WebDriver API, to run tests against web browsers on a server machine
A Selenium Grid that is implemented and created by the Selenium server that is in -command line options for grid features. This includes a central hub and the creation of various nodes for different environments and other required browser capability functionalities. Here are the seven basic elements of a Selenium test script. You have to apply all these elements to the test case that you are devising:

Creation of a WebDriver instance
Navigation to a web page
Locating an HTML element on the web page
Performing an action directly on the HTML element
Expecting and anticipating the browser response to the action
Running tests and recording those test results with the help of a test framework
Concluding the test

Web automation testing in Selenium and its advantages to the typical user

The major benefit of using Selenium for web automated testing is that it supports major programming languages like Java, Python, JavaScript, C#, Perl and Ruby. The user has the option of writing in any of these programming languages and Selenium instantly converts the script into compatible codes. With the presence of dedicated frameworks that help in test script writing, with Selenium, you can never go wrong. Another one of the major advantages of using Selenium as the tool for all your web automated testing is that its open source availability adds a lot of value. Since the platform is completely free and accessible, you can get a lot of help by developers and software engineers who are already adept at web automation testing.

Since Selenium’s automation tests are completely versatile in the sense that they can be reused, you can find greater value in the fact that the platform allows you to test across multiple browsers and operating systems simultaneously. For most developers, the main objective and criteria for web automation testing time management and effectiveness. Hence, with tools like Selenium Grid, you can execute multiple and several tests in parallel, which reduces the total test execution time. Selenium also requires less hardware storage than other apps out there (like UFT, SilkTest, QTP). The platform is also really easy to use and learn, providing its users access to web automation at the cost of a few, simple lines of code. With developer and community support, accompanied with updates and bug-fixes rolling out practically every week, Selenium has become the go-to choice for several web automation testers.

Writing a script with the help of CSS selectors in Selenium

We use CSS Selectors in Selenium for a lot of different purposes. It is a combination of a value that is responsible for identifying the web element of a web page and an element selector in Selenium. They are often referred to as string representations of Id and Class, HTML tags and attributes. They are essentially patterns that match against several elements in a tree. CSS Selector can also be used to accurately locate various web elements without ID, Name or class.

CSS locator is one of the most important parts of the procedure of writing the script on Selenium. Being proficient at Selenium automation testing requires a level of adroitness in the usage of CSS locator. Here, we have illustrated using examples how different CSS selectors can be used to locate elements.

Using CSS locators using Class name: An example

In this example, we will attempt to locate the ‘Where’ field in the Airbnb homepage through the class name. Here is a picture of the Airbnb homepage:

You have to use the below syntax in order to use Class name locator in Selenium:

findElement(By.className(“_up0kwni “))

Here is the code that you gave to use to find the elements using Class name in CSS locators:

This looks really simple, right? That’s because it really is.

However, there are some exceptions in using the class name locator in Selenium. This is a common error that you might come across:

This is a fairly common error that is faced by most users. Below is the DOM structure for Facebook that depicts the ‘first name’ field with a class name attribute that is highlighted below:

Below is a referenced code snippet in Selenium that attempts to access this first nae field using the class name locator:

Below is the depiction of a referenced console error that occurs when you’re running this code:

Are you wondering how you’re going to handle this error? Well, you have to be aware of the fact that Selenium considers this as a compound class. This means that multiple classes get marked by using spaces. Hence, any class name that has spaces included in its name will be considered by this program by default

In this case that we’re considering, the class name is marked as ‘inputtext _58mg _5dba _2ph-‘. Since this class has three spaces, hence this will be considered as three different classes. This is the error that we are trying to avoid. Hence, to make it more clear, the error here is that Selenium does not have the ability to find more than one classes simultaneously. In this case, you can consider locating the element by using the CSS selector in Selenium. This is the code snippet:

code snippet from CSS selector in Selenium

The Name locator may or may not be unique on a page, having multiple elements. In any case, if there are elements with the same name in the page, then the locator by default selects the first name on the page, as we have already told you before. Hence, in case no such name matches exactly with the defined attribute value, NoSuchElementException is raised in this case.

For instance, here is a screenshot of the DOM for Lambdatest, wherein the ID locator name in the signup page for the email field is highlighted in the picture

Here is the DOM structure:

Here is the syntax that will help you locate the email field through the name:

driver.findElement(By.name(“email”));

What do we understand from these examples?

By these examples, we can figure out how to use CSS locator in Selenium. By using these examples, we have also figured out a way to overcome complicated scenarios, such that arise when there are multiple classes that exist with the same name. In these examples, you have also learnt about the different kinds of errors that you might encounter and how you can overcome them.

Even though Selenium supports a lot of languages, is there a preferred choice for testers?

There was a developer survey that was conducted in 2019 called the Stack Overflow Annual Developer Survey 2019. According to the results of this survey, C# is one of the most popular programming languages, with 67% people favouring it in their Selenium testing. There was another detailed survey that was conducted in 2020 called the State of Testing Report 2020 which said that 75% of web testers spent their time testing web applications only. Hence, it is natural for them to rely on test automation frameworks like Selenium to reduce the time taken to test each and every software. Not only that, using software like Selenium also reduced the overall turn-around time for test cycles for most of these web application testers.

Hence, we are here to talk about how great C# is for Selenium testing. The best part is that Selenium can support a host of different programming languages, making it a very compatible and versatile software. But, the apparent advantages of using C#, as we are highlighting them below, paint an accurate picture of how using specific programming languages can bring you a better experience overall.

What is C#?

C# is a modern and object-oriented programming language that is popular for its ease of use and efficient development of desktop and web applications using the software. C# is a high-level language. Hence, it is closer to other high-level languages like C, C++ and Java. That is also the reason why it is easy for people to learn. C++ is used widely for web and desktop application development. It is one of the most popular languages to be used in professional desktops. C# also has a large community of developers and other programmers who roll out new tools and updates every now and then. It is also used to target a large audience owing to its seamless integration with Microsoft. Since the language was developed by Microsoft and is based on the .NET framework, there are several reasons why you should consider using it for your Selenium Test Automation. Here are some of the reasons why you should consider using C# for your Selenium test automation.

A history of the usage of C#

Name

It was Microsoft which first used the name C# in 1988 to refer to a variant of the C language that was specifically designed for compilation that was incremental. Even though that project was not completed, that name still lives on in this programming language’s name. The name C Sharp was designed and inspired by the musical notation where a sharp indicates that the concerned note should be made a semitone higher in pitch.

Usage of C# for Selenium web application testing automation: Advantages and perks

Read on to make yourself familiar with some of the groundbreaking benefits that C# has over other languages for Selenium test automation.

Availability of multiple automation frameworks with C#

With Selenium C#, there is a wide availability of automation frameworks that testers can make use of. They can be used for automation browser testing too. Every framework has a different arena of advantages and disadvantages and are chosen for a specific requirement. They are also chosen on the basis of their compatibility and the kind of solution they would prefer. Here is a list of the most widely used Selenium C# frameworks for test automation.

NUnit
Gauge
MSTest
SpecFlow
XUnit

Infinitely easier to maintain code

Testers can use POM Design patterns along with Selenium C# test scripts to maintain their code more efficiently. This is one of the advantages of C# that makes it easier to work with Selenium and increase your productivity simultaneously.

Test writing becomes easier with the availability of a visual studio

C# is being used widely as a language in Selenium because testers can very easily write code with the help of the Visual Studio that is provided. The Visual Studio offers the testers features like IntelliSense, basic refractors, debugging and so on. The Visual Studio IDE gives way to faster development and removal of bugs in the code, eventually giving a boost to the go-to market launch of the application that is being tested. Hence, this advantage of C# gives testers the advantage of being faster and more reliable than their opponents, while snatching away the prize for being first-to-market.

The language can be used to test on numerous different operating systems

Apart from web development of mobile, web and desktop, C# is also used widely for test automation. It provides several networks and testing frameworks to the tester. With the C# programming language, testers and developers can now perform tests on applications that are based on iOS, Android and Windows platforms.

Conclusion

We hope that this article has given you an insight into how Selenium can be used to automate testing and web development of applications. Right from the introduction to Selenium and how to locate class names using CSS locators, we have tried to give you all-round information. We hope that this information helps you. Good luck!