介绍
在本文中，我们将介绍如何开发一个简单的 Web 应用程序，并通过模拟用户与浏览器的交互来自动测试它。
如果您想亲自试验这个项目，GitHub 上有一个存储库，其中包含本文中介绍的所有代码。
有关测试驱动开发的更多信息，请参阅这份精彩的指南。
为什么我们需要浏览器自动化？
手动测试 JavaScript Web 应用程序可能很费力。随着应用程序中包含的功能数量增加，使用它们的不同组合方式也会呈指数级增长。当您手动测试所有内容时，随着案例数量的增加，您必须分配更多时间进行测试，或者（如果您想快速完成任务）牺牲测试的彻底性。
那么，当我们开始浪费时间在需要花费很长时间手动执行的繁琐流程上时，我们该怎么办？自动化！
有一种专门为自动化 Web 界面测试而设计的工具，称为浏览器自动化。使用浏览器自动化，您可以创建自动与网页交互的程序。这些程序可以跟踪链接、按下按钮、读取和输入文本、等待内容出现在页面上等等。
浏览器自动化为开发过程提供了许多好处：
更快的错误重现
有时，错误是由于众多应用程序功能的组合而产生的。因此，这些错误可能需要几个步骤才能重现。借助浏览器自动化，您可以创建一个脚本，自动执行重现错误所需的所有步骤，并直接进入调试过程。
回归测试
有时，添加或修改某个功能会对程序的其他方面产生意想不到的后果，也许会破坏以前正常运行的某些功能。如果这种更改导致以前正常运行的程序中断，则称为回归。借助浏览器自动化，您可以创建一套测试，以确保每个功能都按预期运行。每当您进行更改时，都可以运行此套件以查找回归。
强大的应用程序
构建大型 JavaScript 应用程序很快就会变得一团糟。应用程序会逐渐变得脆弱，你会有一种挥之不去的感觉，好像有几十个未被发现的错误就在你的眼前。一套广泛的自动测试有助于你对应用程序的稳健性充满信心。
浏览器自动化并不总是合适的
尽管如此，有时手动测试比浏览器自动化更适合您的需求。设置所有内容并编写测试需要更多的前期时间，并且在某些情况下这是不值得的。
快速成型
有时，您并不清楚应用程序应该是什么样子，而且您正在尝试许多不同的想法，并经常对代码进行重大更改。通常，最好等到应用程序的基本结构基本确定后再编写自动化测试，这样您就不必频繁重写它们。
时间紧迫
如果您的截止日期很快就要到了，您可能无法承担编写自动化测试所需的时间投入。不过，您必须小心谨慎，因为如果您拖延太久，您可能会陷入更深的技术债务。
入门
最流行的浏览器自动化工具（在撰写本文时）称为Selenium。我们将使用基于 Selenium 构建的 JavaScript 浏览器自动化框架Nightwatch.js。
如果您尚未安装 Node.js，则需要安装它。
首先，为你的项目创建一个文件夹，并创建一个名为bin的子文件夹。下载 selenium 服务器独立 jar 文件并将其放在bin文件夹中。
在您的终端或 Node.js 命令提示符中（如果您运行的是 Windows），运行以下命令：
npm install -g nightwatch
在项目文件夹中，创建一个名为tests 的新子文件夹。我们将把测试脚本放在这里。
在项目根目录中，创建一个名为nightwatch.json的文件，其内容如下：
{
"src_folders" : ["tests"],
"selenium" : {
"start_process" : true,
"server_path" : "bin/selenium-server-standalone-2.53.0.jar"
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
如果您想使用不同的浏览器进行测试，可以按照需要更改browserName属性（例如更改为“firefox” ）。
接下来，我们将使用一个简单的示例进行测试，以确保一切正常。
简单示例
首先，我们将创建一个脚本示例，打开搜索引擎，输入查询，按下搜索按钮并获取结果数量。
在您的测试文件夹中，创建一个名为searchExample.js的文件，其内容如下：
module.exports = {
"Search engine example": function(browser) {
browser
// Navigate to Bing
.url("http://bing.com")
// Enter "Hello world" into the search box
.setValue("input[name=q]", "Hello, world!")
// Click the search button
.click("input[type=submit]")
// Read the span with the search result count
.getText("span.sb_count", function(result) {
console.log(result.value);
})
// Close the browser
.end();
}
};
在终端/Node.js 命令提示符中导航到项目文件夹并运行以下命令：
nightwatch -t tests/searchExample
这应该打开浏览器，运行脚本，并向控制台输出类似这样的内容：
Starting selenium server... started - PID: 4864
[Search Example] Test Suite
===========================
Running: Search engine example
13,100,000 RESULTS
No assertions ran.
得到这个结果意味着你已经正确设置了一切。接下来我们将开发一个经过全面测试的应用程序。
示例应用程序
在本节中，我们将使用浏览器自动化以测试驱动的方式开发身体质量指数（BMI）计算器。
BMI 的定义是体重（公斤）除以身高（米）的平方。有时，人们会用 BMI 粗略估计来判断一个人是体重过轻还是过重：BMI 在 18.5 到 25 之间属于正常，BMI 值越低则体重过轻，BMI 值越高则体重过重。该指标有许多局限性，但就我们的目的而言，我们可以忽略这些局限性，因为我们的重点是 Web 开发，而不是医学科学。
我们将从一个简单易用的页面开始，用户可以在其中输入身高和体重，按下按钮，然后找出他们的 BMI。创建一个名为BMICalculator.html的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator</title>
<style>
#result {
display: none;
}
#bmi, #category {
font-weight: bold;
}
input[type=text] {
width: 50px;
}
</style>
</head>
<body>
<form>
<label>Height: <input type="text" name="height" /> cm</label><br />
<label>Weight: <input type="text" name="weight" /> kg</label><br />
<input type="submit" value="Calculate BMI" />
<p id="result">Your body mass index is <span id="bmi"></span>. You are <span id="category"></span>.</p>
</form>
<script>
function calculateBMI(weight, height) {
height /= 100; // convert from cm to m
return weight / (height * height);
}
function getCategory(bmi) {
if (bmi < 15) return "very severely underweight";
if (bmi < 16) return "severely underweight";
if (bmi < 18.5) return "underweight";
if (bmi < 25) return "normal";
if (bmi < 30) return "overweight";
if (bmi < 35) return "obese";
if (bmi < 40) return "severely obese";
return "very severely obese";
}
var form = document.forms[0],
result = document.getElementById("result"),
bmiSpan = document.getElementById("bmi"),
categorySpan = document.getElementById("category");
form.onsubmit = function () {
var height = form.height.value,
weight = form.weight.value;
var bmi = calculateBMI(weight, height),
category = getCategory(bmi);
result.style.display = "block";
bmiSpan.innerText = bmi.toFixed(2);
categorySpan.innerText = category;
return false;
};
</script>
</body>
</html>
如果你在浏览器中打开此页面，你应该能够看到如下内容：
现在我们将使用 Nightwatch 来模拟用户与此计算器的交互。我们将编写一个脚本，该脚本将自动在文本框中输入不同的输入，按下计算按钮，并检查以下预期：
- 在按下按钮之前，结果文本不应该可见。
- 按下按钮后，结果文本应该可见。
- 类别（即“正常”、“肥胖”、“体重过轻”等）与输入正确对应。
- BMI 与输入正确对应。
在测试文件夹中，创建一个名为BMICalculator.js的文件，其内容如下：
var selectors = {
weight: "input[name=weight]",
height: "input[name=height]",
submit: "input[type=submit]",
bmi: "#bmi",
category: "#category",
result: "#result"
};
var expectedResults = {
"very severely underweight": [
[40, 170, "13.84"],
[40, 180, "12.35"],
[40, 190, "11.08"],
[40, 200, "10.00"],
[55, 200, "13.75"]
],
"severely underweight": [
[40, 160, "15.62"],
[50, 180, "15.43"],
[60, 195, "15.78"],
[60, 200, "15.00"]
],
underweight: [
[40, 150, "17.78"],
[40, 155, "16.65"],
[50, 165, "18.37"],
[50, 170, "17.30"],
[50, 175, "16.33"],
[60, 185, "17.53"],
[70, 195, "18.41"]
],
normal: [
[55, 150, "24.44"],
[55, 160, "21.48"],
[55, 170, "19.03"],
[70, 170, "24.22"],
[70, 180, "21.60"],
[70, 190, "19.39"],
[85, <span class="hljs-number"免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
