Home Guide Getting Started with Selenium and React

Getting Started with Selenium and React

By Neha Vaidya, Community Contributor -

Table of Contents

Selenium and React are the two popular tools, unique in their own ways and common in software development and testing circles. React is a JavaScript library meant to create interactive user interfaces. On the other hand, Selenium is used to perform automation testing on such user interfaces and web pages. They are often used in tandem, as this article will demonstrate.

This article will explore how both these tools go hand in hand and in what cases Selenium and React best fit the test scenarios and environments.

Let’s get started!

Introduction to Selenium and React

     

  • Selenium is an open-source functional testing tool often leveraged to test web applications on multiple browsers and operating systems (platforms).
  • React is an open-source, front-end, JavaScript library often used to build user interfaces or UI elements. It is maintained by Facebook and a community of individual developers and organizations. React can be used as a base when developing single-page or mobile applications.

First, let’s configure both these tools.

How to configure Selenium

Ensure that Selenium’s language bindings are installed and ready by running:

sudo pip install selenium
sudo pip install requests

On completing this installation, let’s begin writing the first test case.

Note: Try this Selenium WebDriver tutorial to configure and navigate Selenium test automation.

How to Run React Apps using Selenium

Setting up the webdriver with the help of Node.js is quite simple.

const webdriver = require("selenium-webdriver");
const driver = new webdriver.Builder().forBrowser("firefox").build();
// Instantiate a web browser page
driver.navigate().to(Yahoo");

After configuring Selenium WebDriver, go ahead and add control flows to the code. WebDriver methods are asynchronous. For example, locating an element with the help of a CSS selector is an async operation. All asynchronous operations return (Promises) in the Selenium WebDriver, so that testers can chain them through the then() method.

Note: Promises are return methods that store the value of the element when asynchronous operations take place to claim them through then().

const By = webdriver.By; // useful Locator utility to describe a query for a WebElement
driver.navigate().to("Yahoo")
.then(() => driver.findElement(By.css("#login-username")))
.then(element => element.getAttribute("value"))
.then(value => console.log(value));

The driver.findElement() returns a Promise for a WebElement, which is mainly the interface to inspect and manipulate DOM elements in Selenium.

driver.navigate().to("Yahoo")
.then(() => driver.findElement(By.css("#login-username")))
.then(element => element.getAttribute("value"))
.then(value => console.log(value));
const until = webdriver.until; // useful utility to wait command
driver.navigate().to(“Yahoo”)
.then(() => driver.findElement(By.css('#login-username')).sendKeys('xyz@yahoo.com'))
.then(() => driver.wait(until.elementLocated(By.css('#login-signin'))))
.then(() => driver.findElement(By.css('#login-signin')).click()))

Selenium React Example

Note: The login will be successful on providing a valid email address. If you do not have one, make sure to create one email address for a Yahoo account or you can use any other account.

Each time the tester invokes an asynchronous WebDriver task without resolving it, the WebDriver actually pushes this task to a global queue. As soon as the tester resolves one promise (using then()), or after the next tick of the JavaScript event loop, all queued tasks are executed in the order in which they were scheduled as if they were synchronous. This is called Control Flow.

This is how Selenium users can add React to Selenium Webdriver and integrate the tools for more efficient development.

Bear in mind that all Selenium tests must be run on real browsers and devices for accurate results. Start running tests on 2000+ real browsers and devices on BrowserStack’s real device cloud. Run parallel tests on its Cloud Selenium Grid to get faster results without compromising on accuracy. Detects the bugs and offers a high-end UX/UI to the users by automated testing in real user conditions with BrowserStack Automate.

Run Selenium Tests on Real Devices

Tags
Automation Testing Selenium Selenium Webdriver

Featured Articles

Selenium Grid Tutorial : How to Set It Up

React Native and Appium – Introduction to Test Automation

How to use Wait commands in Selenium WebDriver

BrowserStack Logo Run Selenium Tests on 2000+ Browsers & Devices Contact us Get Started Free