In this tutorial, we will be creating a sample React application using and automate it using Selenium WebDriver, covering varied test cases. create-react-app Selenium Icon. Why selenium? Selenium WebDriver provides a programming interface to create and execute test cases. It automates our development and every developer must now to write unit test cases for their work to manage their code better. Prerequisites (NPM comes with Node.js, you don’t need to install it separately) Node.js & NPM Selenium WebDriver & Chromedriver Geckodriver Mocha Firefox and Chrome browsers. Let’s code Let’s straight away jump into development. Create a project called “ ” using create-react-app. react-selenium $ npx create-react-app react-selenium$ cd react-selenium$ npm start Now, you have your app ready, running in the port 3000. You can access it via http://localhost:3000 We will install the above prerequisites in our app. $ npm i selenium-webdriver chromedriver geckodriver --save$ npm i mocha --save-dev Now in your root directory, create a folder called and inside of it, create a file called . Refer the final for reference. test test.js source code In test.js, add the following code in it. /*** Dependency Modules*/var assert = require("assert").strict;var webdriver = require("selenium-webdriver");require("geckodriver"); // Application Serverconst serverUri = " ";const appTitle = "React Selenium App"; http://localhost:3000/# /*** Config for Chrome browser* {webdriver}*/var browser = new webdriver.Builder().usingServer().withCapabilities({ browserName: "chrome" }).build(); @type /*** Config for Firefox browser (Comment Chrome config when you intent to test in Firefox)* {webdriver}*//*var browser = new webdriver.Builder().usingServer().withCapabilities({ browserName: "firefox" }).build();*/ @type /*** Function to get the title and resolve it it promise.* {[type]} [description]*/function logTitle() {return new Promise((resolve, reject) => {browser.getTitle().then(function(title) {resolve(title);});});} @return /*** Sample test case* To check whether the given value is present in array.*/describe("Array", function() {describe("#indexOf()", function() {it("should return -1 when the value is not present", function() {assert.equal([1, 2, 3].indexOf(4), -1);});});}); describe("Home Page", function() {/*** Test case to load our application and check the title.*/it("Should load the home page and get title", function() {return new Promise((resolve, reject) => {browser.get(serverUri).then(logTitle).then(title => {assert.strictEqual(title, appTitle);resolve();}).catch(err => reject(err));});}); /*** Test case to check whether the given element is loaded.*/it("Should check whether the given element is loaded", function() {return new Promise((resolve, reject) => {browser.findElement({ id: "sel-button" }).then(elem => resolve()).catch(err => reject(err));});}); /*** End of test cases use.* Closing the browser and exit.*/after(function() {// End of test use this.browser.quit();});}); Quite long right? I will explain part by part in it. /*** Dependency Modules*/var assert = require("assert").strict;var webdriver = require("selenium-webdriver");require("geckodriver"); Add these lines at the top, which are the required dependencies to automate our development. is the default Node.js library so no need to install it. is the base driver for selenium to run and is essential to run our test cases in other browsers than chrome. assert Selenium-WebDriver geckodriver // Application Serverconst serverUri = " ";const appTitle = "React Selenium App"; http://localhost:3000/# We are going to work on two test cases. First, we are going to load our application using Selenium by providing the required URI, get our app title once our application loads and checking it with the given appTitle value. Second, we are going to find an element in our application to check whether the given element is loaded, which we are going to add it later in this post. Visit file in the folder and change the value as . index.html public title React Selenium App /*** Config for Chrome browser* {webdriver}*/var browser = new webdriver.Builder().usingServer().withCapabilities({ browserName: "chrome" }).build(); @type /*** Config for Firefox browser (Comment Chrome config when you intent to test in Firefox)* {webdriver}*//*var browser = new webdriver.Builder().usingServer().withCapabilities({ browserName: "firefox" }).build();*/ @type It’s time to configure selenium by providing proper inputs like in which browser the test cases should load, what are all the configurations needed etc. Here first browser config value contains configuration for Chrome browsers and I have commented configurations for Firefox browsers. You can do vice-versa when you are ready to test in Firefox. /*** Function to get the title and resolve it it promise.* {[type]} [description]*/function logTitle() {return new Promise((resolve, reject) => {browser.getTitle().then(function(title) {resolve(title);});});} @return Sample function to get the title of the browser using Selenium-WebDriver inbuilt method called and resolving it using Promise. getTitle() /*** Sample test case* To check whether the given value is present in array.*/describe("Array", function() {describe("#indexOf()", function() {it("should return -1 when the value is not present", function() {assert.equal([1, 2, 3].indexOf(4), -1);});});}); Just a sample test case to make you feel more comfortable. Here we are checking whether value 4 present in the given array [1, 2, 3]. In this case, it will return -1 since it is not present, which is equal to -1 (RHS). So the test case is passed. LHS = RHS. /*** Test case to load our application and check the title.*/it("Should load the home page and get title", function() {return new Promise((resolve, reject) => {browser.get(serverUri).then(logTitle).then(title => {assert.strictEqual(title, appTitle);resolve();}).catch(err => reject(err));});}); In this test case, the string given in the denotes the name of the test case. it We are returning the Promise object because Mocha handles promise objects efficiently and it will be easy to manage our test cases better. After, we are first opening our app by providing the . After that, we are calling the function to get the title of our app and passing the title value to the next callback function. serverUri logTitle Using method, we are comparing title(LHS) with appTitle(RHS). assert.strictEqual Finally, we are resolving it. If those values don’t match, we are rejecting it. /*** Test case to check whether the given element is loaded.*/it("Should check whether the given element is loaded", function() {return new Promise((resolve, reject) => {browser.findElement({ id: "sel-button" }).then(elem => resolve()).catch(err => reject(err));});}); For this second test case, let’s add a button in our App.js file and check whether the button is loaded. Open file and add the following code after tag. App.js <p> <button id="sel-button">Click me!</button> (inbuilt Selenium-WebDriver method) find for the element using the given id in our app and we are resolving it when we find the element and rejecting it when we fail to find the element. browser.findElement sel-button /*** End of test cases use.* Closing the browser and exit.*/after(function() {// End of test use this.browser.quit();}); Finally, after the end of test cases, we are closing the browser and it’s instance. Run the test-case Now, we are going to run these test cases. Add the below line (command) in the script object in your package.json file. "s-test": "mocha test" It’s time to run. From your root directory, run the following command as follows. $ npm run s-test Now you can see your test cases are running in your browser automatically and it gets closed after the test cases are over. Mocha Test Cases Result. You have automated your development. Thank you. Final source code can be found . here References For more API methods on Selenium WebDriver, visit, _Advancing ahead in this Selenium tutorial series, we would be pressing on various commonly and routinely used Selenium…_www.softwaretestinghelp.com 25 Top Selenium WebDriver Commands That Every Automation Tester Must Know _Edit description_seleniumhq.github.io selenium-webdriver/lib/webdriver.IWebDriver _In this tutorial, we will be using advanced JavaScript syntax in our app to maintain code as per latest standards and…_medium.com Use ES6 JavaScript syntax (require, import etc.) in your Front end project.

Facebook

Twitter

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

React app powered with Selenium.

Too Long; Didn't Read

Companies Mentioned

@balasubramanim

RELATED STORIES