DEV Community: Bharadwajpendyala12

Automation Testing With Selenium, Cucumber & TestNG

Bharadwajpendyala12 — Fri, 19 Aug 2022 10:02:22 +0000

Cucumber is a test automation framework which leverages Behavior Driven Development for collaboration in between Business and IT teams. It empowers a user to define an application’s behavior in plain English language which makes it easier for non-programmers to understand the acceptance criteria.

The core of cucumber has been developed in Ruby programming language however it supports all the majorly used programming languages for testing such as Java, C#, Python. In this article, I will be demonstrating automation testing with Selenium,

If you’re new to Selenium and wondering what it is then we recommend checking out our guide — What is Selenium?

Try this online Selenium Testing Tool Grid to run your browser automation testing scripts.

What Is Behavior Driven Development?

Behavior Driven Development is derived from Test Driven Development as a software development methodology. As a part of the Test Driven Development approach, the developer creates tests as a part of the acceptance criteria first. The developer will make sure the test is passed and will commit changes in the code. if required. Test Driven Development is a way to ensure the system meets its requirements by ensuring a 100% test coverage. It provides an edge over other methodologies in terms of finding defects early in the cycle which reduces the cost of finding bugs and refactoring improves the code.

Cons of Test Driven Development are the maintenance of tests created, it is a test-centric methodology, non-programmers might find it hard to understand for performing selenium automation testing. The test or acceptance criteria being targeted makes it hard for team collaboration. To overcome the above trouble heads, Behavior Driven Development was introduced to reduce the time to test, less code with more collaboration.

Advantages Of Using BDD For Automation Testing With Selenium & Cucumber

Collaborative Approach: Bridges the communication gap between stakeholder or business teams who can’t easily understand or read the code. This problem is addressed by defining the behavior of application under test in a ubiquitous language i.e. easily understandable.

Focuses more in terms of end-user experience or inclined more towards behavior specifications while compared to that of traditional Test Driven methodology. Tests are written more from end user’s point of view, making them easier to understand for performing Selenium automation testing.

With TestNG certification, you can challenge your skills in performing automated testing with TestNG and take your career to the next level.

Here’s a short glimpse of the TestNG certification from LambdaTest:

How Cucumber Leverages BDD For Selenium Automation Testing?

As discussed earlier, Cucumber is a test automation tool that supports Behavior Driven Development. It makes use of user-defined specifications to validate the application under test. Before we step into performing automation testing with Selenium & Cucumber, let me tell you about the three major parts of the cucumber framework i.e. Feature file, Step Definitions, and Test Runner file.

Feature File would enable the user to define the behavior of the application in plain English text with help of Gherkin Language. Gherkin is used to define executable specifications with the help of a predefined set of contextual keywords. Keywords involved are demonstrated with the help of the below example:

Feature: High-level description of a software feature or behavior of application under test.

Scenario: Feature file can contain more than one scenario which acts as a test case derived from test scenarios/behaviors. It also symbolizes and acts as one or more user perspectives involved.

Annotations: Keywords which hold a specific meaning and would help and defined the meaning of a scenario. Sample keywords involved are GIVEN, WHEN, THEN & AND.

GIVEN: Define pre-requisites of the application.
WHEN: Trigger point for a scenario execution can be related more towards steps to be executed.
THEN: Defined an outcome more like the expected result.
AND: Acts as a logical bridge AND in between two statements.

Scenario Outline: It’s a template provided to carry out scenario execution, test data table provided in the Examples section would replace variables/arguments created making each individual row in a table as a unique scenario.

Tags: It paves the way to organize your tests based on your tag definition.

Quoted an example related to the feature file below which involves all the above-mentioned keywords.

Feature: Place order on the Amazon website.
[@SmokeTest](http://twitter.com/SmokeTest)
Scenario: Validate if the guest user is able to add a product to cart.
GIVEN user is logged onto the Amazon website as a guest user.
WHEN user searches a product on the homepage.
THEN user should be able to view product information related to product searched.
AND user click on add to cart button
THEN user verifies if the product is added to cart

Scenario Outline: Validate if a registered user is able to place an order.
    GIVEN user is logged onto the Amazon website as a registered user.
    WHEN user logs in with <username> and <password>
    THEN user should be able to view homepage.
WHEN user searches for <productID>
THEN user should be on the product information page.
AND user tried to add the product to cart
THEN product should be added to cart.
WHEN user navigates to order confirmation page via express checkout option.
THEN order should be placed successfully along with order confirmation id being generated.

Step Definition file created would be consisting of a code which defines the steps for annotations created in feature file. An annotation followed by step defined in patterns with the help of regular expression would help in linking the step definition file to steps in feature file. Sample step definition code sample for above code is defined as above.

[@Given](http://twitter.com/Given)("^user is logged onto Amazon website as a guest user $")
public void user_is_on_Home_Page() throws Throwable {
driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
driver.get("[http://www.amazon.in](http://www.amazon.in)");
}
[@When](http://twitter.com/When)("^user searches a product on homepage $")
public void user_searches_a_product() throws Throwable {
driver.findElement(By.xpath(".//*[[@id](http://twitter.com/id)='account']/a")).click();
}

Test Runner file defined the location of step definition and primarily provides all the metadata information required for test execution. It makes use of ‘@RunWith()’ annotation from JUnit framework for execution. Secondarily you would be making use of ‘@CucumberOptions’ annotation to define the location of feature files, step definitions location through glue, what reporting integrations to use etc.

Below is the sample of feature file created.

package amazonTest;

import org.junit.runner.RunWith;
import cucumber.api.CucumberOptions;
import cucumber.api.junit.Cucumber;

[@RunWith](http://twitter.com/RunWith)(Cucumber.class)
[@CucumberOptions](http://twitter.com/CucumberOptions)(
        features = "src/test/Feature"
        ,glue={"src/main/stepDefinition"}
        )

public class TestRunner {

}

We can integrate parallel test execution for automation testing with Selenium & Cucumber framework for saving a considerable amount of time during test execution. To elaborate the above scenario, serve the regression test needs of an application under test you have to execute your entire regression test automation repository which could serve you with both time and resource constraints. The end-user would not be using the same browser with its latest version, there could be plenty of browsers, operating systems and browser version combinations which should be considered while performing out testing.

However, the cons stated above could be resolve with cloud solutions such as LambdaTest which is a cross browser testing cloud. LambdaTest offers an online Selenium grid consisting 3000+ real browsers and operating systems help you achieve maximum amount of browser test coverage. Build time could be drastically reduced by utilizing LambdaTest automation for your test execution. Parallel test execution with the help of various browsers and multiple versions of each browser instance would help you achieve your cross browser parallel testing needs. Automated screenshots and video recording would help you keep track of your test failures and find the root cause quickly providing you a better analytical perspective while troubleshooting.

As we have embarked on our journey of implementing automation testing with Selenium & Cucumber framework using Java, till now we have learned the overview of the cucumber framework and how it leverages BDD. Let’s get into hands-on the mode by creating a sample framework using Cucumber for Selenium automation.

Need a great solution Safari for windows browser testing on Windows? Forget about emulators or simulators — use this real online browsers.

Creating Your First Project Using Cucumber For Selenium Automation Testing

We make use of Eclipse IDE for coding purposes, get the latest version from their official website https://www.eclipse.org/downloads/.

“cucumber-archetype Artifact Id 
Group Id as io.cucumber”

Archetype would be generated with the help of above statement. If in case above archetype has been missing please add template for the Archetype by entering below info.

GroupId: “io.cucumber”
ArtifactId: “cucumber-archetype”
Version: “2.3.1.2”

After entering above details try navigating further and finishing required steps. Hence maven project would be successfully created.

Replace the dependencies by obtaining them from below pom file as required with below set of dependencies.

<project xmlns="[http://maven.apache.org/POM/4.0.0](http://maven.apache.org/POM/4.0.0)" xmlns:xsi="[http://www.w3.org/2001/XMLSchema-instance](http://www.w3.org/2001/XMLSchema-instance)"
    xsi:schemaLocation="[http://maven.apache.org/POM/4.0.0](http://maven.apache.org/POM/4.0.0) [http://maven.apache.org/xsd/maven-4.0.0.xsd](http://maven.apache.org/xsd/maven-4.0.0.xsd)">

<modelVersion>4.0.0</modelVersion>
    <groupId>Google_Search</groupId>
    <artifactId>Google_Search</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>Google_Search</name>
    <url>[http://maven.apache.org](http://maven.apache.org)</url>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.14.0</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>cucumber-java</artifactId>
            <version>4.2.2</version>
        </dependency>
        <dependency>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
            <version>27.0.1-jre</version>
        </dependency>
        <dependency>
            <groupId>io.cucumber</groupId>
            <artifactId>cucumber-junit</artifactId>
            <version>4.2.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

Creating your Feature file with user defined specifications in Gherkin Language:
Step 1: Create a folder for organizing all your feature files as shown in the image below.
Step 2: Select File from the navigation menu. File → New → File.
Step 3: Name the file using “Login.feature”.
Step 4: As there is no plugin which supports “.feature” extension file created would look as in the image below.

Step 5: Once you create the feature file below alert would be prompted asking you to select the editor to be installed from the marketplace.

Step 6: Select “Show IDE extensions for this file type and let me install them” radio button and select the first option which is Cucumber Eclipse Plugin as shown in the image below.
Click on install. Accept the terms of the license agreement. Click on Finish. You would be prompted with a security alert, click on Install Anyway option, once installation is finished click on Restart Now to view the changes made.

Step 7: To view if changes are reflected observe the Feature file as in below image how different is it from the previous image of the feature file created.

Watch this video to learn how TestNG has become one of the most robust test automation frameworks and all you need to know to get started with TestNG in Selenium.

Running First Script Of Automated Testing With Selenium & Cucumber Framework

Let’s consider a real-world case study of querying a search term in google search by creating a feature file which consists of feature, tags and scenarios and scenario outline as applicable.

For automation testing with Selenium & Cucumber framework for Java, we need to create a GoogleSearch.feature file under Features package with below content under “src/test/java” path.

Feature: Searching Google should return the name of query

Scenario: Google search with scenario
    Given user launches Google webapp
    When user searches for a "LambdaTest"
    And click on search button
    Then results retrieved should contain the "LambdaTest" used

Scenario Outline: Searching google using scenario outline and examples
    Given user launches Google webapp
    When user searches for a "<query>"
    And click on search button
    Then results retrieved should contain the "<query>" used

Once you have completed creating a feature file, created steps would be highlighted with warnings indicating that you haven’t defined the step contained in step definition file yet.
In order to resolve the errors, lets navigate to the step definition file to complete coding the gist which defines our steps.
Below code can be replaced in step definition file which is Stepdefs.
TIP:

While creating your step definitions if you want a template for step definitions file creation just run the feature file along with warnings as discussed previously. It would provide you with the template upon which you can start coding as shown in the image below.

Make sure your step definitions are specified in package “com.googlesearch.testing.steps” under the path of “src/main/java”.

Copy the code and define the path to your chrome driver. Below is the code used for automation testing with Selenium & Cucumber in Java.

package com.googlesearch.testing.steps;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import cucumber.api.java.en.And;
import cucumber.api.java.en.Given;
import cucumber.api.java.en.Then;
import cucumber.api.java.en.When;

public class stepDefinitions {

public static WebDriver driver;
    String baseURL = "[https://www.google.com](https://www.google.com)";

[@Given](http://twitter.com/Given)("^user launches Google webapp$")
    public void user_launches_Google_webapp() throws Throwable {
        // Write code here that turns the phrase above into concrete actions
        System.setProperty("webdriver.chrome.driver", "C:\\Cucumber_Workspace\\GoogleSearch\\Libs\\chromedriver.exe");
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get(baseURL);
    }

[@When](http://twitter.com/When)("^user searches for a \"([^\"]*)\"$")
    public void user_searches_for_a(String arg1) throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.sendKeys(arg1);
    }

[@And](http://twitter.com/And)("^click on search button$")
    public void click_on_search_button() throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.submit();
    }

[@Then](http://twitter.com/Then)("^results retreived should contain the \"([^\"]*)\" used$")
    public void results_retreived_should_contain_the_used(String resultString) throws Throwable {
        WebElement result = driver.findElement(By.className("LC20lb"));
        if (resultString.equalsIgnoreCase(result.getText())) {
            System.out.println("Text is matching");
        } else {
            System.out.println("Text is not matching");

}
        driver.quit();
    }

}

Make sure your Test Runner java file which is named as RunCucumberTest is under “src/test/java” path with code specified below.

import org.junit.runner.RunWith;

import cucumber.api.CucumberOptions;
import cucumber.api.junit.Cucumber;

[@RunWith](http://twitter.com/RunWith)(Cucumber.class)
[@CucumberOptions](http://twitter.com/CucumberOptions)(features = { "classpath:features" }, plugin = { "pretty", "json:target/cucumber/cucumber.json" })

public class RunCucumberTest {

}

Now you have all the 3 main aspects ready for test execution. To proceed further for running automation testing with Selenium and Cucumber you would need to right-click on RunCucumberTest.java file which is created. Click on Run as JUnit Test. Tests get triggered for both the scenarios specified. If you observe the scenario outline it gets executed thrice with all the sets of data specified in a data driven format.

Need a great solution for cross browser testing on Safari browser online? Forget about emulators or simulators — use this real online browsers

Using LamdaTest For Automation Testing With Selenium & Cucumber

Above test would be running in sequence and nexttest would have to wait till the thread is empty by completion of previous test triggered. This would consume more amount of time and cross browser testing with above methodology would prove to be a troublesome and expensive due to the permutations and combinations of the browsers and operating systems and versions available. In order to overcome the issue we would have to run our automation tests with Selenium and Cucumber in parallel, even if we do so still we would have to configure a lot of machines as the number of tests you can trigger per system would depend on the computing capabilities of each system.

LambdaTest would help us overcome the above problem statements. As a cloud solution it offers scalability to reduces build time, improve browser test coverage, provision to validate responsive test from pixel to pixel accuracy, enhanced reporting and analytical capabilities. Let’s start with configuring Cucumber to enable parallel test execution of Selenium with Java using LambdaTest for automated cross browser testing

Configuring Your Test Suite With LambdaTest For Parallel Test Execution Of Selenium With Cucumber & TestNG

Replace your step definition file with below code which includes Remote WebDriver configuration to connect to cloud virtual machines. Currently we have JUnit as our unit testing framework, for provisioning parallel test execution let’s integrate current framework with TestNG. TestNG provides an easier configuration and additional capabilities which makes it more powerful than that of JUnit.

We start with creating a TestNG xml file to run the test suite. Add below xml code to your project root folder. If you are not familiar with TestNG then you can have a look at our guide for running first TestNG automation script.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "[http://testng.org/testng-1.0.dtd](http://testng.org/testng-1.0.dtd)">
<suite name="GoogleSearch" parallel="tests" thread-count="3">

    <test name="WIN10TEST_FF">
        <parameter name="browser" value="Firefox" />
        <parameter name="version" value="64.0" />
        <classes>
            <class name="com.cucumber.tests.TestNGRunCucumberTest" />
        </classes>
    </test>

    <test name="WIN10TEST_CHROME">
        <parameter name="browser" value="Chrome" />
        <parameter name="version" value="71.0" />
        <classes>
            <class name="com.cucumber.tests.TestNGRunCucumberTest" />
        </classes>
    </test>

</suite>

Replace your step definition file with below code. @Parameters will help us to parameterize the desired capabilities such as browsername, version, platform etc. Have a look at LambdaTest Capabilities Generator for fetching the coded values according to your desired capabilities. If you take a glance at above xml file we have two parameters which are browser and version. Thread count in the xml code represents the number of concurrent session which are possible. We have set it to 2 for demo purposes. Kindly replace the stepDefinition code with below TestNG model.

package com.cucumber.stepdefs;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import com.cucumber.tests.TestNGRunCucumberTest;

import cucumber.api.java.en.And;
import cucumber.api.java.en.Given;
import cucumber.api.java.en.Then;
import cucumber.api.java.en.When;

public class stepDefinitions extends TestNGRunCucumberTest {

    [@Given](http://twitter.com/Given)("^user launches Google webapp$")
    public void user_launches_Google_webapp() throws Throwable {
        // Write code here that turns the phrase above into concrete actions
        driver.get(baseURL);
    }

    [@When](http://twitter.com/When)("^user searches for a \"([^\"]*)\"$")
    public void user_searches_for_a(String arg1) throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.sendKeys(arg1);
    }

    [@And](http://twitter.com/And)("^click on search button$")
    public void click_on_search_button() throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.submit();
    }

    [@Then](http://twitter.com/Then)("^results retreived should contain the \"([^\"]*)\" used$")
    public void results_retreived_should_contain_the_used(String resultString) throws Throwable {
        WebElement result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='rhscol'][1]"));
        if (result.isDisplayed()) {
            System.out.println("Resutls are retreived");
        } else {
            System.out.println("Resutls are not retreived");
        }
    }

}

As we have trigger the tests from xml file of TestNG we can replace the TestRunner file with below code, as our entry point would be TestNGRunner xml.

package com.cucumber.stepdefs;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import com.cucumber.tests.TestNGRunCucumberTest;

import cucumber.api.java.en.And;
import cucumber.api.java.en.Given;
import cucumber.api.java.en.Then;
import cucumber.api.java.en.When;

public class stepDefinitions extends TestNGRunCucumberTest {

    [@Given](http://twitter.com/Given)("^user launches Google webapp$")
    public void user_launches_Google_webapp() throws Throwable {
        // Write code here that turns the phrase above into concrete actions
        driver.get(baseURL);
    }

    [@When](http://twitter.com/When)("^user searches for a \"([^\"]*)\"$")
    public void user_searches_for_a(String arg1) throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.sendKeys(arg1);
    }

    [@And](http://twitter.com/And)("^click on search button$")
    public void click_on_search_button() throws Throwable {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.submit();
    }

    [@Then](http://twitter.com/Then)("^results retreived should contain the \"([^\"]*)\" used$")
    public void results_retreived_should_contain_the_used(String resultString) throws Throwable {
        WebElement result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='rhscol'][1]"));
        if (result.isDisplayed()) {
            System.out.println("Resutls are retreived");
        } else {
            System.out.println("Resutls are not retreived");
        }
    }

}


As we have trigger the tests from xml file of TestNG we can replace the TestRunner file with below code, as our entry point would be TestNGRunner xml.

package com.cucumber.tests;

import java.net.MalformedURLException;
import java.net.URL;

import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.DataProvider;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

import cucumber.api.CucumberOptions;
import cucumber.api.testng.CucumberFeatureWrapper;
import cucumber.api.testng.PickleEventWrapper;
import cucumber.api.testng.TestNGCucumberRunner;

[@CucumberOptions](http://twitter.com/CucumberOptions)(features = { "src/test/java/features" }, glue = { "com.cucumber.stepdefs" }, plugin = { "pretty",
        "json:target/cucumber/cucumber.json" })

public class TestNGRunCucumberTest {

DesiredCapabilities capabilities = new DesiredCapabilities();

String username = " bharadwajpendyala";
    String accesskey = " qYlLn1IzVrC2U41zM4kyjv35EvpHxR2tyMB4aEBlkNMmvpnQ5A";
    protected static RemoteWebDriver driver = null;
    String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    boolean status = false;
    protected String baseURL = "[https://www.google.com](https://www.google.com)";
    private TestNGCucumberRunner testNGCucumberRunner;

[@BeforeClass](http://twitter.com/BeforeClass)
    [@Parameters](http://twitter.com/Parameters)(value = { "browser", "version" })
    public void beforeClass(String browser, float version) {
        capabilities.setCapability("build", "Cucumber_Project");
        capabilities.setCapability("name", "Querying in google engine");
        capabilities.setCapability("platform", "Windows 10");
        capabilities.setCapability("browserName", browser);
        capabilities.setCapability("version", version);
        try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        testNGCucumberRunner = new TestNGCucumberRunner(this.getClass());
    }

[@Test](http://twitter.com/Test)(groups = "cucumber scenarios", description = "Runs Cucumber Scenarios", dataProvider = "scenarios")
    public void scenario(PickleEventWrapper pickleEvent, CucumberFeatureWrapper cucumberFeature) throws Throwable {
        testNGCucumberRunner.runScenario(pickleEvent.getPickleEvent());
    }

/**
     * [@return](http://twitter.com/return) returns two dimensional array of {[@link](http://twitter.com/link) CucumberFeatureWrapper}
     *         objects.
     */
    [@DataProvider](http://twitter.com/DataProvider)
    public Object[][] scenarios() {
        return testNGCucumberRunner.provideScenarios();
    }

[@AfterClass](http://twitter.com/AfterClass)
    public void tearDown() {
        driver.quit();
        testNGCucumberRunner.finish();
    }
}

After executing the above code for performing automation testing with Selenium, Cucumber, & TestNG. It is important to observe the details of your Selenium automation tests. LambdaTest provides every inch of information, from analytics to video logs for you to observe the output of your automation testing with Selenium.

Automation Dashboard:

Navigate to automation dashboard of lambdatest engine to view number of concurrent sessions being active and browser info as highlighted in the above screenshot.

It provides the logs, metadata information, screenshots and video recording for the tests executed. Click on test to view the details specified above as in below snapshot.

Analytics View:

Analytical view of tests execution information could be viewed by click on analytics tab. This would provide a comprehensive view of builds passed, failed, day of execution, time taken, bugs logged from the testing etc. You can take a glance at it in the below image.

Timeline View:

Timeline would provide the information of test suite executed as a whole. Time and date of execution browser information, failures and error information if any. You can view tests executed in the form of build or test view.

To summarize we have explained what is cucumber, how does it help overcome challenges of traditional test methodologies. We have ran our first test script automation testing with Selenium and Cucumber framework after understanding what cross browser testing is all about. Also, how cross browser testing could be simplified using parallel cloud testing solution like LambdaTest. We have created a cucumber framework and configured it with LambdaTest integrating TestNG for parallel testing. Happy Testing! 🙂

Gauge Framework — How to Perform Test Automation

Bharadwajpendyala12 — Thu, 18 Aug 2022 05:44:24 +0000

Gauge is a free open source test automation framework released by creators of Selenium, ThoughtWorks. Test automation with Gauge framework is used to create readable and maintainable tests with languages of your choice. Users who are looking for integrating continuous testing pipeline into their CI-CD(Continuous Integration and Continuous Delivery) process for supporting faster release cycles. Gauge framework is gaining the popularity as a great test automation framework for performing cross browser testing.

This article would help you understand the benefits of using the Gauge framework for Selenium test automation, installing and running your first automation script for test automation with Gauge test automation framework. I will also show you how to use LambdaTest Selenium grid for executing your automation script for test automation with Gauge test automation framework to perform extensive, automated browser compatibility testing with Gauge on cloud. Here we go!

If you’re new to Selenium and wondering what it is then we recommend checking out our guide — What is Selenium?

This Playwright Automation testing tutorial will guide you through the setup of the Playwright framework.

What Is Cross Browser Testing?

Cross Browser Testing is the process to validate the quality of the web application across different browsers, browser versions running on numerous operating systems to verify compatibility and behaviour of an application under test.

The browser differences are induced due to rendering engines. Each browser version has a unique engine responsible for representing the web elements in a different manner.

We have a plethora of platforms, browser, browser versions to test. It would be strenuous and probable infeasible to have all the browsers installed in your local system as you perform test on them one by one. Also, you can’t go ahead having a device lab of your own. So how would you perform cross browser testing in detail?

LambdaTest — A Free Cross Browser Testing Cloud

LambdaTest is a scalable, cloud-based testing platform designed to help you perform browser compatibility testing across 2000+ browsers and browser versions executing on various OS.

LambdaTest can help you with live, interactive, manual cross browser testing as well as automated cross browser testing with the help of the Selenium grid supporting all the major programming languages, automation frameworks compatible with Selenium WebDriver and offers a plethora of browsers to test from.

In order to overcome the manual overhead and time consumed in testing automating the repetitive task would be delightful. And combining your automated tests with Parallel Execution would save a considerable amount of execution time.

Executing a huge number of tests in parallel locally could be a challenge due to resource constraints in terms of scalability. However, you can easily scale with cloud based, cross browser testing tools such as LambdaTest would help you to effortlessly perform parallel execution of your automation test scripts.

Why Choose Gauge For Cross Browser Testing Out Of Other Test Automation Frameworks?

Now, that we are aware of the basics regarding the Gauge framework and cross browser testing. Let me tell you why I prefer to perform test automation with Gauge test automation framework over other test automation frameworks.

Wide range of templates are available in a language of your choice to have an easy kick start to the project.
Command Line support which makes the integration easier with CI-CD tools.
Test automation with Gauge framework supports all major programming languages along with GoLang.
It supports wide variety of plugins, here is a list of all plugin categories available.
Language Runners: Java runner, C# runner, C# runner(.Net Core), Ruby runner, Javascript runner, Golang runner and Python runner.
IDE Plugins: Visual Studio Code, IntelliJ and Visual Studio.
Reports: HTML Report, XML Report, JSON Report, Spectacle and Flash.
Build Management: Maven and Gradle
You can even create your own plugin using their open source Gauge API.
Quickly detect issues through screenshots of event failures and multiple reporting formats available instead of navigating through stack traces.
Allows you to create scalable tests through parallel execution and being an open-source it offers integrations with cloud-based solutions like LambdaTest for addressing the cross browser testing goals.
Better management of data sets through data driven testing with multiple data sets is possible while keeping specifications highly readable.
Easy to write effective test cases by members across the team.
Automated cross browser testing made easy.
Scalability of product requirements across the QA, Dev and Business teams.

Try this online Selenium Automation Grid to run your browser automation testing scripts.

Is Gauge Framework Meant For BDD(Behaviour-Driven Development)?

Users often tend to compare creation of spec files for test automation with Gauge framework is the same way as we develop feature files in BDD using Gherkin, believe me there is a lot of difference in between them.

Behaviour Driven Development focuses more on conversations, collaborations and automation in order to achieve the business needs, test automation with Gauge framework following Acceptance Test Driven Development focuses and emphasize more on functional testing.
Feature file in BDD is replaced by spec file for test automation with Gauge framework.
Feature file is created with Gherkin Language, Spec file is created using markdown language.
Test automation with Gauge test automation framework provides templates for automation where BDD doesn’t depending upon the language.

Gauge has all the BDD features intact making BDD a subset of test automation with Gauge framework.

Installing & Setting Up Gauge For Your Operating System

Download the latest build of gauge from GitHub-Gauge. Depending upon the operating system, download the required binaries.

Installing Gauge Framework in Mac:

Installing Gauge framework in macOS using Homebrew with below commands:

brew update
brew install gauge.

Installing Gauge Framework in Linux using apt-get:

Add GPG key with below command:
sudo apt-key adv --keyserver hkp://pool.sks-keyservers.net --recv-keys 023EDB0B
Add Gauge framework repository to the list.
echo deb https://dl.bintray.com/gauge/gauge-deb nightly main | sudo tee -a /etc/apt/sources.list
Install Gauge framework with below commands:

sudo apt-get update
sudo apt-get install gauge

Installing Gauge Framework in Windows:

Complete the installation of required packages of programming languages. It works with all languages like JavaScript, C#, Java, Python and Ruby.

Extract it to a desired location and add it to system path.

Using CLI To Get Started With Project Creation For Gauge

To verify the version of the Gauge test automation framework, open cmd and type command “gauge --version” as shown in the image below.

Step 1: Gauge framework has a list of project templates defined already for the language of your need. You can take a look at it by typing in command “gauge init --templates”.

Step 2: Navigate to a folder of your choice and create a java project using command “gauge init java”.

Step 3: To run the sample project and view report you can use the command “gauge run specs”.

As you can see the path to report generated in CLI(Command Line Interface), sample report generated for the test stub executed is as below.

Creating Your First Project Using Gauge For Test Automation

As we have made use of command line till now, for a better coding experience we can make use of IntelliJ IDE to create our first script. Start with creating a maven project with below information.

Navigate to File and select New Project.
Project Type as maven should be selected.
You need to select the below mentioned name:
“com.thoughtworks.gauge.maven:gauge-maven-plugin”
This would help you to generate an archetype.
If you don’t see the archetype mentioned above, add Archetype by entering below info.
GroupId: “com.thoughtworks.gauge.maven:
ArtifactId: “gauge-archetype-java”
After selecting the archetype, you need to click on next. By doing so, you will be providing the Artifact ID & GroupID for your respective maven project.
GroupId: com.thoughtworks.gauge.maven
ArtifactId: GoogleSearchProject
Version: 1.0-SNAPSHOT
Before you click on next for finishing the process, make sure that you verify the Maven settings thoroughly.

Once you have successfully created a project it would look something as below.

Running First Automation Script Using Gauge Framework With Selenium Grid

Step 1: Create a specification file for searching a keyword in google and if results are displayed as expected.

Specification heading in the specs file would be denoted with ‘#’ notation as defined in our project.
Example: #Google Search Specification

Scenario would be defined using ‘##’ notation, quoting an example below for reference.
Example: ## Searching google should return the name of the query.

Steps would be defined using ‘’ notation.
**Example: * **Navigate* to “https://www.google.co.in“. Spec file create for Google search is as below:

# Google Search Specification

Searching google should return the name of query

Navigate to “https://www.google.co.in”
Enter query “query” in the search box and submit
The search results should show “LambdaTest” as a result

Step 2: Create a step implementation file, with below-mentioned code to define acceptance tests as defined in specification files.

package com.thoughtworks.gauge.maven;

import com.thoughtworks.gauge.Step;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import static org.junit.Assert.assertEquals;

public class StepImplementation {

public static WebDriver driver;

[@Step](http://twitter.com/Step)("Navigate to <[https://www.google.co.in](https://www.google.co.in)>")
    public void navigateTo(String url) throws InterruptedException {
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\Dexy\\IdeaProjects\\GaugeSampleProject\\libs\\chromedriver.exe");
        driver = new ChromeDriver();
        driver.get(url);
        Thread.sleep(2000);
    }

[@Step](http://twitter.com/Step)("Enter query <query> in the search box and submit")
    public void enterQuery(String queryL) throws InterruptedException {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.sendKeys("LambdaTest");
        searchBox.submit();
        Thread.sleep(2000);
    }

[@Step](http://twitter.com/Step)("The search results should show <Jupiter> as result")
    public void verifySearchResult(String resultString) {
        WebElement result = driver.findElement(By.className("LC20lb"));
        assertEquals(resultString, result.getText());
    }
}

Step 3: Execute the test case from the specification file created. Right click on the file and select option as shown in the image below. Browser specification could be provided in env folder’s default.properties file as

#Browser Usage
BROWSER = CHROME

We can provide maven command to execute with conditions as below.

To execute
mvn gauge:execute
To execute all specs:
mvn gauge:execute -DspecsDir=specs
For parallel execution:
mvn gauge:execute -DspecsDir=specs -DinParallel=true
Node specification during parallel execution:
mvn gauge:execute -DspecsDir=specs -DinParallel=true -Dnodes=2

Step 4: Once execution has been successfully completed you can verify the status of the test in the terminal.

Reports generated can be viewed in reports folder — ‘GaugeSampleProject\reports\html-report’

I would be providing the link to GitHub repository for code references below.

https://github.com/bharadwaj-pendyala/LambdaTest_Gauge

With the above step being done, we have successfully completed installation of Gauge for test automation, creating our first script and running it. Now let’s jump into some of the advanced concepts and values adds which could decrease our execution time drastically for faster releases.

This Cypress test automation testing tutorial will help you learn the benefits of Cypress automation.

Cross Browser Testing with Parallel Execution using Gauge Framework

Problem Statement:
When it comes to cross browser testing there are more than 6 active browsers usage and each browser having more than 4 to 5 version of it in use aggressively.

Case Study Depiction:
Let’s consider a case study where we have a regression test repository consisting of 1000 test cases to validate per release. When we consider cross browser testing effort, a calculated effort would be around 1000 test cases* 6 browsers * 5 versions each = 30,000 Test Cases.

Solution:

Local Execution using Selenium-Grid:
You would end up executing 30,000 test cases in total. Manually handling the effort would be impossible. Parallelly executing the test cases using Selenium Grid might decrease the effort, however, scalability would be an issue, you can’t execute more than 10–20 instances on your local machine depending on the physical memory and the number of cores CPU has. Also, installing thousands of browsers in a system would be very infeasible.
Cloud Execution using LambdaTest:
Utilizing cloud resources of LambdaTest would drastically cut down the effort as scalability wouldn’t be an issue. LambdaTest Selenium Automation Grid for Gauge empowers you to perform end-to-end automation tests on a secure, reliable, and scalable Selenium grid on their cloud platform. You can perform automated cross browser testing with Selenium scripts on 2000+ browsers and operating systems environments providing a higher test coverage and at significantly fewer build times. LambdaTest will help you evaluate how well your web application renders when accessed through a variety of different browser. You can perform automated cross browser testing of your locally hosted web pages using Lambda Tunnel. You could also perform automated parallel test to run a single test across multiple browser/OS configurations, simultaneously.

Configuring Our Current Gauge Framework For Test Automation With LambdaTest

Step 1: Create an account for free on LambdaTest to start cross browser testing with parallel execution. For a free account, only 1 concurrent user is available, as more than 1 VM’s need account upgrade. Feel free to look at their pricing plans over here:
https://accounts.lambdatest.com/billing/plans

Step 2: Navigate to “Selenium Desiredcapabilities Generator” tool by LambdaTest at https://www.lambdatest.com/capabilities-generator/ as shown in image below.

Step 3: Select the required programming language and operating system and browser configuration as per the requirement, you can enable screenshots and video recording as well. You have a feature of enabling advance configuration as well, which lets you define tunnel, console and network logs and time zone selections.

Step 4: Copy the code and define the capabilities for remote webdriver in your Step Implementation file. Code for the same as specified below.

package com.thoughtworks.gauge.maven;

import com.thoughtworks.gauge.Step;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import java.net.MalformedURLException;
import java.net.URL;
import static org.junit.Assert.assertEquals;

public class StepImplementation {

String username = " YOUR_USERNAME";
    String accesskey = " YOUR_ACCESS_KEY";
    static RemoteWebDriver driver = null;
    String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    boolean status = false;

[@Step](http://twitter.com/Step)("Navigate to <[https://www.google.co.in](https://www.google.co.in)>")
    public void navigateTo(String url) throws InterruptedException {
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("build", "your build name");
        capabilities.setCapability("name", "your test name");
        capabilities.setCapability("platform", "Windows 10");
        capabilities.setCapability("browserName", "Chrome");
        capabilities.setCapability("version", "71.0");
        capabilities.setCapability("visual", true);
        try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        driver.get(url);
        Thread.sleep(2000);
    }

[@Step](http://twitter.com/Step)("Enter query <query> in the search box and submit")
    public void enterQuery(String query) throws InterruptedException {
        WebElement searchBox = driver.findElement(By.name("q"));
        searchBox.sendKeys("LambdaTest");
        searchBox.submit();
        Thread.sleep(2000);
    }

[@Step](http://twitter.com/Step)("The search results should show <Jupiter> as result")
    public void verifySearchResult(String resultString) {
        WebElement result = driver.findElement(By.className("LC20lb"));
        assertEquals(resultString, result.getText());
    }

}

Specified parameters required while setting desired capabilities required for executing test remotely.

PARAMETER	DESCRIPTION	EXAMPLE
YOUR_USERNAME	Lamda Test username should be provided as an input	tester1
YOUR_ACCESS_KEY	Access token can be generated through lambdatest webapp	qYlLn1IzVrC2U41zM4kyjv35EvpHxR2tyMB4aEBlkNMmvpnQ5A
gridURL	To hit lamdatest grid URL of your account	“@hub.lambdatest.com/wd/hub”
build	Your build name	“Build_12.2.012”
name	Your test name	“TC_01_Sample Test Case”
platform	Specify desired platform	Windows 10
browserName	Specify desired browser for test to execute	Chrome
version	Specify desired browser version	“71.0”
visual	Specify if video recording is required for the test	TRUE

Step 5: Execute the specification and observe the terminal for test status.

Step 6: Login to LambdaTest Dashboard, select the automation tab to view your logs of completed tests. Dashboard view would let you see the analytical information related to the tests triggered on the LambdaTest.

Logs:

Automation logs which are a part of the automation dashboard provides you with information related to server information, test ID, time stamp of execution in JSON format.

Metadata

Metadata under automation dashboard provides information related to input, meta and browser configuration as shown in image below.

You can even download the test logs such as screenshots and video recordings, if opted from this tab.

Analytics Dashboard

Analytic view of builds ran, time consumed, build related information of test status such as pass or fail and bugs logged which can be viewed in both build view and test view.

You can even sort the data using date, user information.

Dashboard

Default dashboard view provides you with the overview of how many active concurrent sessions are running and minutes consumed in execution and the build statuses.

Automation Dashboard View

Automation dashboard view would help you view the timeline of tests executed and information of logs, metadata and network related information for each test explicitly.

Test Script maintenance becomes a nightmare once the test framework attains maturity or if we have to make use of the framework for upcoming builds without any problems. Test automation with Gauge framework make both, test authoring and test maintenance, an easy task.

Another highlight for performing test automation with Gauge framework is the excellent support system, you can reach out to the creators through creating a GitHub issue if you face any roadblocks and if you are in need of help with the framework.

To conclude what we have discussed so far, we have kick started our framework setup of the Gauge framework from scratch and created our first script and integrated it with LambdaTest to achieve our cross browser testing and parallel execution goals. Discussed the features and benefits of the tool, importance and the need of cross browser and parallel test execution along with execution and analysis of logs in LambdaTest platform.

There is a lot more to LambdaTest than Selenium based automated cross browser testing. You can reach out to their customer support chat from here in case of any questions. You could also schedule a free of cost, complete product demo.

Thank you for reading the article, please let me know your thoughts in the comments section.

How To Build Your First CI/CD Pipeline With Travis CI?

Bharadwajpendyala12 — Wed, 17 Aug 2022 10:45:16 +0000

Continuous Integration is considered one of the best practices in development where code integrations are done frequently into the code repository rather than waiting to commit a larger version. As a part of continuous integration, the developer should ensure that integrations should not break the already available code, as being a shared repository would have a significant impact. To solve this problem and show how continuous integration and testing works, we’ll use one of the most popular continuous integration services: Travis CI pipeline.

Travis CI pipeline would help the user report automatic build changes and test the integrations and deployment management. It also helps your code repository with improved and shippable software quality with reduced risks and better collaboration.

In today’s blog, I will walk you through the Travis CI overview and the advantages of using Travis CI. You will also see how to configure Travis CI pipeline with your current test automation repository over an online Selenium Grid.

Now, Automate Cypress cloud tests and perform browser automation testing with LambdaTest.

Introduction to Travis CI

Travis CI is a cloud-based CI service that builds and tests your projects hosted on GitHub. It would trigger a build process to validate the build and report any failures for every commit made. It fetches the commands from a .travis.yml file, a YAML-based file format, from your project’s root folder to get started with the build process. Travis YML file would enable the Travis CI to understand which programming languages are being used, branch specifications required for the build to be triggered, installation of dependencies if there are any required.

Every other code repository has its Continuous Integration tools nowadays. Let’s take Bitbucket being an Atlassian code repo, Bamboo is a tool that comes along. If you prefer GitLab as your code repo, GitLab CI exists. Tool selection could also be majorly impacted due to the code repository being used for version controlling. Currently, we have a myriad of tools available which are both free and open source. To choose the tools that best suits your requirement, you can go through some of the top CI/CD tools available today. Also, you can make a comparison of the top CI/CD tools to make your selection.

Dependencies rely on the development environment being used and the code repositories used for version control purposes.

In the case of Travis CI, below are some of the prerequisites to get started.

A mandatory GitHub account
Permission for integrating GitHub code repo with the Travis CI.

Why Travis CI?

It seamlessly integrates with GitHub and is easy to set up. Users need to Sign Up with GitHub and authorize to sync their GitHub projects which we would have a detailed walkthrough in the upcoming configuration section of the article.
Extensive Travis CI documentation is available to get started, where you can head over for reference. It has sections related to installing dependencies, configuration options in different programming languages, and encryption and integration topics discussed in detail.
Support almost every other programming language and cloud solution for deployments.
Travis CI would seamlessly integrate with cross browser testing solutions such as LambdaTest for parallel testing.
Travis CI is not platform-dependent as it supports multiple platforms apart from Windows, such as Mac and Linux. Infrastructure dependencies might vary depending upon the environment being used. However, you can navigate through the detailed documentation available.
Travis CI is free for open-sourced projects, i.e., projects that are public over GitHub. For private repositories, there is an enterprise version available.
Automatic build triggers when there is a change in the code repository with the user’s desired configuration. The user can select the branch name specified in the Travis yml file in the root folder of your project.

Travis CI Challenges

With integrations limited to GitHub, GitLab, Bitbucket, and Assembla cloud repository, using Travis CI outside of GitHub isn’t as user friendly as with GitHub.
Private repo comes in an Enterprise Version where you have to pay after trial version, which involves the first 100 builds for free.

Are you using Playwright automated testing? Now run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud.

Building your first CI/CD pipeline with Travis CI

Any public repository can be used to create a free pipeline. Let’s get started with the Configuration of Travis CI pipeline.

Step 1: Log in to your GitHub account with a valid username and password. Select the repo you are planning to integrate with Travis CI pipeline. Make sure your repo is up to date.

Step 2: Log on to Travis CI and sign up with your GitHub account used above.

Step 3: Provide authorization as requested, reference provided in the below image.

Step 4: Once you have completed the sign-up and authorization process, you would be redirected to the dashboard, where you would be prompted for a sync account option towards the left-hand corner of your screen. This would ideally sync all your existing GitHub projects with your Travis CI pipeline.

Step 5: Under Legacy Service Integrations, you can view all your current repositories synced on your Travis CI pipeline.

By default, the CI process for all repositories would be turned off. Toggle the button to turn on the integration for a specific project.

Step 6: Now, you need to add a .travis.yml file to your current automated test suite’s root folder.

What is a .travis.yml file?

Travis YML is a configuration file placed in your project’s root folder to define how to configure the build-related information.

If a .travis.yml is not in your repository or is not valid YAML, Travis CI pipeline will ignore it. You can also find all language-related templates from the Travis CI language template. The file consists of information such as what programming language is being used, what operating system is being used, branch name of the repo, which is being targeted.

Once the .travis.yml file is created and pushed to the GitHub repo, upcoming commits to the repo would trigger a build in Travis CI cloud, similar to that of the below image. After successful integration with the help of a configuration file, Travis CI pipeline has a certain mechanism that compiles the GitHub code whilst it would pull in the code for the first time and then on each commit to the repo or the specific branch trigger a compilation process. Provided below are the screens of Travis CI pipeline.

Active Repositories View:

JobView after build completion:

Job Log Sample:

View Config with the configuration information:

Step 7: Fork the GitHub repo and sync with Travis CI pipeline through the above process.

If you don’t want to fork the above-mentioned repo, make sure you select a repository, which is not empty in your GitHub account enabled with build tool configuration such as Maven or Ant. This would be helpful in the compilation process.

Step 8: Enable the synced repository. Once you enable it, this synced repo should be visible on my repositories page.

Step 9: Add .travis.yml file to the repo with the below build configuration for compilation.

language: java
sudo: false
script: "mvn test"

Ensure that you enable your framework so that tests get triggered through the maven command — “mvn test” as specified in the configuration file.

Step 10: Once the above configuration file is committed and pushed to the main branch in GitHub. You would observe a test getting triggered with build and worker information in the job log view. This process would essentially trigger your first compilation by pulling in code from the GitHub account onto the VM created by Travis CI pipeline.

As we have configured our tests to run on the LambdaTest Platform through RemoteWebDriver class, once a new commit is made, it triggers execution of the specified test suite onto the LambdaTest Platform. This will ideally identify if any user-made commit is breaking the build or the automated test suite.

Integrating Travis CI pipeline for automated testing with LambdaTest

LambdaTest is a cloud-based cross browser testing solution, which would enable us to perform automated and live interactive cross browser testing on more than 3000 browsers and operating systems online. This would help you scale up and down without much of a hassle in terms of resource allocation and deallocation. It would also help you support budget estimations on resources used for parallel and cross browser testing.

Testing Local or Privately Hosted Projects

Global enterprises use private servers for their IT purposes for enabling better web protection and security. LambdaTest would seamlessly integrate with such platforms with the help of a secure shell tunneling feature called LambdaTest Tunnel. This would also enable you to test locally hosted web pages. Let’s discuss how to configure LambdaTest Tunnel.

Step 1: Navigate to Automation Dashboard as shown in the below image after logging in to your LambdaTest platform.

Step 2: Once you click on configure tunnel feature, you would be prompted with an overlay with two sections being internal server configurations and locally hosted web page testing features.

Step 3: Copy the access token related to the desired feature of an application under test. Please refer to the below token for reference.

LT -user [lambdatest@sampleemail.com](mailto:lambdatest@sampleemail.com) -key qYlLn1IzVrC2U41zM4kyjv35EvpHxR2tyMB4aEBlkNMmvpnQ5A

We would be making use of this token while configuring our desired capabilities in our next section of the article below to demonstrate Parallel Testing with LambdaTest.

Try this online Selenium Automation Grid to run your browser automation testing scripts.

Parallel Testing With LambdaTest Selenium Grid

We will see how to perform parallel testing with an online Selenium Grid using an automated testing pipeline, like Travis CI pipeline. We would be making use of our Cucumber TestNG code repository for reference. You need to clone the code and then import the code into the desired IDE.

We would be declaring our LambdaTest username and password as global environment variables in the yml file in the below format to be considered for execution.

env:
 global:

   - LT_USERNAME=${LAMBDATEST_USERNAME}
    - LT_ACCESS_KEY=${LAMBDATEST_KEY}

Where the global variable for LambdaTest username would be LT_USERNAME, and LambdaTest password would be LT_ACCESS_KEY. The same can be retrieved from the Profile Section.

Your .travis.yml code would be something similar to as below.

language: java
sudo: false
script: "mvn test"
env:
 global:
    - LT_USERNAME=${LAMBDATEST_USERNAME}
    - LT_ACCESS_KEY=${LAMBDATEST_KEY}

You can make use of this variable while trying to trigger a remote web driver execution, as shown in the below code in the case of our Cucumber+TestNG code.

package com.cucumber.tests;

import java.net.MalformedURLException;
import java.net.URL;

import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.DataProvider;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

import cucumber.api.CucumberOptions;
import cucumber.api.testng.CucumberFeatureWrapper;
import cucumber.api.testng.PickleEventWrapper;
import cucumber.api.testng.TestNGCucumberRunner;

@CucumberOptions(features = { "src/test/java/features" }, glue = { "com.cucumber.stepdefs" }, plugin = { "pretty",
        "json:target/cucumber/cucumber.json" })

public class TestNGRunCucumberTest {

    DesiredCapabilities capabilities = new DesiredCapabilities();

    /*
     * Previous declarations for LambdaTest Connect 
     * String username = "LT_USERNAME"; 
     * String accesskey = " LT_ACCESS_KEY";
     */

    protected static RemoteWebDriver driver = null;
    String gridURL = "@hub.lambdatest.com/wd/hub";
    boolean status = false;
    protected String baseURL = "https://www.google.com";
    private TestNGCucumberRunner testNGCucumberRunner;

    @BeforeClass
    @Parameters(value = { "browser", "version" })
    public void beforeClass(String browser, float version) {
        capabilities.setCapability("build", "Cucumber_Project_Google");
        capabilities.setCapability("name", "Querying in google engine");
        capabilities.setCapability("platform", "Windows 10");
        capabilities.setCapability("browserName", browser);
        capabilities.setCapability("version", version);
        try {
            driver = new RemoteWebDriver(new URL("https://" + LT_USERNAME + ":" + LT_ACCESS_KEY + gridURL),
                    capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        testNGCucumberRunner = new TestNGCucumberRunner(this.getClass());
    }

    @Test(groups = "cucumber scenarios", description = "Runs Cucumber Scenarios", dataProvider = "scenarios")
    public void scenario(PickleEventWrapper pickleEvent, CucumberFeatureWrapper cucumberFeature) throws Throwable {
        testNGCucumberRunner.runScenario(pickleEvent.getPickleEvent());
    }

    /**
     * @return returns two dimensional array of {@link CucumberFeatureWrapper}
     *         objects.
     */
    @DataProvider
    public Object[][] scenarios() {
        return testNGCucumberRunner.provideScenarios();
    }

    @AfterClass
    public void tearDown() {
        driver.quit();
        testNGCucumberRunner.finish();
    }
}

Once you replace the TestNG Runner file with the above code for the integration of LambdaTest based parallel execution with the help of Travis CI automated testing pipeline, this would help you get the test execution trigger in the LambdaTest platform as shown in the image below.

Conclusion

We have discussed the importance of continuous integration and how it can be leveraged using Travis CI pipeline and its advantages and disadvantages. We have seen the need for parallel and cross browser testing using cloud solutions such as LambdaTest with an automated testing pipeline. Also, Travis CI’s configuration with one of our frameworks using Cucumber and TestNG for triggering tests on LambdaTest to achieve our cross browser testing goals.

To kick start a deployment, you would need a quality check in place to validate the build. You cannot depend on a manual test process to test each and every build integration into the environment. It is not automated and requires human dependency, which proves to be tiresome and has a high chance of failure. To avoid manual quality checks for providing a sign-off to the build, we ensure that we have an automated test suite that acts as a checkpoint in the Continuous Integrations through Continuous Deployment processes with Travis CI pipeline’s help.

Thanks for reading the article. Have a great day and Happy Testing!

How Pro-Testers Use CSS Selectors In Selenium Automation Scripts?

Bharadwajpendyala12 — Tue, 16 Aug 2022 15:08:00 +0000

CSS Selectors in Selenium are used to identifying a user desired HTML web element. This fits into an element locator strategy of automated test development where the primary aim is to interact with page elements through different types of locators. While there are several other methods to identify element locator such as id, name, class name, link text, partial link text, XPath, tag name etc. other than CSS selectors in Selenium we prefer the CSS way due to below benefits.

New to CSS Selectors? Check out this Ultimate CSS Selector cheat sheet to boost your web designing career.

If you’re new to Selenium and wondering what it is then we recommend checking out our guide — What is Selenium?

Also, Try this online Selenium Automation Grid to run your browser automation testing scripts.

Why Choose CSS Selectors in Selenium Over Other Element Identifiers?

Faster Identification and reduced test execution time — Compared to XPath CSS selectors in Selenium would tend to identify the elements better as most used browsers such as Chrome and Firefox are tuned for better performance with CSS selectors in Selenium. Here is the link which provides performance stats for reference.
Availability of better documentation.
Enhanced readability.

Different Ways Of Identifying CSS Selectors in Selenium

Let’s discuss the different ways of identifying the CSS Selenium locators of web elements.

Class Selector Conundrum

‘.’ represents a class in CSS and is used to identify web elements with a specific class. For example, if our web element of p is consisting of the class below. The following could be correlated to XPath programming of identifying the class with the tag name [@class = ’value’ ] or it could also be correlated with class name element locator in Selenium.

<p class=" pages-sub-title"> Lambda Test blog post on validating CSS Selectors in Selenium </p>

CSS selector in Selenium for the same could be identified with the class name as
“.page-sub-title”
The CSS syntax in Selenium of class selector would be –
<.> < Class Name> (or)
<.>

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from LambdaTest:

This Cypress test automation tutorial will help you learn the benefits of Cypress automation Check out now.

ID Selector Conundrum

‘#’ represents id in CSS and is used to identify web elements with a specific id. Please find an example listed below for matching the web element with ID. If you observe it at a high level this can be compared to that of ID name selector using Selenium methods and also locating the element with id in XPath programming such as tag name [@id = ‘id_value’ ].

<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143">
<a href="[https://www.lambdatest.com/blog/category/lambdatest-updates/](https://www.lambdatest.com/blog/category/lambdatest-updates/)">Product Updates</a>
</li>

CSS selector in Selenium for the same could be identified with the class name as

menu-item-143 or div#menu-item-143

The CSS syntax in Selenium of the ID selector would be –
<#> < ID Name> (or)
<#>

Attribute Selector Conundrum

Attributes could be represented in key-value pairs, for example in the below example we have multiple attributes and values such as ‘role = dialog’, ‘data-dismiss = modal’ etc. Xpath programming version of attribute selector could be correlated as tag name [@attribute key = ‘attribute value’ ].

<div class="modal fade" id="whitepaper-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <span class="close" data-dismiss="modal"  style="top: 4px; position: absolute; right: 10px;">
<span aria-hidden="true">×</span>
 </span>

CSS selector in Selenium for the same could be identified with the class name as
div[role=’dialog’] or [role=’dialog’]

‘Class or ID’ & Attribute Selector Conundrum

Class or ID and attribute combination could serve as a better strategy which is more powerful than that of using a class, id or attribute selector alone. In order to achieve uniqueness of the element, if above 3 ways of identifying fails due to multiple instances of the same locator this could be a go-to solution. Let’s deduct the element locator strategy for below example from our LambdaTest blog.

<nav id="site navigation" class="navigation main-navigation" role="navigation">

In the above HTML snippet if you observe there is a space in the class name which is “navigation main-navigation” this could be represented as navigation.main-navigation space can be ignored and replaced with ‘.’

CSS Selector in Selenium for the same could be identified as below:

nav.navigation.main-navigation[role='navigation']

The CSS syntax in Selenium of class or id and attribute selector would be:

<HTML Tag> <Class Or ID> [ <attribute key> = ‘<attribute value>’ ]

<Class Or ID>  [ <attribute key> = ‘<attribute value>’ ]

SubString Match Conundrum

In order to enable even powerful querying technique, we can make use of sub-string matches with ^ indicated prefix, $ indicating suffix and * indicating substring. If you observe closely this is similar to the representation of XPath functions such as starts-with, contains and ends with. Let’s get into detailed usage of all the three ways of dealing with matches.

^ Indicating a prefix match

Syntax:

<HTML Tag> [ <Class Or ID> ^= <Class or ID Name> ]

Example:

div[class^=’aria-label’]

$ Indicating a suffix match

Syntax:

<HTML Tag> [ <Class Or ID> $= <Class or ID Name> ]

Example:

a[class$=’aria-label’]

* Indicating a substring match

Syntax:

<HTML Tag> [ <Class Or ID> *= <Class or ID Name> ]

Example

p[class*=’aria-label’]

Inner Text Conundrum:

One of the most easily readable syntaxes yet powerful. You can make use of this mechanism to identify text anywhere on the DOM using a string pattern.

Syntax:

<HTML Tag> <:> <contains> < (text) >

Example

div:contains("^lambdatest$")

“Navigating Through Child Elements” — Child Conundrum:

This is an advanced way of handling the element locators through CSS selectors in Selenium while navigating through child elements. There are three possibilities as below:

Direct Child
Sub Child
Nth Child

Direct Child

Direct child to the parent locator is represented with a ‘>’ symbol. Let’s assume we have a button tag inside a div tag which happens to be a direct child as shown in HTML snippet below.

Example:

div is parent locator and the button is the child locator is represented as:
div.lambdatest-xs-ng>button
Syntax:
Parentlocator > directchildlocator

Sub Child or Child

Sub child identification includes the same way to identify the elements as that of the direct child but we can ignore ‘>’ symbol as sub child as shown in the example below.

Example:

<div id="primary" class="content area">
<div id="content" class="site content" role="main">
<header class="archive header">
<h1 class="archive title">Category Archives : Infographics </h1>

Sub Child or child would be represented as:

div#primary header

Syntax:

<parent locator=""> <child locator=""> or <sub child="" locator=""></sub></child></parent>

Nth Child For Opting A Specific Value From A List

This is an advanced way of handling the element locators through CSS selectors in Selenium while navigating through child elements. There are three possibilities as below:

Direct Child
Sub Child
Nth Child

Direct Child

Direct child to the parent locator is represented with a ‘>’ symbol. Let’s assume we have a button tag inside a div tag which happens to be a direct child as shown in HTML snippet below.

Example:

<div class="lambdatest-xs-ng">
 <button id="tertiary" class="sidebar-container" role="complementary">

div is parent locator and the button is the child locator is represented as:

div.lambdatest-xs-ng>button

Syntax:

Parentlocator &gt; directchildlocator

Sub Child or Child

Sub child identification includes the same way to identify the elements as that of the direct child but we can ignore ‘>’ symbol as sub child as shown in the example below.

Example:

<div id="primary" class="content area">
 <div id="content" class="site content" role="main">
 <header class="archive header">
<h1 class="archive title">Category Archives : Infographics </h1>

Sub Child or child would be represented as:

div#primary header

Syntax:

<Parent locator> <child locator> or <sub child locator>

Nth Child For Opting A Specific Value From A List

N-th child concept would be useful while navigating through ordered or unordered list elements. N becomes the number of the desired list user wants to select. Let’s go through below example to understand how n-th child works. In o

Example:

<<ul id = "lambdaTestBrowsers">
<li>Chrome</li>
<li>Firefox</li>
<li>Edge</li>
<li>Safari</li>
</ul>

Nth child of firefox from the list of lambda test browsers would be represented as:

#lambdaTestBrowsers li:nth-child(2)

Syntax:

<HTML Tag> <Clas or ID> <list> <:> <nth-child (number of desired item in the list)>

Are you using Playwright automated testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud. Sign up for free.

Conclusion

We have come across different identification strategies through the above element locator conundrums. To get familiar with CSS Selectors in Selenium by querying you make use of Chrome dev tools and also there is an open-sourced tool for the same to try out and view results more interactively at http://flukeout.github.io/. We also discussed the benefits of using CSS selectors in Selenium over other element locators. One of the major drawbacks of the CSS selectors in Selenium is traversing the DOM is not possible with CSS as that of XPath. We can navigate from child to parent and parent to child using XPath. But we can only navigate from parent to child by CSS Selectors in Selenium. If you have any queries or suggestions regarding the CSS Selectors please drop a comment below and I would love to interact. Have fun locating elements through CSS Selectors. Happy testing!