jarvis

node based selenium setup for running UI flows using JSON config

Basic Idea

While using selenium, it's pretty tedious to go through the DOM and pick the xpath/id etc and write the selenium code to execute the flow. So one objective was to make this process easier in 2 ways:

• Record the steps done on UI using an injected js utility.
• Record it in a format that can be easily edited and is more readable. Something like this:

{
  "type": "text",
  "value": "Some value",
  "label": "form-control",
  "xpath": "/html/body/DIV[1]/DIV[2]/DIV[2]/FORM[1]/DIV[1]/DIV[1]/INPUT[1]",
  "event": "input"
},
{
  "waitUntil": 200,  
  "type": "text",
  "value": "that was",
  "label": "form-control",
  "xpath": "/html/body/DIV[1]/DIV[2]/DIV[2]/FORM[1]/DIV[1]/DIV[2]/INPUT[1]",
  "event": "input"
},
{
  "waitForEle": {
    "id": "someIdToWaitForBeforeThisStepHappens"  
  },
  "type": "text",
  "value": "typed",
  "label": "form-control",
  "xpath": "/html/body/DIV[1]/DIV[2]/DIV[2]/FORM[1]/DIV[2]/DIV[1]/INPUT[1]",
  "event": "input"
}

How To Record

After setup is done, run the following command yarn run record. This will take you to an example bootstrap form where you will see the recording utility in the bottom left which was injected into the website using selenium itself.

• Click on record
• Fill out the fields
• Once done click stop
• The recorded JSON path config will be copied in your clipboard
• Create a new json file inside the simpleFlows folder in the project and paste it.
• To re run this flow run this command yarn run simpleFlow {nameOfJsonFile}

There is already a saved flow for the bootstrap form you can simple run it using yarn run simpleFlow bootstrapEx.

Prerequisites

Windows

• node, npm or yarn are needed for this. Follow further steps to install node.
• For windows install node from here

Mac or Linux

• install nvm using instructions from here
• using nvm install node and npm, then install yarn from here

Setting up

• clone this repository or download it from github.
• go to the base directory of the project and run npm install or yarn
• if everything goes well, setup is done

Test Cases

The recorded flows can be used along with a testing library to write test cases like this:

var test = require("selenium-webdriver/testing");
const { runSimpleFlow } = require("../service/seleniumService");
var { expect } = require("chai");
let driver;

describe("hooks", function() {
  after(function() {
    // runs after all tests in this block
    driver.quit();
  });
  // test cases
  it("Add Bene", async function() {
    this.timeout(60000 * 10);
    driver = await runSimpleFlow("addBeneTest");
    let titleDiv = await driver.findElement({ className: "title" });
    let title = await titleDiv.getAttribute("innerHTML");
    expect(title).equals("ERROR");
    driver.sleep();
  });
});

Commands

• to record a flow from a website run yarn run record {website url} (Currently only works for single page applications or if the flow is limited to the initial URL)
• to run a simple flow from json files for example branchLogin use: npm run simpleFlow branchLogin.
• to run a custom test case yarn run mocha path/to/testcase.js

Useful Links

• useful for By.js: https://stackoverflow.com/questions/36869816/what-is-by-js-locator-for-in-protractor-webdriverjs
• hover https://gist.github.com/umaar/9051143
• selenium webdriver doc: https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index.html
• several ways to set text in the question itself and answer: https://stackoverflow.com/questions/25583641/set-value-of-input-instead-of-sendkeys-selenium-webdriver-nodejs