How to do Selenium Test Automation for Syncfusion React Components?

This document explains Selenium test automation support for React.

Step 1: Create React project by using the following command.

Step 2: Install the Syncfusion React packages to render the Syncfusion components.

All Syncfusion React (Essential JS 2) packages are published in npmjs.com public registry. You can choose the component to be installed. For this application, the button component is used.

To install the button component, use the following command.

Step 3: Install the Selenium-webdriver ,Chromedriver, Geckodriver, and Mocha packages to use the Selenium automation. Refer to the following commands to install the required packages.

Step 4: Create a test folder in the root directory of your application and create a file called test.js inside the test folder.

Step 5: Refer to the following code sample to write a test case in the test.js.

var assert = require("assert");
var webdriver = require("selenium-webdriver");
require("geckodriver");
var chrome = require('selenium-webdriver/chrome');
var path = require('chromedriver').path;
const serverUri = "http://localhost:3000/#";
const appTitle = "react1";
var service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);
 
var browser = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build();
 
/**
 * Config for Chrome browser
 * @type {webdriver}
 */
 
function logTitle() {
    return new Promise((resolve, reject) => {
     browser.getTitle().then(function(title) {
      resolve(title);
     });
    });
   }
 
it("Should check whether the given element is loaded", function () {
    browser.get(serverUri)
    browser.findElement({ id: 'buttons' }).click().then(function() {
    
 
    return new Promise((resolve, reject) => {
        browser
         
         .then(logTitle)
         .then(title => {
          assert.equal(title, appTitle);
          resolve();
         })
         .catch(err => reject(err));
       });
    });
});
 

Step 6: Refer to the following command to run the application.

Step 7:  Run the test case

Now, you can run these test cases. Add the following line (command) in the script object in your package.json file.

It’s time to run. From your root directory, run the following command.

Now, the test cases will run in your browser automatically and gets closed after the test cases are over.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/233067/ze/react-test-1665425647.zip