使用浏览器自动化测试用户界面

2019-01-10 08:00:00 · 飞浪

在本文中，我们将介绍如何开发一个简单的 Web 应用程序，并通过模拟用户与浏览器的交互来自动测试它。了解如何使用浏览器自动化框架 Nightwatch.js。

介绍

在本文中，我们将介绍如何开发一个简单的 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"

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用浏览器自动化测试用户界面

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "src_folders" : ["tests"], "selenium" : { "start_process" : true, "server_path" : "bin/selenium-server-standalone-2.53.0.jar" }, "test_settings" : { "default" : { "desiredCapabilities": { "browserName": "chrome" } } } }

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

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

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"