如何为最终用户构建简单的 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 屏幕（如网页）提供给最终用户，我想在其中放置按钮 foe ex：，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应用程序

您可以尝试使用一些框架，例如express

快速、不固执、极简的 Node Web 框架。

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

服务器.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>

桌面应用程序

如果你不想使用服务器，那么你可以使用Electron：

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

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

渲染器.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();
}

索引.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