Getting Started with Selenium and React
By Neha Vaidya, Community Contributor - June 28, 2021
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).
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('email@example.com')) .then(() => driver.wait(until.elementLocated(By.css('#login-signin')))) .then(() => driver.findElement(By.css('#login-signin')).click()))
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.
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.