Automate UI Tests With Selenium

Write Your First Test Script for Selenium UI Testing

In this section, we will write a test script to automate UI Tests with Selenium on the TestMu AI E-commerce Playground.

We will use Chrome Browser version 122 and the Windows 10 Operating System to perform Selenium UI Testing. The required pom.xml file for our Selenium project using TestNG is:-

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>Lambdatest</groupId>
 <artifactId>Example</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>
 <name>project</name>
 <url>http://maven.apache.org</url>
 <properties>
   <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 </properties>
 <dependencies>
   <dependency>
   	<groupId>org.testng</groupId>
   	<artifactId>testng</artifactId>
  	<version>7.9.0</version>
   	<scope>test</scope>
   </dependency>
   <dependency>
   	<groupId>org.seleniumhq.selenium</groupId>
   	<artifactId>selenium-chrome-driver</artifactId>
   	<version>4.17.0</version>
   </dependency>
 </dependencies>
</project>

Code Walkthrough:

The model version of the pom.xml file we are using is 4.0.0. The groupId “TestMu AI”, artifactId “Example”, and version “0.0.1-SNAPSHOT” are together used to identify the project across all the projects uniquely.

The project-specific properties like encoding of the source file is UTF-8.

We are importing the required dependencies like TestNG and Selenium Chrome Driver for our project. Ensure that the version of the dependencies must be according to the system requirements.

UI Testing using Name Attribute

In this section, we will perform UI testing on the Search Bar using the name attribute.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the Search Bar using Name.

• Verify whether the Search Bar exists or not.
• Close the web browser.

Implementation:

package demo

// Importing necessary Selenium libraries
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;

// Class declaration for DemoClass
public class DemoClass {
	
	@Test
	 
	public void title_test() {
                        // Initializing ChromeDriver, for any other browser use its respective driver class
	           WebDriver driver = new ChromeDriver();

                         // Opening the LambdaTest E-Commerce Playground
	            driver.get("https://ecommerce-playground.lambdatest.io/");
 
                         // Locating the search input element by its name attribute
		WebElement searchResults = driver.findElement(By.name("search"));

                          // Asserting that the searchResults element is not null
	              Assert.assertNotNull(searchResults);

                          // Closing the WebDriver and terminating the browser session.
		driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<!-- The XML suite file defines the structure of TestNG test suites -->
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

This above TestNG XML suite file defines a suite containing a single test, which include the class DemoClass from the demo package. The purpose of this XML file is to configure and organize the execution of test cases in a Java project using TestNG. It allows us to specify which test classes to run, in which order, and with what configurations. This kind of configuration is essential for automated testing to ensure that the tests are executed correctly and efficiently.

Output Screen:

UI Testing using Class Attribute

Here, we will perform UI testing using a Class attribute to check whether the UI is working perfectly.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the “Desktops” element on the UI using Class Attribute.

• Retrieve the “Desktop” text using the getText() method.
• Verify whether the assertion is true or not by comparing retrieved text with the user input.
• Close the web browser.

Implementation:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;

public class DemoClass {
	
	@Test
	public void title_test() {

                /* Initializing ChromeDriver, for any other browser, use its respective driver class */
	         WebDriver driver = new ChromeDriver();

               // Opening the LambdaTest E-Commerce Playground
              driver.get("https://ecommerce-playground.lambdatest.io/");

              /* Retrieving the text of a "Desktop" element by locating using className attribute */
	        String val = driver.findElement(By.className("figure-caption")).getText();

              // Verifying the Outcomes
              Assert.assertEquals( val, "Desktops");

             // Closing the WebDriver and terminating the browser session.
	       driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<!-- The XML suite file defines the structure of TestNG test suites -->
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen:

UI Testing using ID Attribute

Here, we will perform UI testing using the ID attribute to check whether the UI is working perfectly or not.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the “TOP PRODUCTS” element on the UI using ID Attribute.

• Retrieve the “TOP PRODUCTS” text using the getText() method.
• Verify whether the assertion is true or not by comparing retrieved with the user input.
• Close the web browser.

Implementation:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;


public class DemoClass {
	
	@Test
	 
	public void title_test() {

               /* Initializing ChromeDriver, for any other browser, use its respective driver class */
	        WebDriver driver = new ChromeDriver();

              // Opening the LambdaTest E-Commerce Playground                   
              driver.get("https://ecommerce-playground.lambdatest.io/");
               /* Retrieving the text of a "TOP PRODUCTS" element by locating using ID attribute */
	       String val = driver.findElement(By.id("entry_213258")).getText();

               // Verifying the Outcomes
	         Assert.assertEquals( val, "TOP PRODUCTS");
              // Closing the WebDriver and terminating the browser session.
	         driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<!-- The XML suite file defines the structure of TestNG test suites -->
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen:

UI Testing using CSS Selector

Here, we will perform UI testing using CSS Selector to fetch the data and check whether it is true or not.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the “TOP TRENDING CATEGORIES” element on the UI using CSS Attribute.

• Retrieve the “TOP TRENDING CATEGORIES” text using the getText() method.
• Verify whether the assertion is true by comparing retrieved text with the user input.
• Close the web browser.

Implementation:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;

public class DemoClass {
	
	@Test
	 
	public void title_test() {
 
                      /* Initializing ChromeDriver, for any other browser, use its respective driver class */
	          WebDriver driver = new ChromeDriver();

                // Opening the LambdaTest E-Commerce Playground
	          driver.get("https://ecommerce-playground.lambdatest.io/");

                /* Retrieving the text of a "TOP TRENDING CATEGORIES" element by locating using cssSelection attribute */
		String val = driver.findElement(By.cssSelector(".module-title")).getText();

              // Verifying the Outcomes
		Assert.assertEquals( val, "SEARCH");

             // Closing the WebDriver and terminating the browser session.
		driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<!-- The XML suite file defines the structure of TestNG test suites -->
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen:

We can see the test case failed as the fetched data “TOP TRENDING CATEGORIES” did not match with User input data “SEARCH”. Now, we will provide the correct data as input to check whether our assertion will pass or fail.

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;

public class DemoClass {
	
	@Test
	 
	public void title_test() {

                      /* Initializing ChromeDriver, for any other browser, use its respective driver class */
	         WebDriver driver = new ChromeDriver();

               // Opening the Lambdatest E-Commerce Playground
	         driver.get("https://ecommerce-playground.lambdatest.io/");

               /* Retrieving the text of a “TOP TRENDING CATEGORIES” element by locating using cssSelection attribute */

	         String val = driver.findElement(By.cssSelector(".module-title")).getText();

               // Verifying the Outcomes
	         Assert.assertEquals( val, "TOP TRENDING CATEGORIES");

              // Closing the WebDriver and terminating the browser session.
	          driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen:

The user’s test cases passed, as our fetched data “TOP TRENDING CATEGORIES” matched with the user input data.

UI Testing Using Link Text

Here, we will perform UI testing using the Link Text attribute to verify the hyperlink text.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the “HTC Touch HD” element on the UI using Link Text.

• Retrieve the “HTC Touch HD” text using the getText() method.
• Verify whether the assertion is true or not by comparing retrieved text with the user input.
• Close the web browser.

Implementation:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;


public class DemoClass {
	
	@Test
	 
	public void title_test() {

               /* Initializing ChromeDriver, for any other browser, use its respective driver class */
               WebDriver driver = new ChromeDriver();

                // Opening the LambdaTest E-Commerce Playground
                driver.get("https://ecommerce-playground.lambdatest.io/");
                /* Retrieving the text of a "HTC Touch HD" element by locating using linkText attribute */
		   String val = driver.findElement(By.linkText("HTC Touch HD")).getText();

              // Verifying the Outcomes
		  Assert.assertEquals( val, "HTC Touch HD");

             // Closing the WebDriver and terminating the browser session.
		  driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<!-- The XML suite file defines the structure of TestNG test suites -->
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen:

UI Testing using XPath

Here, we will perform UI testing using the XPath attribute to verify the heading.

Test Scenario:

• Launch the Chrome browser.
• Open the TestMu AI E-Commerce Playground.
• Locate the “FROM THE BLOG” element on the UI using XPath.

Retrieve the “FROM THE BLOG” text using the getText() method.

• Verify whether the assertion is true or not by comparing retrieved text with the user input.
• Close the web browser.

Implementation:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;


public class DemoClass {
	
	@Test
	 
	public void title_test() {

                /* Initializing ChromeDriver, for any other browser, use its respective driver class */
	          WebDriver driver = new ChromeDriver();
                        
               // Opening the LambdaTest E-Commerce Playground
	         driver.get("https://ecommerce-playground.lambdatest.io/");
   
               /* Retrieving the text of a "FROM THE BLOG" element by locating using XPath */
		String val = driver.findElement(By.xpath("//*[@id="entry_213271"]/h3")).getText();

            // Verifying the Outcomes
		Assert.assertEquals( val, "FROM THE BLOG");

            // Closing the WebDriver and terminating the browser session.
		driver.quit();
	  
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite">
  <test name="Test">
   <!-- Classes element contains the classes to be included in the test -->
    <classes>
       <!-- Reference to the DemoClass test class -->
      <class name="demo.DemoClass"/>
    </classes>
  </test> <!-- End of Test -->
</suite> <!-- End of Suite -->

Output Screen: