如何为最终用户构建简单的UI屏幕以在Node Js中实现自动化

Question

我正在使用Selenium Webdriver，Javascript和Node JS来自动化测试用例。 我刚刚编写了基本的测试用例，例如：

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();

我可以使用命令行node mytestcase.js轻松地在测试用例之上运行

现在，我想要的东西给最终用户一个简单的UI屏幕，例如网页，我要在其上放置按钮。例如： Automate Google search ，一旦用户单击此按钮，测试用例就会自动运行。

我有什么可以做的以上吗？ 我只需要提示如何通过单击按钮就可以为用户提供简单的UI屏幕以自动执行测试用例。

Answer 1

用户界面

Node本身不会提供GUI解决方案，因此您需要使用外部框架。

请参阅： 是否有用于节点应用程序的独立gui模块

基本概念

将您的代码包装在一个函数中，并在用户单击按钮时调用它：

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应用程序

您可以尝试使用一些框架，如快递

快速，简单，极简的节点Web框架。

由于将node用作Web服务器，因此可以创建路由/test ，并在服务器每次收到该请求时调用函数：

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!'))

现在在客户端，每当用户单击按钮时，触发一个http请求以进行测试：

index.html（最终用户）

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

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

桌面应用

如果您不想使用服务器，则可以使用electronic ：

使用JavaScript，HTML和CSS构建跨平台的桌面应用程序

Electron在主进程和渲染器进程中都公开了对Node.js的完全访问权限。

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>

例

有关完整示例，请参见电子快速入门

// 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

笔记

这是最小的示例，请参阅每个项目的完整文档和指南：

• https://electronjs.org/docs

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

Answer 2

如果要创建桌面应用程序，则可以使用libui-node 。

Npm安装它： npm install --save libui-node

创建一个UiWindow ，添加一个UiButton 。

设置onClicked回调以启动测试。