How can I build simple UI screen for end user for automation in Node Js

Question

I am using Selenium webdriver, Javascript and Node JS to automate test cases. I have just wrote basic test case like :

var webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder().
   withCapabilities(webdriver.Capabilities.chrome()).
   build();

driver.get('http://www.google.com');
driver.findElement(webdriver.By.name('q')).sendKeys('simple programmer');
driver.findElement(webdriver.By.name('btnK')).click();
driver.quit();

I can easily run above test case using command line node mytestcase.js

Now what I want it Give simple UI screen like web page to end user where I want to put button foe ex: Automate Google search and as soon as user click on this button, test case will run automatically.

Is there any chance I can do above? I just need hint about how can I given simple UI screen to user to automate test cases by just clicking on button.

Answer 1

UI

Node by itself won't provide a GUI solution, so you need to use an external framework.

See: Is there any standlone gui module for node application

Basic concept

Wrap your code inside a function and call it when the user clicks the button:

function myTest() {
  driver.get('http://www.google.com');
  driver.findElement(webdriver.By.name('q')).sendKeys('simple programmer');
  driver.findElement(webdriver.By.name('btnK')).click();
  driver.quit();
}

Web application

You can try to use some framework like express

Fast, unopinionated, minimalist web framework for node.

Since you will be using node as a web Server you can create a route: /test , and call your function every time the server gets that request:

server.js

var express = require('express')
var app = express()

app.get('/test', function (req, res) {
  // Webdriver test case code
  var results = myTest();
  // send results or render custom UI
  res.send(results);
})
// http://localhost:3000
app.listen(3000, () => console.log('Example app listening on port 3000!'))

Now in the client side, trigger an http request for your test every time the user clicks the button:

index.html (End user)

<script>
  function runTest() {
    // Run the test and do something with the results...
    fetch("/test").then(res => {...});
  }
</script>

<button onclick="runTest();">Run the test!</button>

Desktop application

If you don't want to use a server then you can use electron :

Build cross platform desktop apps with JavaScript, HTML, and CSS

Electron exposes full access to Node.js both in the main and the renderer process.

renderer.js

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().
  withCapabilities(webdriver.Capabilities.chrome()).
  build();

function AutomateGoogleSearch() {
  driver.get('http://www.google.com');
  driver.findElement(webdriver.By.name('q')).sendKeys('simple programmer');
  driver.findElement(webdriver.By.name('btnK')).click();
  driver.quit();
}

Index.html

<button onclick="AutomateGoogleSearch();">Automate search test!</button>

Example

For a full example see electron-quick-start

// Clone this repository
git clone https://github.com/electron/electron-quick-start
// Go into the repository
cd electron-quick-start
// Install dependencies
npm install
// Run the app
npm start

Notes

This are minimal examples, please see the full documentation and guides of each project:

• https://electronjs.org/docs

• http://expressjs.com/en/starter/hello-world.html

Answer 2

If you want to create a desktop app you could use libui-node .

Npm install it: npm install --save libui-node

Create a UiWindow , add a UiButton .

Set the onClicked callback to launch your test.