How to Automate Chrome Extension using selenium?

Introduction to Automate Chrome Extension:

Over the years, the landscape of software testing has gradually developed from a predominantly manual testing phase to an increasing accentuation on automated/automation testing. In your career path as a test engineer, you will inevitably bump into automation testing. In the current landscape of the software industry, clients seek frequent and repetitive deployments. If you are in a role of Quality Assurance, you are likely to encounter and test systems needing frequent requirement changes or the rapid introduction of new and progressive requirements. Such a dynamic landscape calls for a constant adaptation to frequent code changes within stiff deadlines. A challenge that we can effectively address by adopting automation testing methodologies.

Why to Automate Chrome Extension:

We often use Chrome extensions in our daily activities, which is crucial for enhancing productivity. The repetitive nature of certain tasks associated with these extensions can become monotonous over time. This blog aims to guide you through the process of automating Chrome extensions and executing click actions using Selenium, a widely acclaimed open-source test automation framework introduced in 2004. If you find yourself needing to use a particular extension regularly, the conventional method involves manually adding the extension to Chrome and performing the same task repeatedly. This manual repetition not only increases effort but also consumes valuable time. Therefore, to streamline this process and save both manual effort and time, we present a precise method to automate Chrome extensions and configure them seamlessly for efficient use.

How to Automate Chrome Extension:

In this article, we will learn the process of Automate Chrome extensions and performing click actions using the Selenium WebDriver and about the Robot Class in Selenium. We will examine them in the Chrome browser using Java. Here we go !!

Before moving on to the main topic of our discussion, let’s quickly review the techniques we will use to Automate Chrome extension and conduct action.

Prerequisite:

Technologies	Download Link
IntelliJ idea IDE	https://www.jetbrains.com/idea/download/#section=windows
Maven	https://maven.apache.org/download.cgi
Java JDK – 11	https://www.oracle.com/in/java/technologies/javase/jdk11-archive-downloads.html
Cucumber-java – 7.11.0	https://mvnrepository.com/artifact/io.cucumber/cucumber-java/7.11.0
Cucumber-core – 7.11.0	https://mvnrepository.com/artifact/io.cucumber/cucumber-core/7.11.0
Selenium-java – 4.8.0	https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java/4.8.0
Webdrivermanager – 5.3.0	https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager/5.3.1
Mofiki’s Coordinate Finder	https://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Mofiki-s-Coordinate-Finder.shtm
Apache Maven – 3.9.0	https://maven.apache.org/download.cgi

Implementation Steps to Automate Chrome Extension:

1. Add Calculator extension to the local Chrome browser.
2. Pack the extension and create a .crx file in File Explorer.
3. Create a Maven project using IntelliJ IDE.
4. Add dependencies in POM.xml file and Add .crx file in resources package.
5. Create Packages and files in the project.
   • 5.1. Creating Features File.
   • 5.2. Creating Steps file.
   • 5.3. Creating Page Object Design Pattern.
   • 5.4. Creating TestContext File.
   • 5.5. Creating BaseStep File.
6. Conclusion

I intend to use simplified language while articulating the concepts. So, let’s dive into the core of our topic, which is how to Automate Chrome extensions and perform click actions using Selenium.

To do this, we will follow a few rules, which I have depicted below as steps.

Step 1: Add Calculator extension to the local Chrome browser.

In this article, we are going to use the Calculator extension to Automate Chrome extension and perform an action on an extension out of the DOM element.

To add calculator extension to local Chrome browser –

• Go to Chrome browser and navigate to the extension page or visit the link below:
  https://chrome.google.com/webstore/category/extensions?hl=en
• On the Extension page find the search box and search for the calculator extension.
• Select calculator first and then download and click on add extension

After adding an extension, visit chrome://extensions/ URL from the address bar and then enable the Developer mode.

Also on this site, we can see our calculator extension which we just added.

On an extension, there could be an Extension ID. We have to note down this extension ID. In the next step, we will learn about generating a folder named extension ID in File Explorer.

In this article Extension ID is hcpbdjanfepobbkbnhmalalmfdmikmbe

Congratulations, we have completed our first step of Adding the Calculator extension to the local automate Chrome browser.

Now let’s begin with the next step.

Step 2: Pack the extension and create a .crx file in File Explorer

Before continuing with the second step we will learn what a .crx file extension is.

What is a .crx file extension?

A Chrome extension file has a .crx extension. It increases the functionality of the Google Chrome web browser by allowing third-party applications to supplement its basic functionality.

Now, we will learn how to pack the calculator extension and generate a .crx file extension.

After adding the calculator extension to the local Chrome browser, the file explorer will generate a folder with the name extension ID (hcpbdjanfepobbkbnhmalalmfdmikmbe). 

Follow the provided path to locate the extension folder –

(to locate AppData we have to enable show hidden folders)
C:➜Users➜{UserName}➜AppData➜Local➜Google➜Chrome➜User➜Data➜Default➜Extensions➜hcpbdjanfepobbkbnhmalalmfdmikmbe➜1.8.2_0

In the extension folder, we will find the folder named Extension ID, which we have noted down here hcpbdjanfepobbkbnhmalalmfdmikmbe is the Extension ID for calculator extension. Open that folder.

In the folder, we can see a version folder of the extension. Open that folder ➜1.8.2_0

Now we have to copy the path as mentioned in below image –

We will use this path to pack the extension in next steps.

Now, launch the Chrome browser and Visit chrome://extensions/ in the address bar

Here we can see the pack extension option.

➜ Click on Pack Extension to automate chrome extension

After visiting the page we will be able to see the Pack Extension option as shown in the below image.

Here we have to type or paste the path that we had copied.

➜Add copied path to the Extension root directory

In this step, we have to paste a copied path to the Extension root directory to pack our Extension and then we have to click on the Pack Extension Button.

➜Copy the path of the .crx file

After clicking on the Pack Extension button a pop-up frame will appear. Here, we can see the path of the .crx file where it has been generated in File Explorer. Remember the path of the .crx file and click on the OK button.

➜ Navigate to the .crx file in file explorer

Now let’s navigate to the path of the .crx file as mentioned in the step above . Once we navigate to the path of the .crx file we can see the file has been generated. We have to use this .crx file in our maven project to display it in the selenium web driver and perform actions on it. 

Congratulations!! We have successfully generated a .crx file.

Step 3: Create a Maven project using Intellij IDE. 

Before creating a Maven project. Let’s understand what Maven is.

What is Maven?

Maven is a Java project management tool that the Apache Software Foundation developed. It is written in Java Language to build projects written in C#, Ruby, Scala, and other languages. It allows developers to create projects, dependencies and documentation using Project Object Model and plugins.

Why do we use Maven?

• Maven is the latest build testing tool and a project management tool.
• It makes the build process very easy (No need to write long scripts).
• It has a standard directory structure which is followed.
• It follows Convention over Configuration.
• It has a remote maven repository with all the dependencies in one place that can be easily downloaded.
• Can be used with other programming languages too, just not Java.

Hope, this now gives a clear view of Maven. Now let’s create a new Maven project using Intellij Idea IDE.

Open your IntelliJ IDE and go to the File ➜ New ➜ Project as shown in the below image.

A new project pop-up will be displayed on the screen, and we must enter the project’s details here.

Details required to create the Maven project are:

1. Name: Provide a suitable name as per your requirement.
2. Location: Choose the location where you want to store your project.
3. Language: Choose the programming language as per your requirement.
4. Build System: Here you have to choose Maven.
5. JDK: Choose the JDK you want to use. (Note: Maven uses a set of identifiers, also called coordinates, to uniquely identify a project and specify how the project artifact should be packaged.)
6. GroupId: a unique base name of the company or group that created the project
7. ArtifactId: a unique name for the project.

Simply, click on the Create button and the Maven project will be created.

After successfully creating the project we can see the structure of the Maven project. Some default files have been created as given in the image below.

Yes !! We have successfully created our Maven project. Let’s move ahead.

Step 4: Add dependencies in POM.xml file and Add .crx file in the resources package.

We shall include Maven dependencies in your project using IntelliJ IDEA. These dependencies need to be mentioned in our pom.xml file for our project build-up.

Below are the dependencies that we need to add to the pom.xml file.

<dependencies>
   <dependency>
       <groupId>io.cucumber</groupId>
       <artifactId>cucumber-java</artifactId>
       <version>7.11.0</version>
   </dependency>
   <dependency>
       <groupId>io.cucumber</groupId>
       <artifactId>cucumber-core</artifactId>
       <version>7.11.0</version>
       <scope>compile</scope>
   </dependency>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.8.0</version>
   </dependency>
   <dependency>
       <groupId>io.github.bonigarcia</groupId>
       <artifactId>webdrivermanager</artifactId>
       <version>5.3.0</version>
   </dependency>
</dependencies>

• selenium-java: Selenium WebDriver library for Java language binding
• cucumber-java: Cucumber JVM library for Java language binding.
• webdrivermanager: library to automatically manage and set up all the drivers of all browsers which are in test scope.

After adding dependencies in the pom.xml file we have to add the .crx file to the resources directory, .crx file is the file that we have generated in step 2.

To add the .crx file to the resources directory, copy the file from the file explorer and paste it into the resources directory. We can also rename the .crx file as we want. 

For renaming the file, right-click on the file ➜ select the refactor option ➜ then click on the rename option.

As shown in the above image, the rename pop-up will flash on the screen. Here we can give the file name as desired.

Here in this project, I am renaming the .crx file with the CalculatorExtension.crx file.

Step 5: Create Packages and files in the project to automate chrome extension.

After adding dependencies to the pom.xml file. We have to create a BDD framework that includes packages and files. Before moving ahead, let’s first get an overview of the Cucumber BDD framework.

What is the Cucumber Behavior Driven Development (BDD)Framework?

Cucumber is a Behavior Driven Development (BDD) framework tool for writing test cases. It is a testing tool that supports Behavior Driven Development (BDD). It offers a way to write tests that anybody can understand, regardless of their technical knowledge. In BDD, users (business analysts and product owners) first write scenarios or acceptance tests that describe the behavior of the system from the customer’s perspective. These scenarios and acceptance tests are then reviewed and approved by the product owners. The Cucumber framework uses Ruby as programming language.

To manage our code files for the project we need to create packages that are as follows: 

• Features Package – All feature files are contained in this package.
• Steps Package – All step definition files are included in this package.
• Pages Package – All page files are included in this package.
• Utilities Package – All configuration files are included in this package.

Now, we have to create a feature file,

5.1: Creating Features File: 

Features file contains a high-level description of the Test Scenario in simple language. It is known as Gherkin. Gherkin is a plain English text language

Cucumber Feature File consists of following components –

• Feature: We use “Feature” to describe the current test script that needs execution.
• Scenario: We use Scenario to describe the steps and expected outcome for a particular test case.
• Given: We use “Given” to specify the context of the text to be executed. We can parameterize steps by using data tables “Given”
• When: “When” indicates the test action that we have to perform.
• Then: We represent the expected outcome of the test with “Then”

We need to add the below code in the feature file for our project.

Feature: Calculator Extension
 Scenario: User want to add 2 number by using calculator extension
   Given User clicks on the extension icon
   And User clicks on the calculator extension
   When User clicks on number 9
   And User clicks on "+" operator
   And User clicks on number 2
   And User clicks on "=" operator
   Then User sees the result 11

According to the above feature file, we are adding two numbers. To open the Chrome WebDriver and add a calculator extension, we use a GIVEN file. With the use of ‘WHEN’ and ‘AND’ annotations, we are executing click actions on the calculator extension, with which we are adding two numbers from the calculator. In the final step, we are using the ‘THEN’ annotation to verify the result (the addition of two numbers).

5.2: Creating Steps file.

Steps Definition to automate chrome extension-

Step definition maps the Test Case Steps in the feature files (introduced by Given/When/Then) to code. It executes the steps on Application Under Test and checks the outcomes against expected results. For a step definition to execute, it requires matching the “Given” component in a Feature.

Here in the step file, we are mapping the steps from the feature file. In simple words, we are making a connection between the steps of the feature file and with step file. While mapping the steps we have to take care about the format of mapping the steps in step definition. We need to use the below format to map the steps for the feature we had created in the features file.

package Steps;
import Pages.CalculatorPage;
import Utilities.TestContext;
import io.cucumber.java.en.And;
import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;

import java.awt.*;

public class CalculatorStep extends TestContext {

   CalculatorPage calculatorPage;

   public CalculatorStep() throws AWTException { calculatorPage = new CalculatorPage(driver); }

   @Given("User clicks on the extension icon")
   public void User_clicks_on_the_extension_icon() throws InterruptedException {
       calculatorPage.User_clicks_on_the_extension_icon();
   }
   @And("User clicks on the calculator extension")
   public void userClicksOnTheCalculatorExtension() throws InterruptedException {
       calculatorPage.userClicksOnTheCalculatorExtension();
   }
   @When("User clicks on number {int}")
   public void User_clicks_on_number(int number) throws InterruptedException {
       calculatorPage.User_clicks_on_number(number);
   }

   @And("User clicks on {string} operator")
   public void userClicksOnOperator(String operator) throws InterruptedException {
       calculatorPage.userClicksOnOperator(operator);
   }

   @Then("User sees the result {int}")
   public void userSeesTheResult(int result) throws InterruptedException {
       calculatorPage.userSeesTheResult(result);
   }
}

5.3: Creating Page Object Design Pattern

Till now we have successfully created a feature file and a step file. Now in this step, we will be creating a page file. Page file contains all the logic of the test cases. Generally, in Web automation, we have page files that contain the locators and the actions to perform on the web elements but in this framework, we are not using the locators because as we know extension is not in the DOM(Document Object Model) element as it is outside the DOM element. So we will only create the methods and for those methods, we will be using Robot class and X and Y coordinates.

Here in this code, we are performing the activities that are hovering by the mouse actions(move, press, release), clicking on the calculator extension, clicking on the two numbers from the calculator, clicking on the calculator’s “+” addition operator, and obtaining the result of the addition of those two numbers.

What is the Robot Class in Selenium?

Robot Class in Selenium is used to enable automated testing for implementations of the Java platform. It generates input events in native systems for test automation, self-running demos, and other applications where users need control over the mouse and keyboard. Selenium Webdriver was unable to handle these pop-ups or applications and extensions. So a robot class was introduced in Java versions 1.3 and above, that can handle OS pop-ups or applications and extensions.

Robots help in managing all the activities like performing the task within the specified time, handling the mouse functions and the keyboard functions, and many more

While we are using the robot class, it requires the x and y coordinates of the element of the screen on which we will be performing the actions i.e hovering the cursor and then performing click actions.To find the coordinates we are using the Mofiki’s Coordinate finder.

What is Mofiki’s Coordinate Finder?

Mofiki’s Coordinate Finder finds out the present x and y coordinates of our cursor by hovering the mouse anywhere on the screen with the help of the application Mofiki’s Coordinate Finder, which is available for free download. 

Steps to download and use Mofiki’s Coordinate Finder:-

• Visit the link below to download Mofiki’s Coordinate Finder application zip file.
  https://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Mofiki-s-Coordinate-Finder.shtml
• Download the zip file of Mofiki’s Coordinate Finder application
• Extract the Mofiki’s Coordinate Finder zip file and install the application setup.
• Now open the Mofiki’s Coordinate Finder application. Use the image below as an illustration.

Now to find the x and y coordinates move the cursor to the point and just press the space bar we can get the x and y coordinates

package Pages;
import Utilities.TestContext;
import org.openqa.selenium.WebDriver;
import java.awt.*;
import java.awt.event.InputEvent;
import java.util.Objects;
public class CalculatorPage extends TestContext {
   public CalculatorPage(WebDriver driver) throws AWTException {
       TestContext.driver = driver;
   }
   public Robot robot = new Robot();

   public void User_clicks_on_the_extension_icon() throws InterruptedException {
       Thread.sleep(5000);
       robot.mouseMove(1250, 48);
       Thread.sleep(2000);
       robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
       robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
   }

   public void userClicksOnTheCalculatorExtension() throws InterruptedException {
       Thread.sleep(3000);
       robot.mouseMove(1000, 190);
       Thread.sleep(2000);
       robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
       robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
       Thread.sleep(10000);
   }

   public void User_clicks_on_number(int number) throws InterruptedException {
       Thread.sleep(3000);
       if(number == 0){robot.mouseMove(964, 450);}
       else if (number == 1) {robot.mouseMove(969, 390);}
       else if (number == 2) {robot.mouseMove(1020, 391);}
       else if (number == 3) {robot.mouseMove(1087, 395);}
       else if (number == 4) {robot.mouseMove(964, 334);}
       else if (number == 5) {robot.mouseMove(1023, 336);}
       else if (number == 6) {robot.mouseMove(1080, 334);}
       else if (number == 7) {robot.mouseMove(965, 282);}
       else if (number == 8) {robot.mouseMove(1023, 278);}
       else if (number == 9) {robot.mouseMove(1089, 278);}
       else { System.out.println("Number Invalid"); }
       Thread.sleep(2000);
       robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
       robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
       Thread.sleep(10000);
   }

   public void userClicksOnOperator(String operator) throws InterruptedException {
       Thread.sleep(3000);
       if(Objects.equals(operator, "+")){robot.mouseMove(1139, 446);}
       else if (Objects.equals(operator, "-")) {robot.mouseMove(1137, 386);}
       else if (Objects.equals(operator, "*")) {robot.mouseMove(1137, 331);}
       else if (Objects.equals(operator, "/")) {robot.mouseMove(1138, 272);}
       else if (Objects.equals(operator, "=")) {robot.mouseMove(1199, 446);}
       else {System.out.println("Invalid Operator");}
       Thread.sleep(2000);
       robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
       robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
       Thread.sleep(10000);
   }

   public void userSeesTheResult(int result) {
       System.out.println("Result should be "+ result);
   }
}

5.4: Creating TestContext File.

Now, In the Utilities package we have to create a TestContext file in which we can declare a webdriver. Declaring the webdriver as public allows initialization in every class file after inheriting the TestContext class. The step file and page file inherit the testContext class file. Also, we have declared Robot class here.

package Utilities;

import org.openqa.selenium.WebDriver;

import java.awt.*;

public class TestContext {
   public static WebDriver driver;

   public static Robot robot;
}

5.5: Creating BaseStep File:

This step is very important because we will be creating an environment file (i.e. Hooks file) and also we are using Chrome Options to add Calculator extensions.

Before moving ahead let’s understand about Before and After Hook and Chrome Options

What is Before and After Hooks?

Hooks allow us to better manage the code workflow and help us reduce code redundancy. We can say that it is an unseen step, which allows us to perform our scenarios or tests.

@Before – Before hooks run before the first step of each scenario.

@After – Conversely After Hooks run after the last step of each scenario even when steps fail, are undefined, pending, or skipped.

What are Chrome Options?

For managing different Chrome driver properties, Selenium WebDriver has a concept called the Chromeoptions Class. For modifying Chrome driver sessions, the Chrome options class is typically combined with Desired Capabilities. Eventually it enables you to carry out numerous tasks, such as launching Chrome in maximized mode, turning off installed extensions, turning off pop-ups, etc.

At this instant we have to create Before and After Hooks. At the same time each hook should contain a void method as shown in the below code.

In the Before Hook, we have to initialize the webdriver. Also, we have to add simple lines of code to add extensions to the webdriver. To add the extensions we are using Chrome Options to Automate Chrome Extension. Then in the After Hook, we are closing the webdriver.

Now, we have to create a Base Step which should have driver configuration and hooks

package Utilities;

import io.cucumber.java.After;
import io.cucumber.java.Before;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.chrome.ChromeOptions;

import java.io.File;

public class BaseStep extends TestContext{
   @Before
   public void initCucWeb()
   {
       ChromeOptions options = new ChromeOptions();
       options.addExtensions(new File("src/test/Resources/CalculatorExtension.crx"));
       options.addArguments("--remote-allow-origins=*");
       options.setCapability(ChromeOptions.CAPABILITY,options);
       driver = WebDriverManager.chromedriver().capabilities(options).create();
       driver.manage().window().maximize();
   }
   @After
   public void closeWeb()
   {
       driver.quit();
   }
}

Please find attached the GitHub repository link. I have uploaded the same project to this repository. I have also attached a Readme.md file that explains the framework and the different commands we have used so far in this project.

https://github.com/spurqlabs/ChromeExtensionAutomation.git

Conclusion:

It is a very difficult task to add an extension to a web driver and perform an action on extension icons. So basically, in this article, we have found a solution to add an Automate Chrome Extension to Webdriver and to perform a Click action on the extension icon apart from learning to Automate Chrome extension using the Selenium Webdriver.

5