January 25, 2022

Selenium + GitHub: A Step-by-Step Testing Guide

Open Source Automation

The article covers how to create a series of CI workflows using Selenium and GitHub actions. Learn how to set up, configure and build GitHub Actions while getting a step-by-step overview of the Selenium WebDriver to perform automated testing. 

Table of Contents:

Why Use Selenium + GitHub?

You should use Selenium and GitHub to accelerate CI/CD workflows. 

With the flexible aspects of Selenium WebDrivers and GitHub Actions, users can create powerful, quick, and efficient automated testing workflows in the CI/CD environment. 

CI/CD pipelines have been contributing to the success of the DevOps cycle across all software development projects. It is a holistic process that builds bridges between development and operations. Continuous Integration assists the development team in efficiently delivering the code, and Continuous Delivery automates the delivery of code.

Getting Started With Selenium + GitHub

GitHub Actions – An Overview

One of the most prominent, impactful, and promising CI workflow mechanisms is GitHub Actions. GitHub Actions are not only quick and easy to implement, but also provide automation to workflows when integrated with CI/CD for testing and deploying products, without any intervention of third-party software. It also enables users to configure services, combine services, manage branches, review codes and automate successful builds.

The configuration settings for GitHub Actions exist under the Actions tab in each repository.

GitHub configuration

This tab consists of several GitHub Actions components and GitHub Workflows. The settings provide an instant output on each build in the repository. The green tick represents success, while the red alert icon represents the build failure.

Automated Testing with Selenium

Selenium is one of the most popular automated testing tools for different browsers and platforms. It is a tool that allows you to perform cross-browser testing for web applications. However, it is not only limited to that use. Selenium consists of a plethora of APIs, WebDrivers, and frameworks that enables developers and testers to enable test automation for an organization. 

Selenium WebDriver, one of the most popular Selenium components, is the one that enables introspection and testing over browsers. The test scripts can be created in various programming languages, including Java, C#, JavaScript, and Python. Selenium WebDriver API enables communication between browser and browser drivers.

The Selenium WebDriver architecture consists of several layers including Selenium Client Libraries. These client libraries communicate with Browser Drivers over the JSON Wire Protocol to automate real-user interaction and perform cross-browser testing. Other layers include JSON Protocol, Browser Drivers, and Browsers. Hence, Selenium WebDriver architecture can be referred to as the binding as well as the implementation of the browser code.

Integrating Github Actions with Selenium Tests – Step-by-Step

This tutorial covers creating Github Actions and setting up a Workflow in GitHub. We will also look at the WorkFlow structures in detail. Lastly, we will execute Selenium Testing Scripts with GitHub Actions.

Let’s dive right into setting up automated tests using Selenium WebDrivers!

1. Create GitHub Actions and Workflows

To create GitHub Actions for the Selenium testing, create a new GitHub repository.

GitHub repository for Selenium tests

Next, add a sample Java file since we will create a Java-based workflow in this repository. Make sure to add the Java template under Add.gitignore option.

Adding sample Java file to GitHub

Write a sample Java code as shown in the image below.

Sample Java code

Code:

package hello

// Your First Program

class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello, World!"); 

    }

}

 

Next, head over to the Actions tab. You will see that GitHub recommends Actions depending on the project. In our case, it is recommending actions suitable for a Java project. 

GitHub Actions tab

Scroll down to the “Continuous Integration” section and you will find a list of suitable CI configurations. Here, you can choose the one you prefer for the project. For this tutorial, we chose “Java with Maven” action. 

If you choose an existing option, it will automatically generate a .yaml for the project as shown below.

GitHub project .yaml

Code:

# This workflow will build a Java project with Maven, and cache/restore any dependencies to improve the workflow execution time

# For more information see: https://help.github.com/actions/language-and-framework-guides/building-and-testing-java-with-maven

name: Java CI with Maven

on:

  push:

    branches: [ main ]

  pull_request:

    branches: [ main ]



jobs:

  build:



    runs-on: ubuntu-latest



    steps:

    - uses: actions/checkout@v2

    - name: Set up JDK 11

      uses: actions/setup-java@v2

      with:

        java-version: '17'

        distribution: 'adopt'

        cache: maven

    - name: Build with Maven

      run: mvn -B package --file pom.xml

 

 

This file can easily be modified to suit your project. Alternatively, you can also set up your workflow by clicking on the “set up a workflow yourself” option. 

The workflow file usually consists of the following attributes:

  • Name of workflow: The name of the workflow is denoted by the keyword “name”. If you wish to include multiple CI jobs in your project, it is recommended to name each one appropriately. 
  • On attribute: This attribute is mandatory and represents the event when the particular action will run. There are several actions you can include such as push, pull request, release, etc. for more information on the events, check the official guide here.
  • Jobs: Under jobs attribute, we have multiple options. Let’s look at each one detail
    • Build: This option allows users to write on which OS VM their project build would run. The users can also mention the supported version. In our example, we have written “ubuntu-latest”. Alternatively, you can choose any other operating system as per the requirement of the machine you are working on.
    • Steps: Under this option, the actions used by the particular workflow, and the multiple jobs that would run under the workflow are mentioned. These jobs run in parallel. If you want to run the jobs in the order in the CI pipelines, you must add the “needs” attribute. It is crucial to ensure that every workflow has at least one job. In our sample workflow, we only have one job as shown in the image below. 

After the changes, hit the “Start Commit” button. This will give the option to add a description for the commit. It will also enable the user to commit either to the main branch or commit to any other branch that exists in the project. 

"Start Commit" button

Hit the “Commit new file” button to set up the workflow file. Next, head over to the “Actions” tab, and you will see your YAML workflow file present under the tab. The yellow sign represents that the job is in the queue.

YAML workflow file job in queue

When the job starts building and running, you will see the status change from “Queued” to “in progress”. If the build is successful, you will see a green tick mark

Successful build screenshot

Otherwise, there will be a red cross mark if the build has failed. 

Failed build screenshot

You can also create a “Status Badge” for your workflow. Click on the “Create status badge” button. A status badge window will appear which you can copy and paste into the README.md file. It will appear similar to the one shown below:

Workflow status badge

2. Execute Selenium TestScript with GitHub Actions

Now that you have successfully configured the workflow, it is time to execute the Selenium script with GitHub actions. Create an AppTest.java file in your GitHub repository and add the following Selenium WebDriver code.

package hello;

import io.github.bonigarcia.wdm.WebDriverManager;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.chrome.ChromeOptions;

import org.testng.Assert;

import org.testng.annotations.AfterClass;

import org.testng.annotations.BeforeClass;

import org.testng.annotations.Test;

import java.util.concurrent.TimeUnit;

 

public class AppTest 

{ 

 public WebDriver driver; 

 public String baseUrl = "https://www.lambdatest.com/";  

 

 @Test             

 public void test1() {      

 

 WebDriverManager.chromedriver().setup();

 ChromeOptions options = new ChromeOptions();

 options.addArguments("--no-sandbox");

 options.addArguments("--disable-dev-shm-usage");

 options.addArguments("--headless");

 driver = new ChromeDriver(options);

 

 driver.manage().timeouts().implicitlyWait(20,TimeUnit.SECONDS);  

 driver.manage().window().maximize();  

 driver.get(baseUrl);

 driver.close();

 }     

}

 

Next, head over to the pom.xml file and add the following dependencies for the Selenium WebDriver code:

      junit

      junit

      4.11

      test

    

      

org.seleniumhq.selenium  

selenium-java  

3.141.59  

      

    

io.github.bonigarcia

webdrivermanager

4.3.1
      

 

Then, head over to the Actions tab and create a new workflow.

Name the file as trial.yaml and add the following code:

name: Build and Test

on: [push]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Set up JDK 1.8

      uses: actions/setup-java@v1

      with:

        java-version: 1.8

    - name: Build with Maven

      run: mvn -B package --file pom.xml

  test_1:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Set up JDK 1.8

      uses: actions/setup-java@v1

      with:

        java-version: 1.8

    - name: Test with Maven

      run: mvn clean test

  test_2:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Set up JDK 1.8

      uses: actions/setup-java@v1

      with:

        java-version: 1.8

    - name: Test with Maven

      run: mvn -B package --file pom.xml test

 

 

Here we have created two tests just to demonstrate how multiple tests can be created in one workflow.  After submitting the commit, open the Actions tab again to check the build status. If you see a green tick mark, then it is successful. We can see that it has failed in our case. 

Failed commit screenshot

The error is probably due to Google Chrome being not installed in the virtual machine that was configured. The error usually occurs because we are using Chrome in a headless mode as mentioned in the code:

 ChromeOptions options = new ChromeOptions();

 options.addArguments("--no-sandbox");

 options.addArguments("--disable-dev-shm-usage");

 options.addArguments("--headless");

Also, we are using a WebDriver Manager instead of the ChromeDriver 

WebDriverManager.chromedriver().setup();

 

 

But, in our case, we do not have Chrome Browser installed on the Ubuntu machine. Hence, we will add the following configuration in our yaml workflow file to install the Google Chrome browser.

 build:

     runs-on: ubuntu-latest

     steps:

    - uses: actions/checkout@v2

    - name: Set up JDK 1.8

      uses: actions/setup-java@v1

      with:

        java-version: 1.8

        server-id: github 

        settings-path: ${{ github.workspace }} 

    - name: Install Google Chrome 

      run: |

              chmod +x ./scripts/InstallChrome.sh

                          ./scripts/InstallChrome.sh 

    - name: Build with Maven

      run: mvn -B package --file pom.xml test

 

 

We can see that all the builds have been completed successfully! 

All GitHub builds completed successfully

We tested only for Google Chrome browser. To perform cross-browser testing, consider adding the following code in the sample Java file. Make sure to rename the import package as per your project name.

package test;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.edge.EdgeDriver;

import org.openqa.selenium.firefox.FirefoxDriver;

import org.testng.annotations.BeforeTest;

import org.testng.annotations.Parameters;

import org.testng.annotations.Test;

public class CrossBrowserTestingScript {

WebDriver driver;

/**

* This function will execute before each Test tag in testng.xml

* @param browser

* @throws Exception

*/

@BeforeTest

@Parameters("browser")

public void setup(String browser) throws Exception{

//Check if parameter passed from TestNG is 'firefox'

if(browser.equalsIgnoreCase("firefox")){

//create firefox instance

System.setProperty("Path of your gecko driver");

driver = new FirefoxDriver();

}

//Check if parameter passed as 'chrome'

else if(browser.equalsIgnoreCase("chrome")){

//set path to chromedriver.exe

System.setProperty("Path of your chrome driver");

driver = new ChromeDriver();

}

else if(browser.equalsIgnoreCase("Edge")){

//set path to Edge.exe

System.setProperty("Path of edge driver”);

driver = new EdgeDriver();

}

else{

//If no browser is passed throw exception

throw new Exception("Incorrect Browser");

}

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

}

@Test

public void testParameterWithXML() throws InterruptedException{

driver.get("https://www.browserstack.com/");

WebElement Login = driver.findElement(By.linkText("Sign in"));

//Hit Signin button

Login.click();

Thread.sleep(4000);

WebElement userName = driver.findElement(By.id("user_email_login"));

//Fill user name

userName.sendKeys("your email id");

Thread.sleep(4000);

//Find password'

WebElement password = driver.findElement(By.id("user_password"));

//Fill password

password.sendKeys("your password");

Thread.sleep(6000);

WebElement Signin= driver.findElement(By.(id("user_submit"));

//Hit search button

Signin.click();

Thread.sleep(4000);

}

}

 

Bottom Line

In this tutorial, we have created a series of CI workflows using Selenium and GitHub actions. In conclusion, Selenium WebDriver is an excellent open-source tool for cross-platform web-based testing. Combining Selenium WebDriver with GitHub Actions enables us to ensure Continuous Integration in the DevOps environment. A similar approach can be used to enable Selenium testing for any web browser simply by changing the WebDriver. 

We hope that this detailed guide will assist you in setting up your first automated testing with Selenium using GitHub Actions successfully. 

START TESTING NOW