DEV Community: Aditya Dwivedi

WebDriverIO Tutorial For Handling Dropdown In Selenium

Aditya Dwivedi — Fri, 05 Jun 2020 09:48:00 +0000

While performing automated browser testing, there’ll be plenty of times when you’d have to handle the dropdown menu. Often used in forms, dropdown works great when it comes to conserving space and preventing users from choosing the wrong option in a form. I’d have rarely come across a form without dropdown to select a field from multiple options. Thereby, it becomes vital that while testing any website or access form, we know how to handle dropdown with WebDriverIO as well.

In order to perform operations on the dropdown, the ‘Select’ class can be used in Selenium WebdriverIO. In this WebDriverIO tutorial, I’ll explore how to use ‘Select’ to handle dropdown with WebDriverIO.

What Are The Different Types Of Dropdown In WebDriverIO?

There are majorly two kinds of dropdowns you would often find on a website.

Normal dropdown
Custom dropdown

Normal Dropdown

Normal dropdowns are the ones we usually encounter while handling access forms in Selenium. It’s easy to identify a normal dropdown, you just have to open the element tab in the browser and see that dropdown HTML tag. HTML tag should be < select > and the ‘id’ should be ‘dropdown’.

Here is an example of a normal dropdown:

<select id="dropdown">
    <option value="" disabled="disabled" selected="selected">Please select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>

Custom Dropdown

Since with < Select > there aren’t many styling options, developers use custom dropdowns. As we discussed, custom dropdowns are not developed using the < Select > tag but with < div > tag or some other custom tag-based on the frontend framework.

Here is an example for custom dropdown:


<div class="fsw_inputBox travelFor inactiveWidget ">
   <label data-cy="travellingFor" for="travelFor">
      <span class="lbl_input latoBold appendBottom10">Travelling For</span><input data-cy="travelFor" id="travelFor" type="text" class="hsw_inputField font20" readonly="" value="">
      <div class="code latoBold font14 blackText makeRelative">
         <p></p>
         <p class="font14 greyText">Select a Reason (optional)</p>
      </div>
   </label>
</div>

Now, you know the difference between these two dropdowns. In Selenium test automation, custom dropdowns are handled based on the event defined by the developer while normal dropdowns are handled by a special Selenium class object called ‘Select’ class.

How To Handle Dropdown With WebDriverIO?

It’s pretty straight forward to handle dropdown in WebDriverIO! There isn’t a separate class object like Java or any other programming language. Here, WebDriverIO dropdown is also accessed by the simple selector.

With the given HTML example on the normal dropdown, you can find dropdown objects using below syntax using ID selector.

Const drp = $("#dropdown");

There are two options for dropdowns.

Single value dropdown
Multiple value dropdown

There is no difference to access single or multiple value dropdowns except multiple value dropdowns allow the user to select multiple values from dropdown options.

WebDriverIO provides the following operation on the dropdown.

selectByIndex
selectByVisibleText
selectByAttribute

selectByIndex

You can select the dropdown in value by providing the index of the value. The index is nothing but the position of the dropdown value. The index always starts at 0. So, the first value is considered as the 0th Index.

Here, Option 1 is considered as index 0 and Option 2 is index 1

$("selector").selectByIndex(index)

If you want to select Option 1 then you can use below code.

$("#dropdown").selectByIndex(0)

Note: Avoid using selectByIndex when the dropdown value changes dynamically as the value index gets changed frequently.

selectByVisibleText

Another option is selectByVisibleText. This option is very safe to use as we need to use dropdown visible text displayed in the dropdown value.

We can use Option 1 or Option 2 as a selection

Syntax:

$("Selector").selectByVisibleText(text)

If you want to select option 2 using selectByVisibleText() then use below code;

$("#dropdown").selectByVisibleText("Option 2")

Note: When you use selectByVisibleText() keep the visible text as it is or else the element will not identify.

selectByAttribute

selectByAttribute() is something new compared to other frameworks for Selenium test automation. Usually, in other Selenium test automation framework, you’d be using selectByValue option which allows the user to select dropdown using value attribute only. However, WebDriverIO provides a feature to use any attribute and its value exists in the dropdown.

Syntax:

$("Selector").selectByAttribute(attribute, value)

Here, the attribute parameter could be any attribute from < option > tag, and value parameter is the value of the provided attribute.

If you consider normal HTML dropdown code, you can see only one attribute that is “value”. In case, any other attribute provided then you can use that as well.

$("#dropdown").selectByAttribute("value", "1")

Multiple Value Dropdown

If you see the < select > tag has multiple="true" attribute then this dropdown has the capability to select multiple options. When you automate multiple value dropdowns, you have to call the above-explained methods multiple times.

WebDriverIO as of now does not provide a selectAll() or deSelectAll() method option for multiple value dropdown. You need to write custom code for the same as shown below.

How To Select All Dropdown Methods?

 it("select all dropdown value", function () {
       browser.url("https://html.com/attributes/select-multiple/");
       browser.pause(5000);
       const list = $$("select option");
       list.forEach((element) => {
           element.click();
       });
       browser.pause(5000);
   });

A similar way you can deselect the all value by running the same code two times. If you want to select a particular dropdown value from multiple value dropdown then you can use if condition within for loop.

All In All

In this WebDriverIO tutorial, I explored how to handle dropdown with WebDriverIO and it’s methods. It’s easy to handle dropdown with WebDriverIO as you don’t have to use any additional class object. When you compare with Selenium there is one class that is a select class and using it you can perform actions on the dropdown also.

There is no dedicated method to deselect dropdown values in WebDriverIO but by custom code logic, you can perform Selenium test automation as shown in the above example in this WebDriverIO tutorial.

That’s all folks, I hope you liked this WebDriverIO tutorial for Selenium test automation. Help us reach out to more of your peers by retweeting us and sharing this article on social media. Happy Testing!!! 😃

Complete Guide To Handle Multiple Windows With Selenium & Protractor

Aditya Dwivedi — Wed, 20 May 2020 08:50:39 +0000

Every day is a challenge for newbie automation testers! Just when you learned how to perform automated browser testing on a single window, you now come across the challenge to handle multiple windows. Isn’t this a nightmare! Well, no need to worry, I’ve got you covered.

While performing automated browser testing, at times you might end up in situations where you would need to handle multiple windows in Selenium. Your test cases might need you to open a new tab and then switch back to the last window to complete the other pending activities.

Let’s say you want to check if all the There might be a certain situation when you might come across a situation where the current browser tab is not active. Hence, to find these issues before they hamper your user’s experience, you need to make sure you include all the test cases to handle multiple windows in Selenium with Protractor.

In this tutorial, I’ll show you how to handle multiple windows in Selenium with Protractor. If you are not familiar with writing Selenium test automation on Protractor, I’ve already covered it in our previous Protractor tutorial.

Working with Browser Window Handles In Selenium With Protractor

Before we handle multiple windows in Selenium Protractor, we need to know how to identify different browser windows and tabs. It’s pretty straightforward, every browser or tab instance has a Global Unique Identifier(GUID), which makes it pretty easy to access them. GUID identifiers help to handle multiple windows in Selenium Protractor, additionally, Protractor provides useful methods that can be used to handle multiple windows in Selenium Protractor for automated browser testing. So, let’s have a look at these methods.

getWindowHandle()

The getWindowHandle() function in the Protractor returns the string GUID for the current active window in the browser. This is invoked on the browser object as – browser.getWindowHandle();

getWindowHandles()

The getWindowHandles() function returns the GUID’s for all the windows and tabs opened on the active browser windows. This is called via the framework as browser.getWindowHandles();

switchTo()

switchTo() method enables easy way to handle multiple windows in Selenium Protractor, tabs and switch between the two. It shifts the control from the current window to the target windows. The GUID is passed as an argument to indicate the Protractor about the target window or tabs. i.e. browser.switchTo().window(guid);

How to Handle Multiple Browser Windows And Tabs In Selenium with Protractor?

Now that you know how to get the GUID of the browser windows and the methods to handle them, you should be fine. So, let’s look at this issue in more detail with a step by step approach to handle multiple windows in Selenium Protractor.

For ease of understanding, I will start by handling two windows in Selenium.

Steps To Handle Two Windows In The Browser:

First ,let’s open the window and launch the url https://www.lambdatest.com in the browser, to handle multiple windows in Selenium Protractor for automated browser testing.

// this property is used to assign an implicit wait time to 20 seconds for automated browser testing  //
browser.manage().timeouts().implicitlyWait(20000);

// this functions redirects to the url in the browser for automated browser testing //
browser.get(" https://www.lambdatest.com ");

Then by using Selenium Protractor’s getWindowHandle() function, I’ll get the GUID of the currently active window and store it into a variable.

// it fetches the unique identifier for the first window for automated browser testing  //

browser.getWindowHandle().then(function(firstGUID){

Similarly, you can open a new tab/window and navigate to a new URL e.g. https://www.google.com . Further, by using the sleep method, I can indicate to the Selenium Protractor to wait for some time, let’s say 4 seconds, to allow the new tab to load the URL completely. You can even use implicit and explicit wait commands depending on the requirement.

// it will enable to open the second window with a new url for automated browser testing  //
// this functions redirects to the url in the browser //
browser.get( " https://www.google.com " );
element( by.id("two-window")).click();
// make the browser sleep for 4 secs //
browser.sleep(4000);

Next, I’ll get the GUIDs for both the windows i.e . the first window (parent windows) as well as the seconds window ( newly opened windows ), using the Selenium Protractor’s getWindowHandles() function, which stores the guid values for both windows in a collection Set.

// it will fetch the unique identifier for all the windows of the browsers for automated browser testing //
browser.getAllWindowHandles().then(function(getallGUID){

Next, let’s perform an iteration over this collection of GUID, and switch to the new window only after encountering a new GUID, to add to the collection.

// the for loop iterates over the collection i.e. set of guids //
for( var myguid of getallGUID ){
    // the conditional statement to check if the identifier is equal to the guid of the first window //
    if( myguid != firstGUID ){

    }
}

Now, I’ll switch to the new window by using the switchTo().window() function and pass the GUID of the new window as an argument to this function.

// the switch function shifts the control to the new window //
browser.switchTo().window(myguid);
// break keyword to come out of the loop //
break;

Finally, let’s perform a search query on Google, after this, I’ll close the window and return to the previous window.

// perform some operation on the new window i.e. searching a keyword on the homepage of google to handle multiple windows in Selenium for automated browser testing//
element(by.name("q")).sendKeys("lambda test");

// closes the browser //
browser.close();
// it switches the control back to the first window //
browser.switchTo().window(firstGUID);

In the Selenium test automation script below, I’ve taken a test case to show you how to handle and switch between two windows in a browser.

This is the configuration file used by Selenium Protractor to manage any config parameter, used globally within the application.

// test_config.js //
// The test_config.js file servers as a configuration file for our test case //
// setting required config parameters //
exports.config = {
   directConnect: true,
   // Desired Capabilities that is passed as an argument to the web driver instance.
   capabilities: {
      'browserName': 'chrome'  // name of the browser used to test //
   },
   // Flavour of the framework to be used for our test case //
   framework: 'jasmine',
   // The patterns which are relative to the current working directory when // 
Protractor methods are invoked //
   specs: ['test_script.js'],
// overriding default value of allScriptsTimeout parameter //
      allScriptsTimeout: 999999,
      jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
      defaultTimeoutInterval: 999999
   },
   onPrepare: function () {
      browser.manage().window().maximize();
      browser.manage().timeouts().implicitlyWait(5000);
   }
};


var webdriver = require('selenium-webdriver');

var script = require('Protractor');

var driver = new webdriver.Builder().
        withCapabilities(webdriver.Capabilities.chrome()).
        build();

// describing the test case in Protractor //
describe(' Example to demonstrate handle windows in Protractor ', function() {
    browser.ignoreSynchronization = true; // to disable sync //
   // information about the test case //
 it('Scenario to open the Window in browser ', function() {
        // this property is used to assign an implicit wait time to 20 seconds //
        browser.manage().timeouts().implicitlyWait(20000);
        // this function redirects to the url in the browser //
        browser.get("https://www.lambdatest.com");
        // it fetches the unique identifier for the first window //
        browser.getWindowHandle().then(function(firstGUID){
            // this opens the new window //
            browser.get("https://www.google.com");
            element(by.id("two-window")).click();
           // make the browser sleep for 4 secs //
            browser.sleep(4000);
      // it will fetch the unique identifier for all the windows of the browsers to handle multiple windows in Selenium for automated browser testing //
            browser.getAllWindowHandles().then(function(getallGUID){
            // fetch title of the current page
                console.log("The title of the current Page is : "+ browser.getTitle());
                console.log("Total number of open Windows : "+getallGUID.length);

  // for loop iterates over the collection i.e. set of guids //
                for( var myguid of allGUID ){
 // the conditional statement to check if the identifier is equal to the guid of the first window //
                    if(myguid != firstGUID){
   // the switch function shifts the control to the new window //
                   browser.switchTo().window(myguid);
    // break keyword to come out of the loop //
                        break;
                    }
                }
   // perform some operation on the new window i.e. a search a keyword on the homepage of google //
                element(by.name("q")).sendKeys("lambda test");
      // fetch the title of the page on the new window //
                browser.sleep(5000).then(function(){
 console.log(" Title after switching to new window : "+ browser.getTitle());
                })
       // close the browser //
                browser.close();
      // again switch back to the parent window //
                browser.switchTo().window(parentGUID);
           // fetch the tile of the page again //
                browser.sleep(5000).then(function(){
                    console.log("Page title after switching back to main window: "+ browser.getTitle());
                })
            })
        })
    });
});

Now let’s take a scenario, where you have to handle more than two windows for automated browser testing. This approach is slightly different, I’ll use three windows for Selenium test automation in this case. You can repeat the same process for any number of browsers you want to work with.

Steps to Handle More Than Two Windows In the Browser With Selenium & Protractor:

Start with performing Step 1 to Step 3 from the previous test case.
Now, you already have two tabs, open the third tab, let’s open https://www.selenium.dev, and use the sleep function for 4 seconds to wait for the new tab to load completely.
Now we will store the GUID values for all the three windows in the collection Set including the value of the newly opened windows using the Protractor’s getWindowHandles() function.
Finally , I’ll iterate through the collection and switch to the second tab i.e. https://www.lambdatest.com using the switchTo() method, and then I’ll verify the title of the web page to be “Cross Browser Testing Tools”.
You can now perform any action on the tab and then close the window to return to the last opened window or tab.

Below is the Selenium test automation script to demonstrate how to handle and switch between more than two windows in a browser in Selenium with Protractor.

var webdriver = require('selenium-webdriver');

var script = require('Protractor');

var driver = new webdriver.Builder().
        withCapabilities(webdriver.Capabilities.chrome()).
        build();

// describing the test case in Selenium with Protractor for automated browser testing//
describe(' Example to demonstrate handle windows in Protractor ', function() {
    browser.ignoreSynchronization = true; // to disable sync //
   // information about the test case //
 it('Scenario to open the Window in browser ', function() {
        // this property is used to assign an implicit wait time to 20 seconds //
        browser.manage().timeouts().implicitlyWait(20000);
        // this function redirects to the url in the browser //
        browser.get("https://www.lambdatest.com");
        // it fetches the unique identifier for the first window //
        browser.getWindowHandle().then(function(firstGUID){
            // click the button to open new window
            element(by.id("three-window")).click();
           // make the browser sleep for 4 secs //
            browser.sleep(4000);
      // it will fetch the unique identifier for all the windows of the browsers for automated browser testing in Selenium with Protractor //
            browser.getAllWindowHandles().then(function(getallGUID){
            // fetch title of the current page
                console.log("The title of the current Page is : "+ browser.getTitle());
console.log("Total number of open Windows : "+getallGUID.length);

  // for loop iterates over the collection i.e. set of guids //
                for(var myguid of getallGUID){
     // verify the title of the page to lambda test
                  browser.switchTo().window(myguid);
                  browser.getTitle().then(function(title){
                    if(title == "Cross Browser Testing Tools"){
                        element(by.name("q")).sendKeys("Selenium");
                        browser.sleep(4000);

                        }
                    })
                }
                browser.quit()
            })
        })
    });
});

Additional Features to Handle Multiple Browser Windows In Selenium With Protractor

The Selenium Protractor framework is so robust that it provides various customized utilities that allow us to perform certain actions, by calling its inbuilt classes and functions on the browser object. For instance, imagine a scenario where there is a requirement to open a link in the new window but as a standard protocol, the browser does not allow to open the link in the new window by default. In such a case, we need to force open the link in the new window, using Selenium Protractor’s action class.

Below are the steps by step approach to open the link in such a use case :

We need to specify the url we would want to launch ( https:// www.google.com ) and store the element id “force-new-window” for the above link to a variable of type WebElement.

// store the element
WebElement ele = element(By.id("force-new-window")).getWebElement();

Next, we will create an object of the action class to invoke certain events on the hyperlink.

// create object for Actions class
browser.actions()

Then, we will call various methods on the action class object
- Invoke the keyDown () function and pass the Shift key as an argument.
- Invoke the click () function and pass the web element from above as an argument.
- Finally, we will bind these two methods to the action class using the perform function and our task gets executed. Now we can see the website launched in a new window.

browser.actions().keyDown(Protractor.Key.SHIFT)
                .click(ele)
                .perform()

Below is the complete script that demonstrates how Protractor forcefully launches the link in a new browser window.

var webdriver = require('selenium-webdriver');

var script = require('Protractor');

var driver = new webdriver.Builder().
        withCapabilities(webdriver.Capabilities.chrome()).
        build();
// describing the test case in Protractor //
describe(' Example to demonstrate handle windows in Protractor ', function() {
    browser.ignoreSynchronization = true; // to disable sync //
// information about the test case //
    it(' Scenario to open the Window in browser ', function() {
        // set the timeout to 20 secs //
        browser.manage().timeouts().implicitlyWait(20000);
        // launch the url to google.com //
        browser.get("https://www.google.com");
        // fetch the identifier of the first window //
        browser.getWindowHandle().then(function(firstGUID){
            // assign the element to a web element type //
            WebElement ele = element(by.id("force-new-window"));
            // create action object and invoke functions //
            browser.actions().keyDown(Protractor.Key.SHIFT)
                            .click(ele)
                            .perform()
        });
    });
});

Enable Hyperlink to Open in A New Window

Usually, while clicking a hyperlink opens on the same window by default.

<a id='two-window' href='https://google.com'>Click me</a>

But there are certain scenarios when you need the flexibility to open the link in the new windows rather than the same window or tab. This can be done simply by using the anchor tag and setting the value of the target keyword as “_blank”. This ensures that whenever a user clicks on the link, it launches in the new window.

//this open the url in a new window on clicking the button //
<a id='two-window' href='https://google.com' target='_blank'><input type='button' value=" Click to Open New Window"></a>
// this launches the link by clicking on the hyperlink //
<a id='two-window' href='https://google.com' target='_blank'>Click me</a>

Execute Automation Scripts on Online Selenium Grid Platform With Protractor

You can execute the same Selenium test automation in the cloud Selenium grid platform with minimal configuration changes that are required to build the driver and connect to the LambdaTest hub. Below is the updated script with the required changes.

// test_config.js //
// The test_config.js file servers as a configuration file for our test case //

LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "r9JhziRaOvd5T4KCJ9ac4fPXEVYlOTealBrADuhdkhbiqVGdBg"; // Lambda Test Access key

exports.capabilities = {
  'build': ' Automation Selenium Webdriver Test Script ', // Build Name to be display in the test logs
  'name': ' Protractor Selenium Test on Chrome',  // The name of the test to distinguish amongst test cases //
  'platform':'Windows 10', //  Name of the Operating System
  'browserName': 'chrome', // Name of the browser
  'version': '79.0', // browser version to be used
  'visual': false,  // flag to check whether to take step by step screenshot
  'network':false,  // flag to check whether to capture network logs
  'console':false, // flag to check whether to capture console logs.
  'tunnel': false // flag to check if it is required to run the localhost through the tunnel
  };

// setting required config parameters //
exports.config = {
   directConnect: true,

   // Desired Capabilities that is passed as an argument to the web driver instance.
   capabilities: {
      'browserName': 'chrome'  // name of the browser used to test //
   },

   // Flavour of the framework to be used for our test case //
   framework: 'jasmine',

   // The patterns which are relative to the current working directory when  

Protractor methods are invoked //

   specs: ['test_script.js'],
// overriding default value of allScriptsTimeout parameter //
      allScriptsTimeout: 999999,
      jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
      defaultTimeoutInterval: 999999
   },
   onPrepare: function () {
      browser.manage().window().maximize();
      browser.manage().timeouts().implicitlyWait(5000);
   }
};

// test_script.js //

// Build the web driver that we will be using in Lambda Test
var buildDriver = function(caps) {
  return new webdriver.Builder()
    .usingServer(
      "http://" +
      LT_USERNAME +
      ":" +
      LT_ACCESS_KEY +
      "@hub.lambdatest.com/wd/hub"
    )
    .withCapabilities(caps)
    .build();
};

// describing our test scenario for Protractor framework //
describe(' Example to demonstrate handle windows in Protractor ', function() {
    browser.ignoreSynchronization = true; // to disable sync //

// adding the before an event that builds the driver and triggers before the test execution
  beforeEach(function(done) {
    caps.name = this.currentTest.title;
    driver = buildDriver(caps);
    done();
  });
// information about the test case
  it(' Scenario to open the Window in browser ', function() {
        // set the timeout to 20 secs //
        browser.manage().timeouts().implicitlyWait(20000);
        // launch the url to google.com //
        browser.get("https://www.google.com");
        // fetch the identifier of the first window //
        browser.getWindowHandle().then(function(firstGUID){
            // assign the element to a web element type //
            WebElement ele = element(by.id("force-new-window"));
            // create action object and invoke functions //
            browser.actions().keyDown(Protractor.Key.SHIFT)
                            .click(ele)
                            .perform()
        });
    });
});

You can execute the Selenium test automation scripts on the cloud, just by adding the desired capability to your code, to connect to the LambdaTest platform. To perform automated browser testing on LambdaTest cloud Selenium Grid, you need to generate the desired capability matrix to specify the environment you want to execute our Selenium test automation on. Here is the link to visit LambdaTest Selenium desired capabilities generator.

Below is the output on running the Selenium test automation:

Well, it’s a success mate, our Selenium test automation script ran successfully on the Cloud Selenium Grid.

Wrapping it Up!

This is just the end of the beginning! You now know how to handle multiple browser windows in Selenium. Go ahead, and handle the heck out of these browser windows. They might have been a nightmare before, but between you and me, we now know that it’s just a piece of cake! You now know how to handle multiple windows and tabs in the Protractor framework to perform Selenium test automation. The framework is robust, flexible and provides various inbuilt classes and functions.

In case, you want to learn more about using Protractor with Selenium, do subscribe to our blog. And, I’d keep you posted about new blogs. This is certainly not the last blog on Protractor, there’s more to come! If you haven’t checked out our previous blogs on automated browser testing with a protractor, and Selenium locators with a protractor, I’d urge you to do so, as these topics are essential for automated browser testing. Also, If you’d like to help your peers learn about handing multiple browsers, do share this blog with them. That’s all for now! Happy Testing.

Top Python Testing Frameworks In 2020 For Selenium Automation

Aditya Dwivedi — Thu, 14 May 2020 11:41:23 +0000

Python is the fastest-growing programming language in 2019 as per the Developer Survey by StackoverFlow. It even edged past Java in the overall ranking and came out on 2nd as the most loved language only after Rust. One of the several reasons for the popularity of Python is the extensive support of test automation frameworks. Most of the popular Python frameworks are compatible with the Selenium test automation framework and used for automation browser testing & cross browser testing.

With the increasing number of Python testing frameworks in 2020, it becomes necessary to choose the ideal Selenium test automation framework that suits your requirements. Apart from unittest (or PyUnit) which is the default Python testing framework in 2020, there are many more python frameworks to choose from.

Here are the top Python testing frameworks in 2020 to realize your Selenium test automation needs.

1. PyTest

PyTest is an open-source Python testing framework that is primarily used for unit testing. This particular Python testing framework in 2020 is scalable as it is useful for writing simple automation tests as well as complex functional tests for applications & libraries. It is easy to get started with PyTest. It is compatible with Python 3.5+ and PyPy 3.

Test suites written using PyTest are more compact as a lot of boiler-plate code is not required and there is no requirement to include tests into large test classes. Unlike the default Python testing framework 2020 which mandates tests to start with test_ (or end with _test), there is no fixed test case nomenclature in PyTest. This is because PyTest has built-in features that supports auto-discovery of test modules and functions.

There is no need to remember self.assert* names due to the introduction of the useful feature of assert rewriting that helps in providing detailed information on failing assert statements.

PyTest Official Website – https://www.pytest.org/

PyTest on GitHub – https://github.com/pytest-dev/pytest/

Here are the details about the PyTest project:

What Are The Prerequisites?

The best part about the PyTest, Python testing framework, is that it involves a gentle learning curve. It is easy to get started with PyTest, especially if you have prior working knowledge about any existing Python testing frameworks.

You will just need a Python IDE for development and Python Package Manager for installing PyTest.

Pros of PyTest

There are a number of advantages of the PyTest framework, major ones are below:

It is compatible with other Python testing frameworks such as unittest (or PyUnit).
Along with simple tests, PyTest can also be used for creating complex functional test cases.
It requires less effort to port existing implementations using other Python testing frameworks to PyTest.
PyTest can be used for projects that practice TDD (Test Driven Development) as well as open-source projects.
PyTest is instrumental in creating effective test cases (and test suites) as it supports parameterization. Using parameterization, test cases can be executed with different input configurations thereby resulting in minimal code repetition.
Tests using PyTest are easy to understand as there is very little boiler-plate code.
It supports fixtures and classes due to which common test objects are available through the lifecycle of a module/class/function/session.
PyTest is extensible and the Python testing framework already has rich plugin architecture. There are currently 315+ external plugins with PyTest.
It supports Parallel test execution through the pytest-xdist plugin.
Asserts in PyTest provide detailed information about the failure scenarios.

Cons of PyTest as a Python testing framework

PyTest is not compatible with other Selenium Python testing frameworks as it uses its own special routines for development. Rewriting the complete code is the only way to port an existing implementation using PyTest to some other Python testing framework.

Is PyTest The best Python Testing Framework For You?

You can choose PyTest over the default Selenium Python framework i.e. unittest in case you are developing complex functional tests. Fixtures, Classes, as well as Parameterization can be extremely handy for automation test development.

2. Behave

Behave is one of the widely used Selenium Python testing frameworks for BDD (Business Driven Development) testing. Behave uses the Gherkin language for development of scenarios and feature files. As Gherkin makes use of simple readable language for test case development, tests can also be created for non-technical personnel in the team thus enabling a Business Driven Development.

Usage of a BDD framework enables better communication between the team members as there is increased collaboration between engineers, managers, quality analysts, business development managers, and more. It is relatively easy to get started with a behavior-driven Python testing framework like Behave if you have working knowledge about other BDD frameworks such as SpecFlow, Cucumber, Cucumber-JVM , etc.

As Behave is a BDD framework, it is fundamentally different from other Selenium Python testing frameworks such as unittest (or PyUnit), PyTest, etc. The latest version of Behave is 1.2.7.dev1

Behave Official Website – https://behave.readthedocs.io/en/latest/

Behave on GitHub – https://github.com/behave/behave

Here are the details about the Behave framework:

What Are The Prerequisites?

Installation of Behave requires Python above 2.7.14. Prior experience with any of the BDD tools can be handy to get started with the Behave framework.

Pros Of Behave

Here are the advantages of using the Behave framework for Selenium test automation:

It is easy to ramp-up if the team has prior experience with any existing BDD framework such as SpecFlow, Cucumber, etc.
Availability of environmental functions, configuration settings, fixtures, etc. enables easy setup & cleanup.
Behave is supported with the PyCharm (Professional Edition).
It supports integration with other web frameworks such as Django and Flask.
It has excellent support documentation and tutorials that can be helpful in getting started with behave framework.
It is simpler to add newer test cases as tests consist of different scenario steps, scenario outcomes, feature files, and more.
Apart from technical people, non-technical members can also play a vital role in test case (or test scenario) development.

Cons Of Behave

Below are some of the major cons of using the behave framework in Selenium test automation:

It is not supported in the PyCharm (Community Edition).
It is very difficult to share scenario steps (*_steps.py) between different feature files (*.feature) in Behave.
There is no built-in support for parallel test execution which is one of the primary requirements for automated browser testing. Workarounds for parallel test execution require installation of additional software as mentioned in popular discussion threads here and here.
Behave can only be used for black-box testing.
The plugin behave-parallel that facilitated parallel test execution with behave is now deprecated.

Is Behave The Best Python Testing Framework For You?

Behave framework is suited for web testing as test scenarios can be developed using simple English language. On the other hand, behave is not ideal for integration testing as the verbosity can lead to unnecessary complications of the test scenarios.

Many developers prefer pytest-bdd, the BDD library for pytest.runner as it uses the good features available in pytest hence suited for BDD testing.

3. Robot

Robot is another widely-used Python testing framework that is used for Selenium test automation, RPA (Robotic Process Automation), and ATDD (Acceptance Test Driven Development). It is an open-source and extensible Python testing framework. It can be easily integrated with any other tool due to which it is ideal for creating flexible automation testing solutions.

The Python testing framework is operating system and application independent i.e. the same implementation is compatible across different platforms namely – Windows, Linux, and MacOS. The syntax of Robot framework is easy to understand as it uses human-readable keywords. The capabilities of Robot framework can be extended by libraries that are implemented in Selenium with Python . It has a rich ecosystem consisting of libraries and tools developed as separate projects.

Robot Official Website – https://robotframework.org/

Robot on GitHub – https://github.com/robotframework/robotframework

Here are the details about the Robot framework:

What Are The Prerequisites?

Robot Framework can be used if you have Python version 2.7.14 or higher installed. Python Package Manager (pip) command is used to install the Python testing framework.

Pros of Robot framework

Here are the advantages of using the Robot framework for Selenium test automation:

You do not require programming knowledge to write test cases using the Robot framework.
As the Python testing framework is platform and application independent, there is no porting effort required when executing code from one platform to another.
It can be used for BDD, ATDD, and key-word driven Selenium test automation.
It is easy to get started with the Robot framework as the test data syntax can be used with ease.
Robot framework has a rich library ecosystem e.g. Appium for mobile automation, database library for DB testing, etc. for testing different applications.
It has a good built-in reporting mechanism as a HTML log is generated after every build.

Cons of Robot

Below are some of the major cons of using the Robot framework:

There is no in-built support for parallel test execution.
Creating customized HTML reports is not an easy task.

Is Robot The Best Python Testing Framework For You?

Due to its rich set of libraries and easy syntax, Robot framework is easier to use when compared to PyUnit (or unittest) and PyTest. You should choose Robot framework if we are looking for an ideal Python automation framework for ATDD.

4. PyUnit (or unittest)

PyUnit (also called unittest) is the default Python testing framework that is a part of the Python standard library. The Python Testing Framework, is inspired by the JUnit framework. It is a part of the unittest module that has shipped since the Python version 2.1 was released.

As the unittest Python testing framework is available out of the box, many developers who are getting started with Selenium test automation prefer the unittest framework. Test cases follow a particular nomenclature where tests either start with test_ or end with _test.

TestCase is the base class that contains the assertion methods, SetUp, and TearDown routines. Number of testcases can be grouped together to form a TestSuite class and build customized test runners.

What Are The Prerequisites?

As PyUnit framework is available out of the box with the Python testing framework, it does not require any additional package installation.

Pros of PyUnit (or unittest)

Here are some of the advantages of the PyUnit framework:

As PyUnit is a derivative of the xUnit framework and has distinct similarities with the xUnit framework, newbie developers in Python also find it easy to get started with unittest framework.
No additional package installation is required.
Test scenarios can be executed independently or they can be grouped together into a TestSuite. The execution process is simple as tests can be executed only by mentioning their names on the terminal.
The default execution output is concise and easy to understand. This Python testing framework also has a number of command-line options that help in providing more detailed output.
Test report generation is very fast and takes only a few milliseconds.

Cons of PyUnit (or unittest)

Here are some of the major shortcomings of the PyUnit framework:

Naming of testcases still based on the camelCase naming convention using in Java.
A large amount of boilerplate code is used for test implementation.
There is no provision for color output.

Is PyUnit The Best Python Automation Framework For You?

As PyUnit (or unittest) is the default Selenium Python testing framework that is shipped with Python, most developers start their automating testing with Python journey with PyUnit. Too much boilerplate code and support for too much abstraction acts as a major hindrance in using the Python Testing Framework for large projects.

5. Lettuce

Lettuce is a Python testing framework that facilitates BDD testing. It draws its inspiration from Cucumber (that was designed for Ruby). The release names of Lettuce are inspired by green stuff. The latest version of Lettuce is 0.2.23 and is termed Kryptonite.

This particular Python testing framework is open-source and hosted on GitHub. As mentioned on their official website, Lettuce was developed to make testing easy and funny.

Lettuce Official Website – http://lettuce.it/

Lettuce on GitHub – https://github.com/gabrielfalcao/lettuce

Here are the details about the Lettuce framework:

What Are The Prerequisites?

Lettuce can be installed using the Python Package Manager (pip). The prerequisite is Python 2.7.14 (or higher).

Pros of Lettuce

Here are some of the advantages of the Lettuce framework:

Like other Python testing frameworks such as Behave that facilitate BDD, Lettuce also uses the Gherkin language for creation of scenarios and feature files. Getting started with Lettuce is easy if you have prior experience with any BDD testing tool.
Apart from developers and other technical personnel, other project stakeholders namely marketing folks, project managers, etc. can also play a major role in the test process.
It is easy to add new test cases as primary updates are required in feature files and scenario files.

Cons of Lettuce

Here are some of the major shortcomings of the Lettuce framework:

It is primarily used for black-box testing.
Perfect execution using a BDD testing tool like Lettuce requires timely communication between all the respective stakeholders of the project.

Is Lettuce The Best Python Automation Framework For You?

Lettuce makes the entire process of Selenium test automation scalable, readable, and easy. The best part of using a BDD tool like Lettuce is that non-technical people can also participate in the test creation process as tests are derived from business requirements. Python developers and testers have greater inclination towards pytest-bdd as it has majority of the features supported by other BDD tools.

6. Nose2

Nose2 is a Python unit testing framework and a successor of the Nose framework. It is based on the unittest hence; it is also referred to as an extension to unittest. Nose2 adds support to the PyUnit framework by providing plugins for test execution, enabling automatic discovery of test cases, and collecting documentation.

All these added functionalities make testing with PyUnit simple and easy. The plugin ecosystem of Nose2 adds support for decorators, fixtures, parameterized testing, modules, classes, and test discovery. Such in Nose2 is a DSL (Domain-Specific Language) for writing tests with expensive, nested features, also called as functional tests. More details of Such in Nose2 is available on the official website of Such.

Nose2 Official Website – https://docs.nose2.io/en/latest/

Nose2 on GitHub – https://github.com/nose-devs/nose2

Here are the details about the Nose2, python unit testing framework:

What Are The Prerequisites?

Nose2 only has a dependency on the unittest module which is shipped along with the Python library. Nose2 can be installed using Python Package Manager (pip).

Pros of Nose2

Here are some of the advantages of the Nose2 python testing framework:

It is easy to install and get started with Nose2 as it extends the existing unittest framework.
With features like test discovery, fixtures, parameterized testing, etc., nose2 makes unittest equally useful as PyTest.
Scripts written in Nose2 support a number of command-line options and extensive configuration via config files.
Using the mp plugin in Nose2, tests can be executed in parallel with multiple processes. This speeds up the test execution in case your tests are heavily IO or CPU Bound.
Nose2 has a large number of plugins that can aid in accelerating the Selenium test automation process.

Cons of Nose2

Here are some of the minor shortcomings of the Nose2 python testing framework:

The documentation of Nose2 is not as extensive as the PyTest framework.
Deprecation of nose framework that was supported on Python 2.4 (and above) could be a potential dampener for developers who want to use Nose2 in their projects.

Is Nose2 The Best Python Testing Framework For You?

If your team members are using the unittest framework and do not intend to switch to any other framework (e.g. Lettuce, Behave, PyTest, etc.), it is worth giving Nose2 a try as it is an extension of unittest.

As Nose2 also has support for parallelized testing, it can be used for automated browser testing kind of scenarios where test scenarios are executed on different browser & platform combinations.

7. Testify

Testify is another popular Python testing framework in 2020 that is considered as a replacement of unittest and nose framework. As the framework is modeled after unittest, the tests written for unittest will require minimal adjustments to work with Testify.

Testify can be used for performing automated unit, integration, and system testing. The latest version of Testify is 0.11.0. It has an extensible plugin system that provides useful functionality around reporting. Like the Nose2 framework, Testify also provides enhanced test discovery and class-level SetUp & TearDown fixture methods that are executed once for the entire set of test methods.

Testify Official Website – https://pypi.org/project/testify/

Testify on GitHub – https://github.com/Yelp/Testify

Here are the details about the Testify framework:

What Are The Prerequisites?

The major advantage of the Testify framework is that it involves a gentle learning curve as it is based on the existing unittest framework. Installation is fairly simple as it only requires the Python Package Manager.

Pros of Testify

Here are some of the advantages of the Testify framework:

It is easy to get started with Testify as it is based on the unittest framework.
The framework has an extensible plugin ecosystem.
It has additional testing utilities that aid in integration, profiling, and code coverage.
Like the Nose2 framework, Testify also comes with enhanced test discovery which makes finding tests very easy.
It has a decorator-based approach for fixture methods.

Cons of Testify

Here are some of the minor shortcomings of Testify framework:

Testify also has the same issue as Nose2, the documentation is not so extensive which could be a roadblock if you are just getting started with the Testify framework.
Parallel testing with Testify could be a hurdle as pointed in a couple of online discussion forums.

Is Testify The Best Python Testing Framework For You?

Like Nose2, if your team is looking for a Python testing framework built on top of unittest, then it is worth trying out Testify. As achieving parallelized testing with Testify is a bit difficult, it might not be suited for scenarios such as automated browser testing.

Wrapping it Up

In this article, we had a look at some of the popular Python testing frameworks that can be used with Selenium. Each of these frameworks have their own share of advantages and disadvantages. If you intend to include the non-technical members in the test creation process, you should try BDD tools such as Behave or Lettuce. To summarize, choosing the right Python testing framework purely depends on the project requirements and the competency available within the team.

Which particular Python testing framework do you use? Do share your experience in the comments section. Also, please feel free to share this article with your friends by retweeting us on twitter. Happy Testing ☺

Complete Guide To Selenium Locators In Protractor (Examples)

Aditya Dwivedi — Mon, 20 Apr 2020 12:15:37 +0000

While testing the functionality for your website, especially web elements such as radio button, text boxes, drop-down, etc., you need to make sure that you are able to access these elements. Selenium locators serve this exact purpose, by using this command we can identify these web elements, DOM (Document Object Model), to perform Selenium test automation through our scripts.

These Selenium locators are vital for scripting as if they’re wrong, your automation scripts won’t work. Thus your Selenium test automation efforts rely on these Selenium locators in any testing framework. Protractor, an Angular JS framework, has many Selenium locators that can be identified by using a specific By method during runtime.

In this protractor testing tutorial, we will discuss the Selenium locators in Protractor in-depth and how we can use locators to interact with the application and fetch the current running state. So, let’s get started.

What Is The Importance Of Selenium Locators In Protractor?

Let’s start our protractor testing tutorial by discussing various features that should be kept in mind when choosing a locator with respect to its performance. The Selenium locators in protractor have proven to be good and reliable in most scenarios. Some of the features that it provides are:

1. Good Readability :

The Selenium locators in the protractor are easily readable and accessible. The locators offer enough flexibility to the test code by making it accessible to the user.

2. Less Maintenance :

The Selenium locators in protractors are developed in an optimized manner and hence, they require less maintenance overhead.
The structure of the locator is designed in a great fashion so that there is no need to update the locator even when there is a change in the location of the element. It requires modification only if there is any change in the functionality of the web application.

3. Improved Speed :

This is one of the most important properties of the Selenium locators as this feature determines the performance of the web application. The Selenium locators in the protractor have a unique id which makes them relatively faster than other Selenium locators. Sometimes, the speed of locating an element is also dependent on the internal processing speed of the browsers.

The Objective of Selenium Locators in Protractor

Moving on with our protractor testing tutorial, we’ll discuss the importance of Selenium locators. The important point to remember in order to write good end to end tests in Protractor is discovering the proper Document Object Model (DOM) elements for the web pages. It tends to globally export the locator factories through the instantiated objects. Since the protractor is built upon Selenium interfaces, the Selenium locators in the protractor are quite comparable and similar to the ones associated with Selenium WebDriver. Therefore, it’s interesting to know that the framework supports Selenium locators in protractors as well along with its own.

Working of Selenium Locators in Protractor

Next, in this protractor testing tutorial, we’ll discuss how Selenium locators work in protractor. The way the locator functions in Protractor is by exporting a global function i.e. ‘element’, which inputs the locator and provides us with the ElementFinder in return.

The ElementFinder, on the other hand, offers a fundamental way to communicate with an element and get details about the same with various action methods such as getText(), click() and sendKeys(). These methods are quite popular and are used frequently when executing Selenium test automation.

The main purpose of the ‘element’ function is to locate a single element. To locate multiple elements, the ‘element.all’ the function is used.

There are several other means by which we can find the elements in Protractor and by using elements locating strategies in Angular JavaScript framework such as by.model(), by.repeater(), by.binding(), etc.

List of Selenium Locators in Protractor

Now in this section of protractor testing tutorial, let’s get familiar with global variables that are majorly used in locating the DOM elements with examples for better understanding of these Selenium locators in protractor. These are a group of element locator strategies that are associated with the “by” keyword such as by.className, by.css, by.model, etc. Some of the most commonly used are:

by.className
by.id
by.CSS
by.linkText
by.name
by.partialLinkText
by.tagName
by.xpath

1. by.className

The className locator is one of the most widely used Selenium locators in Protractor. ts objective is to check for the elements in the page with a class attribute and then further classify the elements specific to their class name.

For Example:-

Sample XML Document :-

/* The list contains a class for positive or negative */

<ul class="digits">
  <li class="positive">5</li>
  <li class="negative">-6</li>
</ul>

Locator Used:-

/* The locator that returns the expected element for the specified class */

var even = browser.findElement(by.className(positive));
expect(even.getText()).toBe('5');
// making use of our locator in our test script //
expect(browser.findElement(by.className('even'))).toBe('-6');

2. by.id

The Id locator is used to discover an element in the web page based on the id attribute defined in the XML document structure.

For Example :-

Sample XML Document :-

/* The list contains class for positive or negative */

<ul class="digits">
  <li class="negative">-6</li>
  <li class="positive" id="positiveNumber">5</li>
</ul>

Locator Used:-

/* The locator that returns the expected element for the specified id */

// making use of our locator in our test script //
var positive = browser.findElement(by.id('positiveNumber'));
expect(positive.getText()).toBe('5');

3. by.css

The CSS locator assists in identifying the elements and classify them based on the CSS selector i.e. the identifier value used to distinguish the element existing on the web page. These Selenium locators are also one of the most preferred substitutes in protractor when we do not have a choice to select based on class name or id.

For Example :-

Sample XML Document :-

/* The list contains class for two color i.e blue or red */

<ul class="color">
  <li class="first">blue</li>
  <li class="second" id="secondColor">red</li>
</ul>

Locator Used:-

/* The locator that returns the expected element for the specified CSS */

var first = browser.findElement(by.css('.first'));
expect(first.getText()).toBe('blue');
// making use of our locator in our test script //
expect(browser.findElement(by.css('#secondColor'))).toBe('red');

4. by.linkText

The objective of the linkText locator is to identify the matching string text corresponding to the anchor element i.e. < a > tag in the DOM. It works only on the hyperlink and by default, the first link text is selected if there are multiple elements present for the link text on the web page.

For Example :-

Sample XML Document :-

/* The anchor tag which contains the website name and its URL */

<a href="http://www.lambdatest.com">LambdaTest</a>

<a href="http://www.lambdatest.com">LambdaTest</a>

Locator Used:-

/* The locator that returns the expected element for the link i.e. Lambda Test*/

// making use of our locator in our test script //
var myLink = element(by.linkText(‘LambdaTest'));

expect(myLink.getTagName()).toBe('a');

5. by.name

The name locato is used to discover the element having the specific value in the name attribute.

For Example :-

Sample XML Document :-

/* The list contains a class for two names i.e John and Mark */

<ul>

  <li name="developer">John</li>

  <li name="tester">Mark</li>

</ul>

Locator Used:-

/* The locator that returns the expected element for the specified name */

// making use of our locator in our test script //
var developer = browser.findElement(by.name('developer'));

// making use of our locator in our test script //
var tester = browser.findElement(by.name('tester'));

expect(developer.getText()).toBe('John');

expect(tester.getText()).toBe('Mark');

6. by.partialLinkText

The partialLinkText locator is used in scenarios where there is a need to find the elements which contain the string or the portion of the string in the link text element.

For Example :-

Sample XML Document :-

/* The list contains anchor tag which has the required text */

<ul>
  <li><a href="http://www.lambdatest.com"> Selenium test automation Cloud</a></li>
  <li>Online Selenium Grid for Automated Testing</li>
</ul>

Locator Used :-

// /* The locator that returns the expected element i.e. gives us the 'a' element value ‘Selenium test automation Cloud’ and navigates to the same link */

// making use of our locator in our test script //
var myLink = browser.findElement(by.partialLinkText('Cloud'));

myLink.click();

7. by.tagName

The tagName locator is used to locate elements having a specific tag name. It looks for elements in the web page having any tag name like < a > , < div > , < p > etc. It functions similar to that of the getElementsByTagName function used in the XML document structure.

For Example:-

Sample XML Document :-

/* The list contains anchor tag which has the required text */

<a href="http://www.lambdatest.com">LambdaTest</a>

Locator Used :-

// /* The locator that returns the expected element i.e. gives us the 'a' tag  value and that matches with the text given */ //

// making use of our locator in our test script //
expect(element(by.tagName('a')).getText()).toEqual('LambdaTest');

8. by.xpath

The Xpath locator is used to find the matching element for the XML Xpath Selector provided. An important thing to note when dealing with XPath Selenium locators is that to search and element the entire XML document model we must we begin our XPath locator with “//”

Example:

 XPath = //*[ @ value='Inbox'] - matches with Inbox
xpath=//button[ @name="Gma"] - matches with Gmail

For Example :-

Sample XML Document :-

/* The list contains anchor tag which has the required text */

<ul>
  <li><a href="http://www.lambdatest.com">Selenium test automation Cloud </a> </li>
  <li> Online Selenium Grid for Automated Testing </li>
</ul>

Locator Used:-

// /* The locator that returns the expected element i.e. gives us the 'a' tag  value with the help of XPath and that matches with the text given */

// making use of our locator in our test script //
var xpathEle = browser.findElement(by.xpath('//ul/li/a'));

expect(xpathEle.getText()).toBe(‘Selenium test automation Cloud’);

Angular Specific Selenium Locators

Now, in this protractor testing tutorial, let us have a look at some of the Selenium locators that are used in Angular but are also available for the Protractor framework.

by.model
by.buttonText
by.partialButtonText
by.exactBinding
by.binding
by.exactRepeater
by.repeater
by.cssContainingText
by.options
by.deepCss
by.addLocator

1. by.model

The model locator identifies the element having the exact text associated with the ng-model attribute.

For Example :-

Sample XML Document :-

// /* The XML input type contains the text with the model attribute */ //

<input type="text" ng-model="developer.name">

Locator Used:-

// /* The locator finds the element with the model attribute and returns the value */ //

// making use of our locator in our test script //
element(by.model('developer.name')).click();

2. by.buttonText

The buttonText locator finds a match with an element having the same text of the button tag or inside the sub-element of the tag.

For Example :-

Sample XML Document :-

// /* The XML contains the button with the required value */ //

<button> Selenium test automation Cloud </button>

Locator Used:-

// /* The locator finds the element with the button tag and returns the value */ //

// making use of our locator in our test script //
element(by.buttonText('Selenium test automation Cloud'));

3. by.partialButtonText

The partialButtonTextlocator finds a match with an element that contains the part of the text i.e. partial match in the button tag or inside the sub-element of the tag.

For Example :-

Sample XML Document :-

// /* The XML contains the button with the required value */ //

<button> Selenium test automation Cloud </button>

Locator Used:-

// /* The locator finds the element with the button tag and returns the value */ //

// making use of our locator in our test script //
element(by.partialButtonText('Cloud'));

4. by.exactBinding

The exactBinding locator is used to locate the ng-bind attribute with the exact string/text value provided. It will not check for any partial matches in the text.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text with the bind attribute */ //

<p ng-bind="developer.name"></p>

Locator Used:-

// /* The locator finds the element with the bind attribute and returns the value */ //

// making use of our locator in our test script //
expect(element(by.exactBinding('developer.name')).isPresent()).toBe(true);

5. by.binding

This binding locator is used to locate the ng-bind attribute with the given text value. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text with the bind attribute */ //

<p ng-bind="developer.name">John</p>

Locator Used:-

// /* The locator finds the element with the bind attribute and returns the value */ //

// making use of our locator in our test script //
var eleName = element(by.binding(developer));
expect(eleName.getText()).toBe('John');

6. by.exactRepeater

The exactRepeater locator identifies the element having the exact text associated with attribute ng-repeat. It will not check for any partial matches in the text.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text with the bind attribute */ //

<li ng-repeat="dev in developer_names"></li>

<li ng-repeat="test in tester_names"></li>

Locator Used:-

// /* The locator finds the element with the bind attribute and returns the exact value */ //

// making use of our locator in our test script //

expect(element(by.exactRepeater('dev in developer_names')).isPresent()).toBe(true);

7. by.repeater

The repeater locator is used to find the element that has the attribute ng-repeat. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text with the repeater attribute */ //

<tr ng-repeat="developer_info">
    <td>{{dev.id}}</td>
    <td>{{dev..name}}</td>
    <td>{{dev.salary}}</td>
</tr>

Locator Used:-

// /* The locator finds the element with the repeater attribute and returns the value */ //

// making use of our locator in our test script //

var devID = element(by.repeater('developer_info').row(0));
expect(devID.getText()).toBe('2');

var devName = element(by.repeater('developer_info').row(1));
expect(devName.getText()).toBe('Mark');

8. by.cssContainingText

The cssContainingText locator finds the element by CSS having the specific text string, i.e. it combines the function of the CSS locator and the text element locator to identify the element.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text with the css text */ //

<ul>
  <li class="color">Blue</li>
  <li class="color">Red</li>
</ul>

Locator Used:-

// /* The locator finds the element and returns the value for the Blue color but not the Red color */ //

// making use of our locator in our test script //

var blue = element(by.cssContainingText('.color', 'Blue'));

9. by.options

The options locator identifies the element associated with attribute ng-option.

For Example :-

Sample XML Document :-

// /* The XML input type contains the text with the option attribute */ //

<select ng-options="Colors options in the custom collection">
  <option value="0">Blue Color</option>
  <option value="1">Red Color</option>
  <option value="2">Green Color</option>
</select>

Locator Used:-

// /* The locator finds the element with the options attribute and returns the value */ //

// making use of our locator in our test script //

var colorOptions = element.all(by.options('Colors options in the custom collection'));
expect(colorOptions.count()).toEqual(Green);

10. by.deepCss

The deepCss locator in protractor is used to discover the shadow DOM elements, which by default is not easily discoverable by using standard element Selenium locators.

For Example:-

Sample XML Document :-

// /* The XML input type contains the text and returns the fetched value */ //

<div>
  <span id="outerspan">   //outerspan
  <"shadow tree">           //shadow tree
    <span id="span1"></span>
    <"shadow tree">
      <span id="span2"></span>
    </>
  </>
</div>

Locator Used:-

// /* The locator finds the element with the options attribute and returns the value */ //

// making use of our locator in our test script //

var mySpan = element.all(by.deepCss('span'));  //myspan
expect(mySpan.count()).toEqual(7);
// making use of our locator in our test script //

var checkSpans = element.all(by.css('span');  //verify span
expect(checkSpans.count()).toEqual(5);

In this next section of protractor testing tutorial, we’ll discuss how you can integrate protractor with other powerful tools. Before that, if you want to set up a protractor to run your Selenium automation scripts you can check out our support documentation.

11. by.addLocator

The addLocator in protractor is used to create custom locators and load them later in config.

For Example :-

Sample XML Document :-

// /* The XML input type contains the text and returns the fetched value */ //

<button ng-click="viewResults()">View</button>

Locator Used:-

// /* The locator finds the element with the options attribute and returns the value */ //

// making use of our locator in our test script //

by.addLocator('Selenium Grid',function(buttonText, opt_parentElement, opt_rootSelector) {
var using = opt_parentElement || document,
buttons = using.querySelectorAll(‘Automate testing’);
return Array.prototype.filter.call(buttons, function(button) {
return button.textContent === buttonText;
});
});

Integrating Protractor with LambdaTest For Faster Selenium Test Automation

When performing Selenium test automation, we always look for ways that can help us increase our test coverage and improve our test cases. Protractor framework also has the capability to integrate with multiple tools and platforms such as Git, Jenkins, LambdaTest, etc. The best part of integrating your Protractor scripts with LambdaTest can help you ditch the hassle of maintaining an in-house Selenium infrastructure as you can run your scripts over a cloud-based Selenium Grid of 2000 + real browsers for both desktop and mobile.

To integrate Protractor with our online Selenium Grid, you won’t have to make any changes to your specification files. All you need to do is tweak the config file a little to specify the hub details and access key required to connect to Remote WebDriver for our online Selenium Grid. Therefore, when it is coupled with the internal capabilities of Protractor, it provides better flexibility to manage our tests and executing parallel Selenium test automation which will exponentially boost our testing execution speed.

Conclusion

As we have seen in this protractor testing tutorial, that since protractor is built upon Selenium and mostly used for Angular websites, it inherits properties from them. This is the reason we use Selenium locators in protractor, and it adds more charm to the framework and makes it more robust when used to the fullest. On the other hand, protractor is not just about Selenium locators there are many other aspects and features of the protector testing available for use in the market which adds more, that we will cover eventually in our protractor testing tutorials.

Why You Need Build Automation Tools for Selenium Automation Testing?

Aditya Dwivedi — Mon, 13 Apr 2020 11:19:33 +0000

Being an automation tester, we do realize that in a release cycle, time is always of the essence.! Selenium test automation helps to save us a considerable amount of time in our test cycles. However, it is pivotal to note the way through which you are executing your Selenium testing scripts. Which frameworks are you using? Are you doing it with an in-house infrastructure or with an online Selenium Grid? Are you making use of build automation tools or not?!

Build automation tools like Maven, Gradle and ANT provide you to accelerate the Selenium test automation even further. Not only do they help you manage build lifecycles, dependencies but they also allow you to perform parallel test execution. In this post, we are going to understand why every automation tester needs a build management tool for Selenium testing.

What Are Build Automation Tools?

Build automation tools allow us to orchestrate our project builds by automating the processes for handling Selenium dependencies, compiling source code to binary & then later packages the binary. All in order to run automation testing. Build automation tools have become pivotal for the software development & testing process. These tools help developers in completing day to day activities like.

Downloading dependencies
Generation of the source code and extracting documentation from it
Compiling the source code
Packaging the compiled source code
Installing packaged code into a server, local or a central repository
Running Tests

What Makes Build Tools Special For Selenium Test Automation?

Build automation tools play a vital role in Selenium test automation. In most of the small projects, developers usually do the build process manually. But it becomes quite difficult as the projects become bigger. That is why we need to automate these processes and save ourselves some unwanted manual labor. Let us take a look at some striking reasons to build tools that are compelling for every automation tester who is working with Selenium test automation.

1. Supports Continuous Integration and Continuous Delivery

Most companies are now moving forward to ensuring the participation of as many teams as possible in a project. Thus, the increase in the adoption of DevOps culture has led to the rise in Continuous Integration. Every firm has a shared repository where the developers integrate the code. But when they do so several times a day, we call this Continuous Integration.

You can also verify each integration with the help of an automated build. The practice of Continuous Delivery usually goes hand in hand with CI. Build automation tools easily integrate with systems including Hudson, Jenkins, Bamboo, TravisCI, TeamCity, etc. This way, they help you to not only build a robust project but also help you to support CI/ CD processes which triggers these projects.

Let’s take an example of Maven and Jenkins, a build automation tool & a CI/CD tool going hand-in-hand.

Maven is a build automation tool that helps you to compile the Selenium dependencies so you don’t end up getting stuck with incorporating JAR files into your Selenium test automation project. It also helps you to run Selenium testing in parallel.

Jenkins, on the other hand, offers you a way to create a pipeline to help you trigger these build projects from one testing environment to another. Using Jenkins you can trigger your build automatically along with tests and deployment.

2. Enables Management of Build Lifecycle

A build lifecycle defines a sequence of phases to achieve company goals. It defines the process of building and deploying a project. In this case, phases represent different stages in the life cycle. Every firm needs to follow a sequence of steps before they can deliver a product. Since build management comprises hooks or cycle phases, it helps in handling the sequential steps. Default build lifecycle include the following phases mentioned below:

validate – to validate the project is correct and all required information is available
compile – compile the source code
test – test the compiled source code
package – to package the compiled code in distributable format, such as a WAR.
verify – run any checks on results of integration tests to ensure their quality
install – install the package into the local repository
deploy – done in the build environment, copies the final package to the remote repository.

For instance, you have to compile after completing the coding part. Then comes the packaging phase into a bundle such as WAR, JAR, or EAR. However, you might require some pre-packaging tasks beforehand. Build management enables the use of cycle phases for achieving all the above-mentioned tasks.

3. Comprises Impeccable Plugin Support

Most build automation tools contain add-ons and other tools which provide benefits in addition to the existing capabilities. Some of these plugins are crucial for core tasks. Plugins can help in adding goals to our phases in our projects. For example, the Compiler Plugin has two goals, compile and testcompile. ‘ Compile ’ , helps to compile the source code of the main code, while ‘ testcompile ’ helps to compile the source code of the test code.

On the other hand, we can customize some for performing tasks according to individual needs. They also automate common functions such as open, copy, zip or rename files, and reconstruct folders. In addition to automating these common functions, these plugins reduce manual labor in the area of text modification and validation of the project structure.

Plugin support also includes static code analysis, compiling tests, running tests, generating test reports, etc. Not only that, but these plugins also help other teams use the Selenium test automation frameworks over different programming languages. They automate the creation, assembly, and packaging of executables with the help of metadata. After that, we can install these into our local repository and deploy them to a remote repository for other teams to use.

4. Execution Of Parallel Testing

One of the most lucrative reasons to opt to build tools for Selenium test automation is to leverage parallel testing. Automation testing is a big time-saver for developers and testers! However, if executed in a sequential manner, it can slow the team rather than accelerating it. Your websites or web-applications are bound to grow over time, and with it grows your Selenium test automation suites or requirements. Eventually, you will reach a point where you would have to leverage the parallel testing in Selenium, to deliver your projects before the deadline. Build automation tools can help you do that with ease.

In fact, there are few test automation frameworks such as Gauge which allows parallel testing with Selenium through Maven plugin. Here is an example from one of our GitHub repositories to run Gauge with Selenium.

< groupId >com.thoughtworks.gauge.maven< /groupId>
                < artifactId>gauge-maven-plugin</artifactId>
                < version>1.3.3</version>
                < executions>

                    < execution>
                        < id>test-chrome< /id>
                        < phase>test< /phase>
                        < configuration>
                            <env>chrome< /env>
                            < inParallel>true< /inParallel>
                            < nodes>2</nodes>
                            < specsDir>specs< /specsDir>
                        < /configuration>
                        < goals>
                            < goal>execute< /goal>
                        </goals>
                    < /execution>

5. Enables Management of Dependencies

When one piece of software depends on another, we call that a dependency. They include files, a group of files in a package, jars, internal and external libraries present on the network. It’s important to resolve and manage these dependencies. This is where build tools play a crucial rule.

Build tools enable an automated resolution of dependencies. For instance, you wish to use the current and updated version of a library. Now, if you do this manually, you will have to remove the current JAR file first. After that, you have to download the latest version from a repository and add it to the project. In some cases, you might even need to download transitive dependencies and add them to your project as well.

Build tools help us modify dependency configurations which are flexible. These configurations are in the form of files such as build.Gradle, pom.xml, etc. Build tools can also create local structures or local repositories. After that, they download and cache the dependencies and do this again if needed.

How To Perform Test Automation With Gauge & Selenium Framework?

6. Correctly Executes Order of Commands

Commands with dependencies are the most time-consuming to execute. But knowing how you can order command execution is even more challenging. This is because in most cases, we need to feed the output of one command as an input to another. Thus, if the project is massive, it becomes quite overwhelming to manage it all manually.

Build tools to automate these tasks and help employees concentrate on other important work. These tools also automate the building of executables. This way, every developer can build as well as run the software on their machine.

List Of Renowned Build Automation Tools

I hope you now know the perks of using build tools for Selenium test automation. Now, the next question that arises is. Which one to use? Well, that depends upon which programming language for testing are you comfortable with?

Java

Maven: An open-source build automation tool, Maven helps to report and document from a central piece of information. Maven can also be used to manage projects written in C# and ruby.

Gradle: Also an open-source builds automation tool. Instead of using the XML form used by Maven, Gradle uses Groovy-based domain-specific language.

Python

Pybuilder: PyBuilder is a build tool written purely in Python.PyBuilder is based on the concept of dependency based programming, but it also comes with a powerful plugin mechanism, allowing the construction of build life cycles similar to those known from other famous (Java) build tools.

Ruby

Rake: With 1,700+ GitHub Stars, 530+ Forks, Rake is a build automation tool. Rake helps the user to define tasks and describe dependencies.

PHP

Phing: PHP tool based on Apache ANT, It uses XML build files and extensible PHP task classes which make it easy to use.

C

CMake: CMake is an open-source, build automation tool designed to build, test and package software.

MS Build: Microsoft Build Engine, better known as MSBuild, is a free and open-source build automation tool.

JavaScript

Gulp: With 31,600+ GitHub Stars, 4,400+ Forks and more than 3300+ plugins, Gulp is a streaming build system for node.js to help developers automate & enhance their development workflows.

Grunt: With 12,000+ GitHub Stars, 1500+ Forks, and more than 6300+ plugins, Grunt is a renowned task runner for JavaScript, which was originally designed with the purpose of delivering a build tool interface to JavaScript developers through the command line.

That Is All.!

With an increased focus on Selenium test automation, the lack of awareness about build tools can hold you back. Automating repetitive tasks is a major factor for delivering your projects on time. Doing so in parallel with the right build automation tool can make your release past like a breeze!

If you are a novice automation tester, then it is important for you to keep in mind the benefits of using build tools for your upcoming Selenium test automation projects. If you are finding it a little overwhelming then it is best recommended to start small. Start off by tweaking little things in bits to automate smaller test cases. Gradually, you & your team can have a more streamlined process for fully utilizing the potential of build automation tools.

Complete Guide To Access Forms In Selenium With Java

Aditya Dwivedi — Mon, 06 Apr 2020 11:49:56 +0000

Have you noticed the ubiquity of web forms while surfing the internet? Almost every website or web-application you visit, leverages web-forms to gain relevant information about yourself. From creating an account over a web-application to filling a brief survey, web forms are everywhere! A form comprises web elements such as checkbox, radio button, password, drop down to collect user data.

If you are going to perform automated browser testing for your website or web-application then you simply can’t afford to drop-out the forms from your test automation scripts. Speaking of test automation, Selenium has an API that helps to find these web elements and take subsequent actions on them like selecting a value or entering some text.

This article will help you understand how you can access forms in Selenium to automate browser testing of your web application. I will be using the JUnit Framework with some annotations to execute our Selenium automation testing later in this article.

To begin our learning with, we’ll first understand what a WebElement is, how can it be accessed in Selenium Automation, and then go about seeing the basic form elements like the input boxes, buttons, the actions that can be performed on these forms and finally writing a script to handle a form and run it on various browsers.

What Is A WebElement?

In layman’s language, anything present on a webpage constitutes a WebElement. Examples can be a text box, a radio button, etc. Selenium Webdriver offers an interface called the WebElement which is responsible for all the possible interaction that takes place in a the web page. To find these WebElements, Selenium WebDriver provides 2 methods viz, findElement() and findElements().

findElement(): This method is used to locate a single web element. Once the element is found it is returned as a WebElement object. Let us now see the syntax of findElement(), but before we start using the WebElement object in our test script we need to make note of one very important point.

We need to import below package before we can start creating objects of the WebElements:

import org.openqa.selenium.WebElement;

Syntax for findElement():

WebElement ele = driver.findElement(By.xpath(---xpath---);

findElements(): It returns a list of WebElements that corresponds to the locator defined in the method. The syntax for findElements() is as shown below:

List<WebElement> ele = driver.findElements(By.xpath(---xpath---);

Now that we are thorough with the understanding of the WebElement interface, along with the difference between findElement() & findElements() method in Selenium automation testing.

It is time to deep dive into these web elements. We will now list down all the web fields that may be involved in your website or web-application’s form. We will then notice how to access forms in Selenium WebDriver.

Types Of Fields To Access In Forms With Selenium

To subsequently build the scripts to access forms in Selenium WebDriver, we need to understand the various fields that we will have to handle in our test automation scripts. Let us try to dig a little more about these WebElements one by one.

Input Box

Input box is a primary element in any form. No form is complete without user input. It can be of two types:

Text Field Box – Text boxes which display the value as is entered by the user.
Password Field Box – Text boxes which display special characters (mostly ‘*’) when value is entered by the user.

Here is an image representing the input boxes inside a form.

Buttons

One of the most important fields to consider while you access forms for Selenium automation testing. There is no point filling up a form if there is no interface to submit the same. Buttons are simply used to submit whatever information we have filled in our text boxes. This can be submitting some form data or simply submitting the sign in information to the server.

Check Box

In most of the websites that are widely used we see a small box that enables us to check or uncheck it. Mostly in agreement sections wherein the user needs to confirm the understanding of these policies. Checkbox is used to return a boolean value, if it is checked then it would return True else would return false.

Radio Button

Remember seeing a circular element on the screens when we select our Gender in any of the signup forms? That is what a radio button is. It is similar to a checkbox only difference being if we are given multiple radio buttons we can select just one, while in the case of multiple checkboxes, we can opt multiple of them.

Link

We all face the common problem of forgetting our account passwords. Noticed the Forgot Password link on the screens? That is what a link is. It redirects us to a new web page or a new window pop-up or a similar thing. It links us to a new URL altogether.

Drop Down

There are times for a website where there are multiple options for a specific category. Say a website to book your flight tickets. To pick up the Origin & Destination city we often see a list with multiple values. This list which has an arrow at the rightmost end to expand and show the values is called a drop-down. It provides a list of options to the user thereby giving access to one or multiple values as per the requirement.

Below is a snapshot of how Facebook uses forms.

How To Web Elements In A Form With Selenium?

Now that we know what different types of web elements we can come across in our application, We need to identify these web elements through our Selenium automation testing scripts, and to do so we use Selenium locators. Locators are the parameters given to the findElement() or findElements() methods which help to retrieve the web element by using its properties like the ID, Name, Class, etc. In general we have 8 locators in Selenium that are widely used:

ID
Name
Tag Name
Class Name
LinkText
Partial LinkText
XPath
CSS Selector

Few of the examples are:

WebElement eid = driver.findElement(By.id(“email”);

WebElement pswd = driver.findElement(By.name(“password”);

WebElement sbmtBtn = driver.findElement(By.xpath(“//input[@value=”submit”]”);

In a similar way we can use By.className, By.CSSSelector(), By.linktext(), etc.

Interacting With Web Elements By Accessing Forms In Selenium

Finding these web elements is only half-way of your journey while accessing forms through Selenium automation testing. Now, comes the crux of accessing form in Selenium. Performing actions and interacting with the forms using Selenium.! Let us see how different actions can be performed on each one of them.

1. Input Box

To handle any input box, we must be able to enter information, clear information or get information from the box. Different methods that Selenium offers to work with text boxes are:

sendKeys()
clear()
getText()

To enter text into a textbox we can use the sendKeys method which would input the user required text from our automation script.

driver.findElement(By.id(“username”).sendKeys(“abc@gmail.com”);

The above statement would enter the Email ID as abc@gmail.com into a text box whose ID is username. Now, to clear a pre-entered text or the text that you last entered can be wiped clean with the clear() method.

driver.findElement(By.id(“username”).sendKeys(“abc@gmail.com”);

The third method that can be used on a text box is the getText() method. It’ll fetch the text that is written in a text box in case we need to validate some existing or entered text.

driver.findElement(By.id(“username”).sendKeys(“abc@gmail.com”);

The above line of code would return the text, let us take the text entered by the first line of code above, i.e. abc@gmail.com and store it in nameText variable of string type. There might be chances when the text is present in the value property. In such a scenario we will use the getAttribute() method in place of getText().

driver.findElement(By.id(“username”).sendKeys(“abc@gmail.com”);

2. Buttons

We can submit the information by using buttons. This can be done though click actions on the same. Below are the methods available in selenium to perform actions on buttons.

click()
submit()

It might look like there is no difference in both the methods, but a very minute detail changes the usage of each method. Both of these methods would eventually submit the form data to the server, but we need to understand the type of the web element present. If the element type is either ‘submit’ or ‘button’, click() method would work for both, but if the element type is ‘submit’ with the button being inside

tag, then only submit() would work. If any of the condition is false then submit() won’t work.
Below are the syntax for both:

driver.findElement(By.id(“submtLogIn”).click();

driver.findElement(By.id(“submtLogIn”).submit()

3. Check Box
While working with checkbox, we’ll use below Selenium methods:

click()
isSelected()

To select or check a value we use the click() method. It simply changes the state from unchecked to checked and vice-versa.

driver.findElement(By.id(“name”)).click();

Now that we can check/uncheck a checkbox, we might first need to know the state of a checkbox before performing a certain action with Selenium automation testing. To get the state we use isSelected() method which would return a boolean value. This means if the checkbox is checked we’d get a True else we’ll get False.

boolean state = driver.findElement(By.id(“name”)).isSelected();

4. Radio Button

The actions performed on the radio button are similar to those on a checkbox and we can use the same methods as above for the radio button as well.

click()
isSelected()

5. Link

Links are generally embedded in a web page for us to navigate to a new screen or a pop up or a form. We can either do a click action on them or can get the text that it holds and then proceed on our execution.

click()
getText()

Both of the above methods can be used in a way similar as stated above.

6. Dropdown

Dropdowns are very common in web applications and are widely used for selecting among a range of options. There is a wide variety of methods that we can use with dropdowns. Let us see them and their corresponding syntax & usage one by one.

selectByVisibleText(String)- It selects the option by comparing the visible text wherein String value passed in the method is what is compared.
selectByIndex(int)- Selects option based on the index in the drop down menu with integer parameter passed as the index.
selectByValue(String)- Selects the option based on the option value in string format

In a similar way we can deselect any selected value from the dropdown using any of the below options:

deselectByVisibleText(String)
deselectByIndex(int)
deselectByValue(String)
deSelectAll()- This would deselect all the options selected from a dropdown.

To use any of the above methods in your selenium code, syntax can be as follows:

Select se=new Select(driver.findElement(By.id("nation")));  se.selectByValue("Ind");

There are times while performing Selenium automation testing of our web app, where we need to validate the options coming in our dropdown list, or if we can select multiple options. These are very easily sorted using selenium which gives us the leverage to perform a few more actions. Listed below are a few of them:

getAllSelectedOptions()- We may come across dropdowns wherein we can select multiple options. Now, to get the list of all the selected options we can use this method.
getFirstSelectedOption()- This method would return the first option that has been selected from the dropdown and unlike the above method it would return a single web element and not a list.
getOptions()- This method would enable us to get a list of all available options in a dropdown.
isMultiple()- To check if a dropdown can take multiple options, we can use
isMultiple() method which would return a boolean value.

To get a list of options we can write our piece of code by referencing a list object:

Select se=new Select(driver.findElement(By.id("nation")));  
List<WebElement> list=se.getOptions();

Now that we know the basic operations and handling of Web Elements let us go forward implementing these in a Selenium script. In the next section, I’ll show you a simple program that handles the Form Elements on a demo site.

Handling Form Elements through Selenium WebDriver

Now, we will automate the Facebook Sign Up functionality to access form in Selenium, as we perform actions on the web elements. Here is a test script to access forms in Selenium with Java using the JUnit framework.

//Complete code to run the test of facebook sign up

import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.Test;
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.support.ui.Select;

public class TestForms {

    static WebDriver driver;

    @BeforeClass
    public static void setUp(){
            System.out.println("-----This is the beginning of our test !!!-----");
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\admin\\Downloads\\chromedriver_win32(1)\\chromedriver.exe");
            driver = new ChromeDriver();
            driver.manage().window().maximize();
            driver.get("https://facebook.com");
    }

    @Test
    public void fillForm(){
            System.out.println("-----Let us start the sign up process!!!-----");
            /*
             * Handling text boxes to enter and clear values
             */
            WebElement fName = driver.findElement(By.xpath("//input[@name='firstname']"));
            fName.sendKeys("--Enter you name here--");
            WebElement lName = driver.findElement(By.xpath("//input[@name='lastname']"));
            lName.sendKeys("--Enter your last name--");
            //Clear the textbox
            lName.clear();
            lName.sendKeys("XYZ");
            WebElement eMail = driver.findElement(By.xpath("//input[@name='reg_email__']"));
            eMail.sendKeys("--Enter mail or contact number--");
            WebElement pwd = driver.findElement(By.xpath("//input[@name='reg_passwd__']"));
            pwd.sendKeys("--Enter a valid password here--");
            /*
             * Handling dropdown to select date of birth
             */
            Select date = new Select(driver.findElement(By.xpath("(id('day'))")));
            date.selectByVisibleText("15");
            Select month = new Select(driver.findElement(By.xpath("(id('month'))")));
            month.selectByVisibleText("Jan");
            Select year = new Select(driver.findElement(By.xpath("(id('year'))")));
            year.selectByVisibleText("1990");

            /*
             * Handling Radio buttons to select gender
             */
        driver.findElement(By.className("_58mt")).click();

            /*
             * Handling the Sign Up button to perform click action
             */

            WebElement sgnUp = driver.findElement(By.xpath("//button[@id='u_0_13']"));
            sgnUp.click();
    }
    @AfterClass
    public static void tearDown(){
            System.out.println("-----We're now closing the session...-----");
            driver.quit();
    }
}

By running the above script, you will be able to access forms in Selenium using the JUnit. If you guys are not familiar with JUnit. Here is an end-to-end guide for running your first Selenium automation testing script with JUnit.

Thoughts About Scalability For A Faster Test Cycle?

Job well done! However, if you are to access forms in Selenium for your web-application then chances are that your test suites are going to be bigger and complex. You will need to access forms in Selenium on hundreds of browsers + operating systems. Wondering why?

Well, your form may not be as cross browser compatible as you may assume them to be! Here is how a simple DateTime input field may differ in rendering.

Which brings us back to a major question! How do you access forms in Selenium WebDriver over hundred of browsers + OS?

Well, for starters you can go-ahead and set up a Selenium Grid in-house. However, if you are having a bigger test suite, abundant testing requirements then you may have to spend a considerable amount of money and time in order to scale your in-house Selenium Grid. You will need to keep adding the latest device, browsers, operating systems that are being launched to your Selenium Grid. Considering the adoption of Agile, Kanban, and other modern SDLCs(Software Development Life Cycles), the major browser vendors, operating systems are launching a new version every month.

SDLCs(Software Development Life Cycles), the major browser vendors, operating systems are launching a new version every month.

Fortunately, there is a smarter way! Perform your Selenium automation testing on-cloud with LambdaTest.

What Is LambdaTest?

With 150,000+ happy customers, LambdaTest is a cross browser testing cloud offering an online Selenium Grid of 2000+ real browsers running on real operating systems. With LambdaTest, you can forget about the hassle of maintaining an in-house Selenium Grid. We provide online infrastructure with zero downtime. You can also leverage parallel testing with Selenium Grid.

Other than that, we offer:

Integrations to numerous third-party tools for CI/CD, project management, bug tracking, instant messaging, codeless automation and more.
Selenium Desired Capabilities Generator to help you easily declare the capabilities class in your Selenium automation testing scripts.
Open Selenium API to help you instantly extract reports of your test execution over LambdaTest.

Now, we will run the same Selenium automation testing script over LambdaTest but in parallel.

Access Forms In Selenium Grid On-Cloud

Let me demonstrate you with a scalable approach to access forms in Selenium. I will be using online Selenium Grid of LambdaTest to parallely run the above script in different browsers & operating systems. Before we go ahead to run our script on LambdaTest we need to take care of a few points which are listed below:

Instead of invoking the regular FirefoxDriver, we’ll have to use the Remote WebDriver along with the capabilities related to the browser, its version, OS, etc.

Since we have already created our script locally, we’ll use the Selenium Desired Capability Generator wherein just by providing some details like the OS, Resolution, Browser(& it’s version),selenium version,location etc, this generator would provide us a few lines of code which would look like below based on our selections.

Now we just need to declare the LambdaTest authentication credentials in the Selenium automation testing scripts. That way, the WebDriver would know the correct Hub URL it needs to address. Below is the final script that we will be using to run our tests on LambdaTest. The changes to our existing script are highlighted.

import java.net.MalformedURLException;
import java.net.URL;
import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.Select;

public class TestForms {

    static String username = "Your UserName";
    static String accesskey = "Your Access Key";
    static RemoteWebDriver driver = null;
    static String gridURL = "@hub.lambdatest.com/wd/hub";
    boolean status = false;

    @BeforeClass
    public static void setUp(){
            System.out.println("-----This is the beginning of our test !!!-----");
            DesiredCapabilities capabilities = new DesiredCapabilities();
            capabilities.setCapability("build", "TestFormsV1.0");
            capabilities.setCapability("name", "SeleniumForms");
        capabilities.setCapability("platform", "Windows 10");
        capabilities.setCapability("browserName", "Chrome");
        capabilities.setCapability("version","79.0");
        capabilities.setCapability("selenium_version","3.13.0");
        capabilities.setCapability("geoLocation","IN");
        capabilities.setCapability("chrome.driver","78.0");

            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.manage().window().maximize();
    }

    @Test
    public void fillForm(){
            driver.get("https://facebook.com");
            System.out.println("-----Let us start the sign up process!!!-----");
            /*
             * Handling text boxes to enter and clear values
             */
            WebElement fName = driver.findElement(By.xpath("//input[@name='firstname']"));
            fName.sendKeys("--Enter you name here--");
            WebElement lName = driver.findElement(By.xpath("//input[@name='lastname']"));
            lName.sendKeys("--Enter your last name--");
            //Clear the textbox
            lName.clear();
            lName.sendKeys("XYZ");
            WebElement eMail = driver.findElement(By.xpath("//input[@name='reg_email__']"));
            eMail.sendKeys("--Enter mail or contact number--");
            WebElement pwd = driver.findElement(By.xpath("//input[@name='reg_passwd__']"));
            pwd.sendKeys("--Enter a valid password here--");
            /*
             * Handling dropdown to select date of birth
             */
            Select date = new Select(driver.findElement(By.xpath("(id('day'))")));
            date.selectByVisibleText("15");
            Select month = new Select(driver.findElement(By.xpath("(id('month'))")));
            month.selectByVisibleText("Jan");
            Select year = new Select(driver.findElement(By.xpath("(id('year'))")));
            year.selectByVisibleText("1990");

            /*
             * Handling Radio buttons to select gender
             */
        driver.findElement(By.className("_58mt")).click();

            /*
             * Handling the Sign Up button to perform click action
             */

            WebElement sgnUp = driver.findElement(By.xpath("//button[@id='u_0_13']"));
        sgnUp.click();
    }
    @AfterClass
    public static void tearDown(){
            System.out.println("-----We're now closing the session...-----");
            driver.quit();
    }
}

You can run the above code directly through Eclipse or through Command Line following the same steps that we have already done earlier. The results would be available in your Lambda Test Dashboard upon execution of the script. I’ll show you the corresponding result page once we execute the script with parallel browsers all at once. Next comes the most interesting part where we can run our tests in parallel browsers without the need of changing the browser details everytime we intend to run our test. But before doing so we will have to create a helper class that will lead the testing. Subsequently, we will have to make a few changes to our main class that contains the test script and we are good to go. In the following part you’ll see our final test script to run our test in parallel on different browsers using Lambda Test.

Test Script Container Class-

The below code would contain the main test script that we intend to execute. This is similar to what has been written above with some minor tweaks in variables. This example shows execution on 3 different browsers. You can modify your script based on your requirement of execution.

import java.net.MalformedURLException;
import java.net.URL;
import java.util.LinkedList;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.Select;

@RunWith(ParallelHelper.class)
public class TestForms {

    static String username = "Your User Name";
    static String accesskey = "Your Access Key";
    static RemoteWebDriver driver = null;
    static String gridURL = "@hub.lambdatest.com/wd/hub";
    public static String platform;
    public static String browserName;
    public static String browserVersion; 
    boolean status = false;

    /*
     * Creating parameters for the browsers to be used
     */
    @Parameterized.Parameters
    public static LinkedList<String[]> getEnvironments() throws Exception {
    LinkedList<String[]> env = new LinkedList<String[]>();
    env.add(new String[]{"WIN10", "chrome", "79.0"});
    env.add(new String[]{"WIN10","firefox","71.0"});
    env.add(new String[]{"WIN10","internet explorer","11.0"});
    return env;
   }

    public TestForms(String platform, String browserName, String browserVersion) {
        this.platform = platform;
        this.browserName = browserName;
        this.browserVersion = browserVersion;
    }

    @Before
    public void setUp() {
            System.out.println("-----This is the beginning of our test !!!-----");
            DesiredCapabilities capabilities = new DesiredCapabilities();
            capabilities.setCapability("build", "TestFormsV1.0");  //Can provide you Build Name
            capabilities.setCapability("name", "SeleniumForms");  //Provide your Test Name
        capabilities.setCapability("platform", platform);       //Would pass the OS to  be invoked
        capabilities.setCapability("browserName", browserName); //Would pass the Browser name to be invoked
            capabilities.setCapability("version", browserVersion);  //Would pass the Browser Version to be invoked
        capabilities.setCapability("selenium_version", "3.13.0");
        capabilities.setCapability("geoLocation", "IN");

            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());
            }
    }

    /*
     * This is our main test script
     */
    @Test
    public void fillForm() {
            driver.get("https://facebook.com");
            driver.manage().window().maximize();
            System.out.println("-----Let us start the sign up process!!!-----");
            /*
             * Handling text boxes to enter and clear values
             */
            WebElement fName = driver.findElement(By.xpath("//input[@name='firstname']"));
            fName.sendKeys("--Enter you name here--");
            WebElement lName = driver.findElement(By.xpath("//input[@name='lastname']"));
            lName.sendKeys("--Enter your last name--");
            // Clear the textbox
            lName.clear();
            lName.sendKeys("XYZ");
            WebElement eMail = driver.findElement(By.xpath("//input[@name='reg_email__']"));
            eMail.sendKeys("--Enter mail or contact number--");
            WebElement pwd = driver.findElement(By.xpath("//input[@name='reg_passwd__']"));
            pwd.sendKeys("--Enter a valid password here--");
            /*
             * Handling dropdown to select date of birth
             */
            Select date = new Select(driver.findElement(By.xpath("(id('day'))")));
            date.selectByVisibleText("15");
            Select month = new Select(driver.findElement(By.xpath("(id('month'))")));
            month.selectByVisibleText("Jan");
            Select year = new Select(driver.findElement(By.xpath("(id('year'))")));
            year.selectByVisibleText("1990");

            /*
             * Handling Radio buttons to select gender
             */
        driver.findElement(By.className("_58mt")).click();

            /*
             * Handling the Sign Up button to perform click action
             */

            WebElement sgnUp = driver.findElement(By.xpath("//button[@id='u_0_13']"));
            sgnUp.click();
    }

    @After
    public void tearDown() {
            System.out.println("-----We're now closing the session...-----");
            driver.quit();
    }
}

Test Script Helper/Runner Class

This class contains the code that would enable parallel execution of test on different browsers.

import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;
import org.junit.runners.Parameterized;
import org.junit.runners.model.RunnerScheduler;

public class ParallelHelper extends Parameterized {

    private static class ThreadPoolScheduler implements RunnerScheduler {
        private ExecutorService exec; 
        public ThreadPoolScheduler() {
            String threads = System.getProperty("junit.parallel.threads", "10");
            int numThreads = Integer.parseInt(threads);
            exec= Executors.newFixedThreadPool(numThreads);
        }

        public void finished() {
            exec.shutdown();
            try {
                exec.awaitTermination(10, TimeUnit.MINUTES);
            } catch (InterruptedException exc) {
                throw new RuntimeException(exc);
            }
        }

        public void schedule(Runnable childStatement) {
            exec.submit(childStatement);
        }
    }



    public ParallelHelper(Class<?> klass) throws Throwable {
            super(klass);
            // TODO Auto-generated constructor stub
    }
}

On running the above class we’ll see that our test runs on the Lambda Test Cloud and the results of the test are generated. Note that you can see the progress on your Eclipse IDE & subsequently the results(like the Execution Video) are available on the Lambda Test Automation Dashboard. Below is a snapshot of how the Execution results would look like in Lambda Test Dashboard:

The Eclipse IDE Console and results on the other hand would show up as below:

Were You Able To Access Forms In Selenium WebDriver?

I hope this Selenium Java tutorial has helped you access forms in Selenium WebDriver. Remember, forms are fundamental for every business running online. Almost every web application is gathering user information through forms. As an automation tester, you need to ensure two things:

All your forms are functionally working as they should.
All your forms are cross browser compatible so they are accessed by every customer.

If you aren’t sure about forms being used in your web-application then you can go ahead and leverage an online Selenium Grid such as LambdaTest. Your first 100 automation testing minutes are absolutely free, along with a lifetime free access to our cross browser testing tool. Leverage parallel testing to ensure all your test cycles are delivered on-time. Happy testing!

Mocha JavaScript Tutorial With Examples For Selenium Testing

Aditya Dwivedi — Mon, 30 Mar 2020 09:45:35 +0000

As per StackOverflow insights 2019, JavaScript is the most popular programming language. As the power of web and mobile is increasing day by day, JavaScript and JavaScript frameworks arebecoming more and more popular as well. Thus it would not be surprising to hear that JavaScript has become a preference for test automation as well. Since past few years, a lot of development has happened in the opesource JavaScript based test automation framework development and now we have multiple JavaScript testing frameworks that are robust enough to be used professionally. There are scalable frameworks that can be used by web developers and testers to automate not even unit test cases, but also create complete end-to-end automation test suites. Mocha is a one such JavaScript testing framework, which has been well renowned since 2016, as per StateofJS 2019.

With that said, when we talk about JavaScript automation testing, we can’t afford to not loop in Selenium into the discussion as well. So I thought of coming up with a step by step tutorial on the framework will be beneficial for you to kickstart your JavaScript automation testing with Mocha and Selenium. We will also be looking into how you can run it on LambdaTest automation testing platform to get a better browser coverage and faster execution times. By the end of this tutorial, you will have a clear understanding of the setup, installation, and execution of your first automation test with Mocha for JavaScript testing.

What You Would Learn From This Mocha JavaScript Tutorial?

In this blog post, we are going to deep dive into Mocha JavaScript testing to perform automated browser testing with Selenium & JavaScript. We will:

Start with the installation and prerequisites for the Mocha framework and explore its advantages.

Execute our first Selenium JavaScript test through Mocha with examples.
Execute group tests.
Use the assertion library.
Encounter possible issues along with their resolutions.
We would execute some Mocha test script on the Selenium Cloud grid platform as well with minimal configuration changes and tests on various browsers and operating systems.

What Makes Mocha So Prevalent?

Mochajs, or simply Mocha, is a feature-affluent JavaScript test framework that runs test cases on Node JS and in the browser, making testing simple and fun. By running serially, Mocha JavaScript testing warrants flexibility and precise reporting, while mapping uncaught exceptions to the correct test cases.

Mocha provides a categorical way to write a structured code for testing the applications thoroughly classifying them into test suites and test cases modules for execution and to produce a test report after the run by mapping errors to corresponding test cases.

What makes Mocha a better choice as compared to other JavaScript testing frameworks

Range of installation methods :

It can be installed globally or as a development dependency for the project. Also it can be set up to run test cases directly on web browser.

Various Browser support :

Can be used to run test cases seamlessly on all major web browsers and provides many browser-specific methods and options. Each revision of Mocha provides upgraded JavaScript and CSS build for different web browsers.

Number of ways to offer test reports :

It provides users with a variety of reporting options like list, progress and JSON, to choose from with default reporter displaying the output based on the hierarchy of test cases.

Support for several JavaScript assertion libraries :

It helps users to cut testing cost and speed-up the process by having compatibility for a set of JavaScript assertion libraries – Express.js, Should.js, Chai. This multiple library support makes it easier for the testers to write lengthy complex test cases and to use them if everything works fine.

Works in both TDD and BDD environments :

Mocha supports both behaviour driven development (BDD) and test driven development (TDD) allowing to write high quality test cases and to enhance test coverage.

Support for both synchronous and asynchronous testing :

Unlike other JavaScript testing frameworks, Mocha is designed with features to fortify asynchronous testing utilizing async/await by invoking the callback once the test is finished. It enables synchronous testing by omitting the callback.

Setting Up for Mocha and Initial Requirements

Before we start our endeavour and explore more of Mocha testing there are some important prerequisites that we need to set up to get started with this Mocha JavaScript tutorial for automation testing with Selenium and JavaScript.

Node JS and Node Package Manager (npm) : Mocha module requires Node JS to be installed on the system. If it is not already present on the system , it can be installed using the npm manager : nodejs.org/en/download/package-manager or by merely downloading the Windows Installer directly from the nodejs.org web site here.
Mocha Package Module : Once we have successfully installed the Node JS on the system , we can make use of the node package manager i.e. npm to install the required package which is Mocha. So, to install the latest version using the npm command line tool, we will first initialize the npm using the below command :

$ npm init

Next, we will install the mocha module using npm using the below command.

$ npm install -g mocha

Here ‘g’ is for installing the module globally, it allows us to access and use the module like and command line tool and does not limit its use to the current project.

The below (‘–save-dev’) command will place the Mocha executable in our ./node_modules/.bin folder

$ npm install --save-dev mocha

We will now be able to run the commands in our command line using the mocha keyword.

Java – SDK: Since Mocha is a Selenium test framework and Selenium is built upon Java , we would also be installing the Java Development Kit ( preferably JDK 7.0 or above ) on the system and configure the JAVA environment.
Selenium Web Driver: We would require a selenium web driver and that should be already present in our npm node modules. If it is not found in the module, we can install the latest version of the selenium web driver using the below command:

$ npm install selenium-webdriver

Browser Driver: Lastly, we would also be installing the driver of the specific browser that we are going to use. This executable also needs to be placed inside the same bin folder.

$ npm install -g chromedriver

Writing Our First Mocha JavaScript Testing Script

We will create a project directory named mocha_test and then we will create a subfolder name scripts with a test script name single_test.js inside it.

Finally, we will initialize our project by hitting the command npm init. This will create a package.json file in an interactive way, which will contain all our required project configurations. It will be required to execute our test script single_test.js.

Finally, we will have a file structure that looks like below :

mocha_test
        | -- scripts
                    | -- single_test.js
        | -- package.json
{
  "name": "mocha selenium test sample",
  "version": "1.0.0",
  "description": " Getting Started with Our First New Mocha Selenium Test Script and Executing it on a Local Selenium Setup ",
  "scripts": {
    "test": "npm run single",
    "single": "./node_modules/.bin/mocha scripts/single_test.js",
  },
  "author": "rohit",
  "license": "" ,
  "homepage": "https://mochajs.org",
  "keywords": [
    "mocha",
    "bdd",
    "selenium",
    "examples",
    "test",
    "bdd",
    "tdd",
    "tap"
    "framework"
  ],
  "dependencies": {
    "bluebird": "^3.7.2",
    "mocha": "^6.2.2",
    "selenium-webdriver": "^3.6.0"
  }
}

You have successfully configured your project and are ready to execute your first Mocha JavaScript testing script.You can now write your first test script in the file single_test.js that was created earlier.

var assert = require('assert');
describe('IndexArray', function() {
  describe('#checkIndex negative()', function() {
    it('the function should return -1 when the value is not present', function(){
      assert.equal(-1, [4,5,6].indexOf(7));
    });
  });
});

Code Walkthrough Of Our Mocha JavaScript Testing Script

We will now walk through the test script and understand what exactly is happening in the script that we just wrote. When writing any mocha test case in JavaScript, there are two basic function calls that we should remember and that does the job for us under the hood. These functions are describe() and it() and we have used both of them in the test script that we just wrote above.

describe(): It is mainly used to define the creation of test groups in Mocha in a simple way. The describe() function takes in two arguments as input, the first argument is the name of the test group, and the second argument is a callback function. We can also have a nested test group in our test as per the requirement of the test case.

If we look at our test case now, we see that we have a test group named IndexArray which has a callback function that has inside it a nested test group named #checkIndex negative() and finally inside of that, is another callback function that contains our actual test.

it(): This function is used for writing individual Mocha JavaScript test cases. It should be written in a layman way conveying what the test does. It () function also takes in two arguments as input, the first argument is a string explaining what the test should do, and the second argument is a callback function which contains our actual test.

In the above Mocha JavaScript testing script, we see that we have the first argument of the it() function that is written as ‘ the function should return -1 when the value is not present ‘ and the second argument is a callback function that contains our test condition with the assertion.

Assertion: The assertion libraries are used to verify whether the condition given to it is true or false. It verifies the test results with the assert.equal(actual, expected); method and makes the equality tests between our actual and expected parameters . It makes our testing easier by using the Node.js built-in assert module. In our Mocha JavaScript testing script we are not using the entire assert library as we only require the assert module with one line of code for this Mocha JavaScript tutorial.

If the expected parameter equals our actual parameter, the test is passed, and the assert returns true. If it doesn’t equal , then the test fails, and the assert returns false.

It is important to check whether the below section is present in our package.json file as this contains the configurations of our Mocha JavaScript testing script.

"scripts": {
    "test": "npm run single",
    "single": "./node_modules/.bin/mocha scripts/single_test.js"
  },

Now, finally, we can run our test in the command line and execute from the base directory of the project using the below command:

$  npm test
or 
$  npm run single

The output of the above test is :

This indicates that we have successfully passed our test and the assert condition is giving us the proper return value of the function based on our test input passed.

Let us extend it further and now add one more test case to our test suite and execute the test. So now our Mocha JavaScript testing script: single_test.js will have one more test that will check the positive scenario of the test and give the corresponding output.

var assert = require('assert');
describe('IndexArray', function() {
  describe('#checkIndex negative()', function() {
    it('the function should return -1 when the value is not present', function(){
      assert.equal(-1, [4,5,6].indexOf(7));
    });
  });
    describe('#checkIndex positive()', function() {
    it('the function should return 0 when the value is present', function(){
      assert.equal(0, [8,9,10].indexOf(8));
    });
  });

});

The output of the above Mocha JavaScript testing script is :

Kudos, you have successfully executed your first Mocha JavaScript testing script in your local machine for Selenium and JavaScript execution. It is important to note that if you have a larger test suite for cross browser testing with Selenium JavaScript then the execution on local infrastructure is not your best call.

The Drawbacks of Local Automated Testing Setup

As you expand your web application, bring in new code changes, overnight hotfixes, and more. With these new changes, comes new testing requirements, so your Selenium automation testing scripts are bound to go bigger, you may need to test across more browsers, more browser versions, and more operating systems. This becomes a challenge when you perform JavaScript Selenium testing through local setup. Some of the major pain points of performing Selenium JavaScript testing on the local setup are:

There is a limitation that the testing can only be performed locally i.e. on the browsers that are installed locally in the system.
This is not beneficial when there is a requirement to execute cross browser testing and perform the test on all the major browsers available for successful results.
The test team might not be aware of all the new browsers versions and hence the compatibility with them are be tested properly
There is a need to devise a proper cross browser testing strategy to ensure satisfactory test coverage.
There arises certain scenarios when it is required to execute tests on some of the legacy browser or browser versions for a specific set of users and operating systems.
It might also be needed to test the application on various combinations of browsers and operating systems, and that is not easily available with the local inhouse system setup.

Now, you may be wondering about a way to overcome these challenges. Well, don’t stress it out too much because an online Selenium Grids is there for your rescue.

How Cloud-Based Selenium Grid Can Be Beneficial In This Scenario ?

An online or cloud-based Selenium Grid can not only help you run your JavaScript Selenium test automation round the clock but it would also help be free from the hassle of maintaining your local infrastructure. We at LambdaTest offer an extensive online Selenium Grid of 2000+ real browsers for both mobile and desktop. Our Selenium Grid is compatible across every test automation framework or programming language that goes with Selenium.

With 150,000 happy customers throughout the globe in a single year, we’ve been the fastest-growing cross browser testing cloud. Here is why:

Our 2000+ real browsers along with various browser versions help you to ensure maximum Selenium automation testing coverage for automated browser testing.
It provides us the capability to perform automated browser testing with a cloud-based Selenium Grid that comprises of 2000+ actual browsers , available for both mobile and desktop. This gives us the advantage to maximum our test coverage during the automated cross browser testing.
The cloud based setup also has a good combination of browser and operating system which offers a great selection of choices and ensures good compatibility.
The benefit of using a testing cloud platform like LambdaTest is to ensure an adaptive environment that is made available to us with all the prerequisites like the set up of the frameworks, so that the users just need to focus on executing the tests using any framework of their choice as per the requirement.
Another plus point of cloud based testing is that it provides a dedicated test infrastructure environment, which supports multiple frameworks. Hence, it further provides us the flexibility to switch between different frameworks easily and use any of them as per the demand of the testing strategy.
It also offers us the feature to spin up a virtual machine if needed. Since these virtual machines are hosted on the cloud server, it ensures good performance and helps us perform automated cross browser testing effectively.
The testing cloud platform provides us with a highly scalable infrastructure component. The main advantage that it gives us is the privilege to use the infrastructure as per the requirement and the ability to run any number of tests at the same time i.e parallel test execution. Hence, when adopting a cloud testing strategy we are just required to modify our test scripts to connect to the platform, but the infrastructure setup used to execute the tests remains the same.
The Cloud Based Selenium Grid also offers us to execute automation test scripts in Selenium and supports various programming platforms such as Java, Python, JavaScript, PHP, Ruby, C# and many other languages that provide binding with Selenium.
It provides us the feature to perform continuous testing in DevOps. Additionally, it easily integrates with many popular CI/CD tools such as Jenkins, Travis CI etc.
We can also leverage the power of parallel testing with Selenium and extract test reports of our Selenium test script execution with the help of the LambdaTest platform in an effortless and seamless manner.

Executing Mocha Script Using Remote Selenium WebDriver On LambdaTest Selenium Grid

Now since we know that executing our test script on the cloud grid has great benefits to offer. Let us get our hands dirty on the same. The process of executing a script on the LambdaTest Selenium Grid is fairly straightforward and exciting. We can execute our local test script by just adding a few lines of code that is required to connect to the LambdaTest platform

It gives us the privilege to execute our test on different browsers seamlessly
It has all the popular operating system and also provides us the flexibility us to make various combinations of the operating system and browsers.
We can pass on our environment and config details from within the script itself.
The test scripts can be executed parallelly and save on executing time.
It provides us with an interactive user interface and dashboard to view and analyze test logs.
It also provides us the Desired Capabilities Generator with an interactive user interface, which is used to select the environment specification details with various combinations to choose from.

Here is the link to visit Lambdatest selenium desired capabilities generator.

So, in our case the multiCapabilities class in single.conf.js and parallel.conf.js configuration file will look similar as below:

multiCapabilities: [
    { // Desired Capabilities
      build: "Mocha Selenium Automation Parallel Test",
name: "Mocha Selenium Test Firefox", 
      platform: "Windows 10", 
      browserName: "firefox", 
      version: "71.0", 
      visual: false,
tunnel: false,
      network: false, 
      console: false
    }

Next and the most important thing is to generate our access key token which is basically a secret key to connect to the platform and execute automated tests on LambdaTest. This access key is unique to every user and can be copied and regenerated from the profile section of the user account as shown below.

The information regarding the access key, username and hub can be alternatively fetched from the lambdatest user profile page Automation dashboard which looks like the one as mentioned in the screenshot below.

Accelerating with Parallel testing Using LambdaTest Selenium Grid

In our demonstration, we will be creating a script that uses the selenium web driver to make a search and open a website and assert whether the correct website is open. If assert returns true, it indicates that the test case passed successfully and will show up in the automation logs dashboard else if assert returns false, the test case fails, and the errors will be displayed in the automation logs. Now, since we are using LambdaTest, we would like to leverage it and execute our tests on different browsers and operating systems. We will execute our test script as below:

Single Test- On a single environment (Windows 10) and single browser (Chrome)
Parallel Test- On a parallel environment i.e. different operating system (Windows 10 and Mac OS Catalina) and different browsers (Chrome, Mozilla Firefox, and Safari)

Here we would create a new subfolder in our project directory i.e. conf. This folder will contain the configurations that are required to connect to the lambdatest platform.

We will create single.conf.js and parallel.conf.js where we need to declare the user configuration i.e username and access key along with the desired capabilities for both our single test and parallel test cases.

Now, we will have a file structure that looks like below :

LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "1267367484683738"; // Lambda Test Access key

//Configurations
var config = {
  commanCapabilities: {
    build: "Mocha Selenium Automation Parallel Test", // Build Name to be displayed in the test logs
    tunnel: false // It is required if we need to run the localhost through the tunnel
  },
  multiCapabilities: [
    {
      // Desired Capabilities , this is very important to configure
      name: "Mocha Selenium Test Firefox", // Test name that to distinguish amongst test cases
      platform: "Windows 10", //  Name of the Operating System
      browserName: "firefox", // Name of the browser
      version: "71.0", // browser version to be used
      visual: false, // whether to take step by step screenshot, we made it false for now
      network: false, // whether to capture network logs, we made it false for now
      console: false // whether to capture console logs, we made it false for now
    },
    {
      name: "Mocha Selenium Test Chrome", // Test name that to distinguish amongst test cases
      platform: "Windows 10", //  Name of the Operating System
      browserName: "chrome",// Name of the browser
      version: "79.0", // browser version to be used
      visual: false, // // whether to take step by step screenshot, we made it false for now
      network: false, // // whether to capture network logs, we made it false for now
      console: false // // whether to capture console logs, we made it false for now
    },
    {
   name: "Mocha Selenium Test Safari", // Test name that to distinguish amongst test cases
      platform: "MacOS Catalina", //  Name of the Operating System
      browserName: "safari",// Name of the browser
      version: "13.0", // browser version to be used
      visual: false, // // whether to take step by step screenshot, we made it false for now
      network: false, // // whether to capture network logs, we made it false for now
      console: false // // whether tocapture console logs., we made it false for now
    }
  ]
};

exports.capabilities = [];
// Code to integrate and support common capabilities
config.multiCapabilities.forEach(function(caps) {
  var temp_caps = JSON.parse(JSON.stringify(config.commanCapabilities));
  for (var i in caps) temp_caps[i] = caps[i];
  exports.capabilities.push(temp_caps);
});

var assert = require("assert"),// declaring assert
  webdriver = require("selenium-webdriver"), // declaring selenium web driver
  conf_file = process.argv[3] || "conf/single.conf.js"; // passing the configuration file

var caps = require("../" + conf_file).capabilities;

// Build the web driver that we will be using in Lambda Test
var buildDriver = function(caps) {
  return new webdriver.Builder()
    .usingServer(
      "http://" +
      LT_USERNAME +
      ":" +
      LT_ACCESS_KEY +
      "@hub.lambdatest.com/wd/hub"
    )
    .withCapabilities(caps)
    .build();
};

// declaring the test group Search Engine Functionality for Single Test Using Mocha in Browser
describe("Search Engine Functionality for Single Test Using Mocha in Browser " + caps.browserName, function() {
  var driver;
  this.timeout(0);
// adding the before an event that triggers before the rest execution
  beforeEach(function(done) {
    caps.name = this.currentTest.title;
    driver = buildDriver(caps);
    done();
  });

// defining the test case to be executed
  it("should find the required search result in the browser ", function(done) {
    driver.get("https://www.mochajs.org").then(function() {
      driver.getTitle().then(function(title) {
        setTimeout(function() {
          console.log(title);
          assert(
            title.match(
              "Mocha | The fun simple flexible JavaScript test framework | JavaScript | Automated Browser Test"
            ) != null
          );
          done();
        }, 10000);
      });
    });
  });

// adding the after event that triggers to check if the test passed or failed
  afterEach(function(done) {
    if (this.currentTest.isPassed) {
      driver.executeScript("lambda-status=passed");
    } else {
      driver.executeScript("lambda-status=failed");
    }
    driver.quit().then(function() {
      done();
    });
  });
});
var assert = require("assert"), // declaring assert
  webdriver = require("selenium-webdriver"), // declaring selenium web driver
  conf_file = process.argv[3] || "conf/parallel.conf.js"; // passing the configuration file

var capabilities = require("../" + conf_file).capabilities;

// Build the web driver that we will be using in Lambda Test
var buildDriver = function(caps) {
  return new webdriver.Builder()
.usingServer(
      "http://" +
        LT_USERNAME +
        ":" +
        LT_ACCESS_KEY +
        "@hub.lambdatest.com/wd/hub"
    )
    .withCapabilities(caps)
    .build();
};

capabilities.forEach(function(caps) {
 // declaring the test group Search Engine Functionality for Parallel Test Using Mocha in Browser
  describe("Search Engine Functionality for Parallel Test Using Mocha in Browser " + caps.browserName, function() {
    var driver;
    this.timeout(0);

// adding the before event that triggers before the rest execution
    beforeEach(function(done) {
      caps.name = this.currentTest.title;
      driver = buildDriver(caps);
      done();
    });

// defining the test case to be executed
    it("should find the required search result in the browser " + caps.browserName, function(done) {
      driver.get("https://www.mochajs.org").then(function() {
        driver.getTitle().then(function(title) {
          setTimeout(function() {
            console.log(title);
            assert(
              title.match(
                "Mocha | The fun simple flexible JavaScript test framework | JavaScript | Automated Browser Test"
              ) != null
            );
            done();
          }, 10000);
        });
      });
    });

// adding the after event that triggers to check if the test passed or failed
    afterEach(function(done) {
      if (this.currentTest.isPassed) {
        driver.executeScript("lambda-status=passed");
      } else {
        driver.executeScript("lambda-status=failed");
      }
      driver.quit().then(function() {
        done();
  });
    });
  });
});

Finally, we have our package.json that has an additional added configuration for parallel testing and required files.

"scripts": {
    "test": "npm run single && npm run parallel",
    "single": "./node_modules/.bin/mocha specs/single_test.js conf/single.conf.js",
    "parallel": "./node_modules/.bin/mocha specs/parallel_test.js conf/parallel.conf.js --timeout=50000"
  },

{
  "name": "mocha selenium automation test sample",
  "version": "1.0.0",
  "description": " Getting Started with Our First New Mocha Selenium Test Script and Executing it on a Local Selenium Setup",
  "scripts": {
    "test": "npm run single && npm run parallel",
    "single": "./node_modules/.bin/mocha scripts/single_test.js conf/single.conf.js",
    "parallel": "./node_modules/.bin/mocha scripts/parallel_test.js conf/parallel.conf.js --timeout=50000"
  },
  "author": "rohit",
  "license": "" ,
  "homepage": "https://mochajs.org",
  "keywords": [
    "mocha",
    "bdd",
    "selenium",
    "examples",
    "test",
    "bdd",
    "tdd",
    "tap"
  ],
  "dependencies": {
    "bluebird": "^3.7.2",
    "mocha": "^6.2.2",
"selenium-webdriver": "^3.6.0"
  }
}

And now the final thing that we should do is to execute our tests from the base project directory by using the below command:

$ npm test

This command will validate the test cases and execute our test suite i.e. both the single test and parallel test cases.

Below is the output from the command line:

Now, if we open the LambdaTest platform and check the user interface, we will see that the test runs on Chrome, Firefox and Safari browsers on the environment specified i.e. Windows 10 and Mac OS and the test is passed successfully with positive results .

Below we see a screenshot that depicts our Mocha code is running over different browsers i.e Chrome, Firefox and Safari on the LambdaTest Selenium Grid Platform. The results of the test script execution along with the logs can be accessed from the LambdaTest Automation dashboard.

Alternatively, if we just want to execute the single test, we can execute the command

$ npm run single

And to execute the test cases in different environments in a parallel way

$ npm run parallel

Wrap Up !

Kudos on a Great job! This concludes our Mocha tutorial and we have now got a clear idea about what Mocha is and how to set it up. It allows us to automate the entire test suite and get started quickly with the minimal configuration and is well readable and also easy to update. We are now able to perform an end to end test using group tests and use the assertion library. The test cases results can be fetched directly from the command line terminal. At last, we noticed that our testing became much easier by adopting the automated browser testing approach using the LambdaTest cloud platform. One of the best features provided by it is the parallel testing environment and the desired capabilities which prove to be efficient in complex use cases. Also, the user interface offered by this platform is very interactive and we can leverage the various benefits of Selenium automation testing both as a beginner and an expert. That is all we need to know to run our Mocha test scripts. Cheers!