Getting Started with Selenium and React

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.

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.

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

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 3000+ 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