Automate TOTP 2-Factor Authentication (2FA) with Playwright

Automate TOTP 2-Factor Authentication (2FA) with Playwright

Understanding 2FA Authenticator Apps and Time-based One-Time Passwords (TOTP)

2FA Login using TOTP: In an era where cybersecurity is paramount, two-factor authentication (2FA) has become a cornerstone of online security. Authenticator apps and Time-based One-Time Passwords (TOTP) offer an additional layer of protection beyond traditional password-based security measures. This guide aims to elucidate the concept of 2FA authenticator apps, delve into the workings of TOTP, and provide insights into their importance in digital security. 

2FA Authentication Image

What are 2FA Authenticator Apps?

Authenticator apps generate time-based one-time passwords (TOTPs) on mobile devices for authentication. They serve as a secure means of implementing 2FA, requiring users to provide both something they know (their password) and something they have (their mobile device with the authenticator app installed). 

How Do 2FA Authenticator Apps Work? 

How 2FA Authentication works
  1. Initialization: When setting up 2FA for an online account, users typically scan a QR code or manually enter a secret key provided by the service into their authenticator app. 
  1. Code Generation: Once initialized, the authenticator app generates TOTPs based on a shared secret key and the current time. These TOTPs are typically six-digit codes that change every 30 seconds. 
  1. Authentication: During login, users enter the current TOTP from their authenticator app along with their password. The service verifies the entered TOTP against the expected value based on the shared secret key. 

Time-based One-Time Passwords (TOTP): 

TOTP generates short-lived authentication codes using a shared secret key and the current time. The algorithm combines the secret key with the current time interval to produce a unique, one-time password that is valid only for a brief period, typically 30 seconds. TOTP ensures that even if an attacker intercepts a generated code, it quickly becomes obsolete, enhancing security. 

Importance of Authenticator Apps and TOTP: 

  1. Enhanced Security: Authenticator apps provide an additional layer of security beyond passwords, significantly reducing the risk of unauthorized access to online accounts. 
  1. Protection Against Phishing: Because TOTP codes generate locally on your device and change with time, they resist phishing attacks that aim at stealing static passwords.
  1. Convenience: Authenticator apps offer a convenient and user-friendly method of implementing 2FA, eliminating the need to rely on SMS-based authentication methods that may be vulnerable to SIM swapping attacks. 

Authenticator apps and Time-based One-Time Passwords (TOTP) play a crucial role in safeguarding online accounts against unauthorized access and cyber threats. By incorporating 2FA with authenticator apps into their security protocols, individuals and organizations can significantly enhance their digital security posture in an increasingly interconnected world. 

Now we need to set up the Authenticator App: 

Setup 2FA authenticator app 

Use a phone app like 1Password, Authy, LastPass Authenticator, or Microsoft Authenticator, etc. to get 2FA codes when prompted during sign-in.

Scan the QR code. 

Use an authenticator app from your phone to scan. If you are unable to scan, enter this text code instead.

The displayed QR code encodes the following information: 

otpauth://totp/<DOMAIN>/issuer:<USERNAME>?secret=<SECRET>

This encoded URL includes: 

  • The protocol (otpauth) signals that an authenticator app should open this URL (DOMAIN).
  • the type (totp) 
  • a label (USERNAME) that is a colon-separated combination of issuer and username 
  • a secret (SECRET) 
  • the issuer 

The key element for logging in and automating the TOTP process is the supplied secret. 

However, what’s the utilization method for this secret? 

When you scan the QR code with an authenticator app, it combines the secret with the current time to create a unique password. The app then stores the second-factor secret, shows the issuer and username, and generates a new passcode every 30 seconds (though this time frame can be changed).That’s the gist of it! 

You can then employ the passcode as a secondary login factor, providing assurance to services that it is indeed you are accessing your account. 

Automating Login with Playwright for 2FA-Secured Websites

Automating the login process for websites secured with two-factor authentication (2FA) can streamline testing and administrative tasks. Playwright, a powerful automation library, provides the tools necessary to automate interactions with web pages, including those requiring 2FA. 

Prerequisites: 

  1. Install Node.js: Make sure Node.js is installed on your system. You can download it from nodejs.org
  1. Set Up Playwright: Install Playwright using npm, the Node.js package manager, by running the following command in your terminal: 

Steps to Automate Login with Playwright: 

  • Launch a Browser Instance:
  • Navigate to the Login Page:
  • Enter Username and Password:
  • Click on the Login Button:
  • Handle 2FA Authentication:

Playwright supports interacting with elements on the page to handle 2FA. You can wait for the 2FA input field to appear and then fill it with the code. 

The new OTPAuth.TOTP() syntax indicates that an instance of the TOTP class from the OTPAuth library is being created.  

This instance is configured with various parameters such as issuer, label, algorithm, digits, period, and secret, which are used to generate and validate one-time passwords for authentication purposes. 

In essence, new OTPAuth.TOTP() initializes a new TOTP (Time-based One-Time Password) object, allowing the application to generate OTPs for user authentication. 

  • Fill and Submit the 2FA code:

 totp.generate() is a method call on the totp object. This method is provided by the OTPAuth library and is used to generate a one-time password (OTP) based on the TOTP algorithm. 

The generate() method computes the current OTP value based on the TOTP parameters configured earlier, such as the secret key, time period, and algorithm. This OTP is typically used for user authentication purposes. 

Once token holds the generated OTP, it can be used in the subsequent lines of code for filling an authentication code input field and submitting it for authentication. 

Here’s the final code.

Conclusion:

Automating login for 2FA-secured websites using Playwright can enhance efficiency and productivity in various scenarios, from testing to administrative tasks. By following the steps outlined above, you can create robust automation scripts tailored to your specific requirements. 
https://github.com/apurvakolse/playwright-typescript-totp

Feel free to customize and expand upon these steps to suit your needs and the specific requirements of the website you’re working with. 

Disclaimer: Ensure that you have the necessary permissions to automate interactions with websites, and use this knowledge responsibly and ethically. 

Click Here to read more blogs for Software Testing Tips and Practices.

Desktop Automation Made Easy: A Winium, Java, and BDD Guide

Desktop Automation Made Easy: A Winium, Java, and BDD Guide

Desktop application test automation can be a tedious task as it’s hard to locate the elements and interact with those elements. There are plenty of tools available for automating desktop applications. Winium is one of those tools which is a selenium-based tool. So for those who don’t have an idea about Selenium, Selenium is a web application test automation tool that supports almost all programming languages. (Wish to learn more about selenium? Check out the link here) If you are familiar with the Selenium tool then it’s going to be easy for you to understand the workings of the Winium tool as most of the methods are common and if you are not familiar with Selenium no worries, I have got you covered. 

Coming back to our topic, In this blog we will see how we can create a robust test automation framework for automating desktop applications using Winium a desktop application automation tool, Java as a programming language, Maven, as a dependency management tool, Cucumber as a BDD (Behavior Driven Development) tool. We are going to build a test automation framework from scratch. Even if you don’t have any idea on how to create a framework no worries. 

Before we start building the framework let’s complete the environment set-up. So for this, we will have to install some tools. Below I am sharing the URLs of the tools we are using just in case if you want to know more about these tools then you can visit these official web pages. 

  • As we are using Java programming it is a must to have JDK installed on the system. 
  • You can download the JDK (Make sure the version is greater than 8) For instance I have the Java 11.0.16.1 version set up on my system. 
  • Use this link to download the Java SE Development Kit – https://www.oracle.com/in/java/technologies/javase/jdk11-archive-downloads.html
  • Once the download is completed the next step is setting up the path in the environment variables. Check the below screenshots to set up the path in your system environment variables
  • Once you are done with the above steps then you should see the below information in the command prompt.
  • Once you are done with Java Installation and set up the next step is to do the installation and set up the maven. 
  • To download the maven you can visit this official web page – https://maven.apache.org/download.cgi
  • Again after installation, we have to set up the environment variable path for our system. 
  • See the below screenshots for your reference.
  • We need an inspector to inspect the desktop application elements. We use different approaches and tools to inspect and locate the web page elements. 
  • Here we will use the Inspect.exe tool to inspect and locate the desktop application elements. 
  • Use this link to download and install the tool – https://github.com/blackrosezy/gui-inspect-tool/blob/master/Inspect.exe
  • Not only that there are other desktop application element inspection tools. 
  • Once you are done with the above steps then we can start building the automation framework. 

The BDD (Behavior-Driven-Development) is a software development approach that focuses on collaboration among stakeholders, including developers, QA engineers, and business analysts. The reason behind this is that in the BDD approach, we use natural language specifications to describe software behaviour from the end user’s perspective. I believe this helps in creating a shared understanding of requirements and promotes effective communication throughout the development lifecycle. Let’s see this in detail, 

  • Feature files are the main component of the BDD cucumber framework we can even say they are the heart of this cucumber framework. 
  • These files are written using gherkin language which describes the high-level functionalities of the application. 
  • Cucumber is a widely used BDD tool as it allows us to write test cases (scenarios) in plain tests using the Gherkin syntax. 
  • This is because Gherkin uses keywords like, Given, When, And, and Then to structure scenarios, making it easy to read and understand by both technical and non-technical stakeholders. 
  • Here is the one scenario that I have created for this framework. 
  • Yes, that’s correct. Step definition files contain code that maps the steps in the feature file to automation code. 
  • These files are written using the programming language used in the automation framework, in this case, Java.
  • The step definitions are responsible for interacting with the elements of the application and performing actions on them such as clicking, entering text, etc. 
  • They also contain assertions to check if the expected behaviour is observed in the application.
  • In Cucumber, hooks are methods annotated with @Before and @After that run before and after each scenario. 
  • To ensure consistency between test environments, these hooks are used for setting up and taking down tests. 
  • The application can be initialized before and cleaned up after each scenario using hooks, for example.

The Page Object Model (POM) is a design pattern that assists in building automation frameworks that are scalable and maintainable. In POM, we create individual page classes for each application page or component, which encapsulates the interactions and elements associated with that particular page. This approach improves code readability, reduces code duplication, and enhances test maintenance.

In a test automation framework, utility files provide reusable functionalities, configurations, and helper methods to streamline the development, execution, and maintenance of test scripts. As a result, they enhance the efficiency, scalability, and maintainability of the automation framework. Listed below are a few common utility files, along with their functions:

  • This utility file handles the launch and termination processes of the desktop application, as well as the Winium driver 
  • When we use Winium as a desktop application automation tool we have to start the server. (Winium Driver). 
  • Either we can do this manually before starting the execution of the test case or we can do this through automation as well. 
  • In the below utility file there are methods created for launching the desktop application and Winium driver (server). 
  • This common util file reads or retrieves the values and files present in a particular folder (referenced here as the resource folder).
  • This file can further serve as a basis for developing additional common methods usable throughout the framework.
  • The TestRunner class executes Cucumber tests with specified configuration settings, including the location of feature files, step definitions package, inclusion tags, and report generation plugins.
  • The seamless integration of Cucumber tests into TestNG makes testing and reporting easy.

Once we have defined the test scenarios, we will use Maven commands to execute them. Maven is a robust tool that manages project dependencies and automates the build process. With Maven, we can run automated tests with ease and ensure a smooth and efficient testing process.

  • In the project’s Maven Project Object Model (POM) file, we define the necessary configurations for test execution. 
  • This includes specifying the test runner class, defining the location of feature files and step definitions, setting up plugins for generating test reports, and configuring any additional dependencies required for testing.

Once you configure the automated tests in the Maven POM file, you can run them using Maven commands from the terminal or command prompt. Common Maven commands used for test execution include:

  • mvn test – This command runs all the tests from the project.
  • mvn clean test – This command first cleans the project (removes the target directory) and then runs the tests.
  • mvn test “-Dcucumber.filter.tags=@tagName” – This command runs tests with specific Cucumber tags.

Cucumber provides built-in support for generating comprehensive test reports. By configuring plugins in our automation framework, we can generate detailed reports that showcase the test results, including passed, failed, and pending scenarios. These reports offer valuable insights into the test execution, helping us identify issues, track progress, and make data-driven decisions for test improvements.

Automating desktop applications with Winium, Java, and Behavior-Driven Development (BDD) using Cucumber is a strategic approach that offers numerous benefits to software development and testing teams. By combining these technologies and methodologies, we create a robust automation framework that enhances software quality, reduces manual efforts, and promotes collaboration across teams.

In conclusion, automating desktop applications with Winium, Java, and BDD using Cucumber empowers teams to deliver high-quality software efficiently. By leveraging the strengths of each technology and following best practices such as the Page Object Model and Maven integration, we create a solid foundation for successful test automation that aligns with business goals and enhances overall product quality.

You can access the complete source code of the created automation framework for desktop applications using Winium, Java, and BDD with Cucumber on GitHub at https://github.com/spurqlabs/Desktop-App-Winium-Java-Cucumber The framework includes feature files, step definitions, page classes following the Page Object Model, Maven dependencies, and configuration files for generating Cucumber reports. Feel free to explore, fork, and contribute to enhance the framework further.

Read more blog here

Cypress Testing Best Practices and Tips for Assertions Techniques

Cypress Testing Best Practices and Tips for Assertions Techniques

“Cypress Testing – Assertions Techniques Best Practices and Tips” focuses on enhancing the efficiency and effectiveness of test assertions in Cypress, a popular JavaScript end-to-end testing framework.

Cypress testing plays a crucial role in ensuring the reliability and correctness of web application tests. Developers and testers use these to validate expected outcomes, allowing them to assert conditions about the application’s state during test execution. Automation Testing.

We can summarise the key features of Assertions in Cypress Testing as:

  • Rich Assertions: Comprehensive checks for element properties (existence, visibility, text content, attributes).  
  • Seamless Integration: Assertions smoothly blend into test syntax, improving readability and maintenance.  
  • Automatic Retry: Robust handling of asynchronous tasks, minimizing test flakiness. 
  • Expressive Tests: Empowers developers to create clear, comprehensive, and efficient tests, boosting confidence in the testing process. 

Assertions in Cypress Testing:

Verify that an element exists in the DOM:

Syntax: .should(‘exist’)

Example:

Verify that an element does not exist in the DOM:

Syntax: .should(‘ not.exist ‘) 

Example:

Verify that an element is visible/Not Visible:

Syntax: .should(‘be.visible ‘)  .should(‘not.be.visible ‘) 

Example:

Verify that an element is hidden:

Syntax: .should(‘be.hidden) 

Example:

Verify that an element has the expected value that the user has entered in the textbox: 

Syntax: .should(‘have.value’, ‘expectedValue’)  

Example:

Verify that a string includes the expected substring:

Syntax: .should(‘include’, ‘expectedSubstring’)

Example:

Verify that a string matches a regular expression pattern:

Syntax: .should(‘match’, /regexPattern/) 

Example:

Verify the length of an array or the number of elements matched:

Syntax: .should(‘have.length’, expectedLength) 

Example:

Verify if the element is focused: 

Syntax: .should(‘have.focus’)
.should(‘be.focused’)

Example:

Verify the title of the page: 

Syntax: .title().should(‘include’, ‘Example Domain’)  

Example:

Verify the URL:

Syntax: .url().should(‘eq’, ‘https://www.spurqlabs.com’);  

Example:

Verify multiple assertions at a time: 

Example:

Property Assertion in Cypress Testing

Verify that an element has the expected attribute value:

Syntax: .should(‘have.attr’, ‘attributeName’, ‘expectedValue’) 

Example:

Verify that an element has a specific CSS property with the expected value:

Syntax: .should(‘have.css’, propertyName, Value) 

Example:

Verify that an element has the expected text content:

Syntax: .should(‘have.text’, expectedText) 

Example:

Verify that an input element has the expected value:

Syntax: .should(‘have.value’, expectedValue )  

Example:

Verify that a given value is NaN, or “not a number”:

Syntax: .should(‘be.a.NaN’) 

Example:

Verify an element or collection of elements is empty: 

Syntax: .should(‘be.empty’) 
   .should(‘not.be.empty’) 

Example:

Verify if a checkbox or radio button is checked:

Syntax: .should(‘be.checked’) 

Example:

Verify if a checkbox or radio button is not checked:

Syntax: .should(‘not.be.checked’) 

Example:

Verify if it is an array:

Syntax: .should(‘be.an’,’array’)

Example:

Verify if an object has specific keys:

Syntax: .should(‘have.keys’,[‘id’,’name’,’email’])

Example:

Verify if a value is one of a specific set of values:

Syntax: .should(‘be.oneOf’,[‘value1′,’value2′,’value3’])

Example:

Verify that a numeric value is within a certain range of another value:

Syntax: .should(‘be.closeTo’, expectedValue, delta)) 
      .should(‘be.within’, Start range, End range);

Example:

Verify Object assertion: 

Syntax: .should(‘have.property’, ‘propertyName’,’actualPropertyValue’)

Example:

Check is() block Assertions:

In the context of Cypress Testing, the .is() block typically utilizes conditions that check various states or attributes of an element. Here are some examples of selectors and conditions you might use inside the .is() block: 

  • Check if an element is visible:
  • Check if a button or input is enabled:
  • Check if an input field is readonly:
  • Check if an element contains specific text:
  • Check if an element has a specific attribute value:
  • Create custom conditions based on your specific requirements:

Conclusion:

Cypress Testing with its rich set of functionalities and integration benefits, empowers developers to create expressive and comprehensive tests. The combination of these features fosters a more efficient and confident testing process, ultimately contributing to the overall reliability of web applications.

How to Automate Chrome Extension using selenium?

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:

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

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.

Automate Chrome Extension Img-1

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 –

Automate Chrome Extension Img-2

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

Automate Chrome Extension Img-3

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.

Automate Chrome Extension Img-4

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.

Automate Chrome Extension Img-5

➜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.

Automate Chrome Extension Img-6

➜ Navigate to the .crx file in file explorer

Automate Chrome Extension Img-7

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.

Automate Chrome Extension Img-8

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

Automate Chrome Extension Img-9

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.

Automate Chrome Extension Img-10

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.

  • 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.

Chrome Extension Img-11

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.

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.

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:-

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

Chrome Extension Img-12

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.

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;

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.

The software testing landscape has evolved towards automation to meet the demands for quick and frequent deployments, adapting efficiently to constant updates and tight deadlines in a dynamic development environment.

How to trigger a workflow from another workflow using GitHub Action

How to trigger a workflow from another workflow using GitHub Action

GitHub Actions has revolutionized the way developers and testers automate their workflows. With Actions, developers can easily define and customize their CI/CD processes, enhancing productivity and code quality. One of the powerful features of GitHub Actions is the ability to trigger workflows from another workflow GitHub Actions. In this article, we will delve into the intricacies of mastering GitHub Actions and explore how to trigger workflows from other workflows.

GitHub Actions is a powerful automation framework integrated into GitHub. It allows developers and testers to define custom workflows composed of one or more jobs, each consisting of various steps. These workflows can be triggered based on events such as push and pull requests, commits, or scheduled actions. The benefits of using GitHub Actions include faster development cycles, improved collaboration, and streamlined release processes.

Before we delve into triggering workflows, let’s define what a workflow is in GitHub Actions. A workflow is a configurable automated process that runs on GitHub repositories. It consists of one or more jobs, each defining a set of steps. These steps can perform tasks such as building, testing, and deploying code. 

It is important to understand workflow dependencies to trigger a workflow from another workflow. Workflow dependencies refer to the relationships between different workflows, where one workflow triggers the execution of another workflow. By leveraging workflow dependencies, developers and testers can create a seamless and interconnected automation pipeline. 

In complex development scenarios, there is often a need to trigger workflows based on the completion of other workflows. This can be particularly useful when different parts of the development process depend on each other and when different teams collaborate on a project. By triggering workflows from related workflows, developers and testers can automate the execution of dependent tasks, ensuring a smoother development workflow. 

The advantages of workflow interdependency are numerous. Firstly, it allows for a modular and reusable approach to workflow automation. Instead of duplicating steps across different workflows, developers, and testers can encapsulate common operations in one workflow and trigger it from others. This promotes code reusability, reduces maintenance efforts, and enhances overall development efficiency. Moreover, workflow interdependency enables better collaboration between teams working on different aspects of a project, ensuring a seamless integration between their workflows. 

  • A GitHub repository having a workflow defined in it (repository_01)
  • Another GitHub repository (repository_02) has a workflow defined in it that triggers after repository_01 workflow completion.
  • GitHub personal access token 

As we have all the required stuff for our goal then let’s get it done. First will understand about GitHub personal access token.

Personal access tokens are an alternative to using passwords to authenticate GitHub when using the GitHub API or the command line. Personal access tokens are intended to access GitHub resources on your behalf.

To learn more about GitHub personal access tokens visit the official website of GitHub https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

1: First, Access your GitHub account by logging in.

2: Navigate to your profile, click on “Settings,” and proceed to “Developers.”

3: Click on Personal Access Token and then Select Token Classic.

4: Navigate to and choose “Generate new token,” then select Generate new token Classic.

5: Here, we Include a note for your Access Token (PAT) – it’s optional. Choose the expiration date for your PAT. Select the scope and at last click on generate token. Copy the token and paste it on a notepad. 

(Remember the selected scope will decide the permissions and authorization to access another repository and workflow)

So now we need to add the generated PAT to our repository_01 as a secret to do this follow the below steps.

  • To navigate to your repository, you can click on the settings.
  • Then go to secrets and variables then select the Action button.

Select the repository secret, add PAT_TOKEN in the name, and paste the copied personal access token in the value. Click on Add Secret.

To create a workflow head over to the action tab and click on new workflow. Then select Set up workflow yourself. Now customize your workflow and add the below step to trigger the (repository_02) workflow.

Let’s understand the trigger-workflow02 stage. Following is the secret we have added is used here to provide the permissions and the authorization to understand and trigger the workflow_02 of repository_02 also replace the username with your GitHub username and repository_02 name with your other repository name. 

As our first workflow is ready now let’s create our second workflow for repository_02. Follow the same steps described in the above step for the creation of a workflow. 

Now let’s understand what to consider here, first the triggering event is set as repository_dispatch means when the other repository is completed this workflow will get triggered and now to specify which repository we arousing types as trigger-workflow02 which is defined as a stage in the workflow01

We are done this is how we can trigger the workflow02 of repository_02 when the execution of workflow01 of repository_01 is completed and the status is passed. Below are the output screenshots give it a check.

Till this point whatever we have seen it’s for our personal GitHub account and if we want to implement this concept for the organization’s GitHub account then we need to introduce a small change in the workflow01 of the repository_01.

Let’s understand the trigger-workflow02 stage. The secret we have added is used here to provide the permissions and authorization to trigger the workflow_02 of repository_02 also replace the organization with your organization’s GitHub name and repository_02 name with your other repository name. 

In this blog, we have explored the powerful feature of trigger workflow from another workflow using GitHub Actions. By understanding workflow dependencies, leveraging workflow events and triggers, implementing remote triggers, and building scalable workflow chains, developers can enhance their CI/CD processes and workflow automation. To summarize, triggering workflows from another workflow allows for increased reusability, collaboration, and customization of automation processes. By embracing these features, developers can optimize their development workflows and empower their teams to achieve greater productivity and efficiency.