Cross Browser Testing in Cucumber BDD Framework

Thinking to implement cross browser testing in cucumber project? This blog might help you get started!!

I am writing this blog to capture how we implemented cross browser testing in Cucumber BDD project using TestNG with Selenium WebDriver.

Note : All steps are related to the framework we have created for project it may vary in terms of the methods and java class mentioned throughout. But still Hope this will help.

What is Cross Browser Testing?

Cross browser testing is an approach through which you can test your website (or web application) on different browsers (IE, Chrome, Firefox etc) browser versions, and operating systems. It is essential for ensuring that the product experience is uniform across browsers and platforms (or operating systems).

Why Cross Browser Testing is important?

Manually testing a website across multiple browsers is tedious task. Let's take an example where you have to execute 20 test cases manually. Now if you are expected to run same tests on five different browsers you have to execute 100 test cases in total. The time taken becomes longer. However, if these tests are automated using Selenium, Where you just have start execution it will be more convenient.

Also Cross browser compatibility testing helps web developers with pinpointing browser-specific compatibility errors so they can be debugged quickly.

Cross Browser Testing in Cucumber with TestNG

TestNG is a testing framework, Let's look advantages of using TestNG,

1. TestNG with Maven supports parallel execution (https://cucumber.io/docs/guides/parallel-execution/?lang=java#testng )

2. Supports advance annotations like @Parameters/@DataProvider/@BeforeTest/@AfterTest/@BeforeSuite/@AfterSuite etc.

3. Annotations add flexibility to your project so that you can use your project in the way you want.

Pre-requisite :

You should have basic framework for BDD approach with Cucumber and all related dependency added to your POM file. Example POM file with required dependency

<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->

<dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>4.5.0</version>

</dependency>

<!-- https://mvnrepository.com/artifact/org.testng/testng -->

<dependency>

<groupId>org.testng</groupId>

<artifactId>testng</artifactId>

<version>7.6.1</version>

<scope>test</scope>

</dependency>

<!-- https://mvnrepository.com/artifact/io.cucumber/cucumber-java -->

<dependency>

<groupId>io.cucumber</groupId>

<artifactId>cucumber-java</artifactId>

<version>7.9.0</version>

</dependency>

<!-- https://mvnrepository.com/artifact/io.cucumber/cucumber-testng -->

<dependency>

<groupId>io.cucumber</groupId>

<artifactId>cucumber-testng</artifactId>

<version>7.9.0</version>

</dependency>

<!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->

<dependency>

<groupId>io.github.bonigarcia</groupId>

<artifactId>webdrivermanager</artifactId>

<version>5.3.1</version>

</dependency>

We followed below steps to setup cross browser testing in our project:

1. Specify the browser values in the TestNG XML file.

2. Create a method to set and get Browser value.

3. Initialize a parameter with the name browser in Test Runner file.

4. Initialize the browser driver depending on the parameter value that can be access by getBrowserType method, For a browser value equal to Chrome, initialize a chrome driver, and so on.

5. Call getBrowserType() method when initializing driver.

Step 1: Specify the parameter browser values in the TestNG XML file.

​<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">

<suite name="Suite">

<test thread-count="3" name="TestChrome">

<parameter name="browser" value="chrome" />

<classes>

<class name="runner.TestRunner"></class>

</classes>

</test> <!-- Test -->

<test thread-count="3" name="Testfirefox">

<parameter name="browser" value="firefox" />

<classes>

<class name="runner.TestRunner"></class>

</classes>

</test> <!-- Test -->

<test thread-count="3" name="Testedge">

<parameter name="browser" value="edge" />

<classes>

<class name="runner.TestRunner"></class>

</classes>

</test> <!-- Test -->

</suite> <!-- Suite -->

Step 2: Create a method setBrowserType and getBrowserType

Here, In our project we are getting all the configuration using utility that we have created "ConfigReader.java" so we created setBrowserType and getBrowserType methods in same utility file.

​public class ConfigReader {

private static String browserType = null;

public static void setBrowserType(String browser) {

browserType = browser;

}

public static String getBrowserType() throws Throwable {

if (browserType != null)

return browserType;

else

throw new RuntimeException("browser not specified in the testng.xml");

}

Step 3: Initialize a parameter with the name browser in Test Runner file.

You should have cucumber runner extending the AbstractCucumberTestNG class,

public class TestRunner extends AbstractTestNGCucumberTests {

@DataProvider(parallel = false)

public Object[][] scenarios() {

return super.scenarios();

}

@BeforeTest

@Parameters({ "browser" })

public void defineBrowser(String browser) throws Throwable {

ConfigReader.setBrowserType(browser);

}

}

@BeforeTest annotation is used. This will ensure that browser value is set and web-driver is initialized for the same before the test is started

@Parameters annotation is used. This ensures that any parameter that is passed to test in testng.xml is automatically captured. (https://www.toolsqa.com/testng/testng-parameters/ )

So now our Runner is ready.

Step 4: Initialize the browser driver depending on the parameter value that can be access by getBrowserType method

Let’s jump to Selenium web-driver initialization, we have created DriverFactory class java file that includes WebDriver initialization method,

public WebDriver initializeDrivers(String browser) {

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

Loggerload.info("Testing on firefox");

WebDriverManager.firefoxdriver().setup();

driver = new FirefoxDriver();

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

Loggerload.info("Testing on chrome");

WebDriverManager.chromedriver().browserVersion("108.0.0").setup();

driver = new ChromeDriver();

} else if (browser.equalsIgnoreCase("safari")) {

Loggerload.info("Testing on safari");

WebDriverManager.safaridriver().setup();

driver = new SafariDriver();

} else if (browser.equalsIgnoreCase("edge")) {

Loggerload.info("Testing on Edge");

WebDriverManager.edgedriver().setup();

driver = new EdgeDriver();

}

// Set Page load timeout

driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));

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

return driver;

}

Step 5: Call getBrowserType() method when initializing driver

In our project we have used Hooks class java file to initialize the driver by calling method from DriverFactory class

@BeforeAll

public static void before() throws Throwable {

//Get browser Type from config file

Loggerload.info("Loading Config file");

ConfigReader.loadConfig();

String browser = ConfigReader.getBrowserType();

//Initialize driver from driver factory

driverfactory = new DriverFactory();

driver = driverfactory.initializeDrivers(browser);

Loggerload.info("Initializing driver for : "+browser);

}

Now all setup is done and we are ready to run project, play to see the output

Allure Report looks like :

Thank you !! Keep Learning !!

Please provide your valuable comments !!

References:

Cross browser testing in TestNG : https://www.toolsqa.com/testng/cross-browser-testing-using-testng/

Cucumber tips-tricks : https://cucumber.io/docs/guides/browser-automation/?lang=java#tips-and-tricks

https://stackoverflow.com/questions/71093267/can-a-testng-cross-browser-test-be-executed-with-cucumber-runner