如何测试导航菜单是否包含所有预期项目？答案

【问题标题】：How to test if navigation menu has all expected items?如何测试导航菜单是否包含所有预期项目？
【发布时间】：2017-06-14 10:19:03
【问题描述】：

我正在使用 Nightwatch.js (Selenium/WebDriver) 来测试我的 Node.js 应用程序。

现在我想测试导航栏是否存在，我还想测试导航栏的项目是否符合预期。

这就是我尝试获取所有导航项的方式，但我不知道如何检查元素。我也觉得这有点太复杂了。这是使用 Nightwatch.js 的正确方法吗？

module.exports = {
  'navigation': function(browser) {
    var navElements = []

    function getNavElements(elements) {
      elements.value.forEach(function(element) {
        browser.elementIdText(element.ELEMENT, function(res) {
          navElements.push(res.value)
        })
      })
    }

    browser
      .url(browser.launchUrl)
      .waitForElementVisible('#nav', 10000)

    browser.expect.element('#nav').to.be.present

    browser.elements('css selector', '#nav > .item', getNavElements)
    browser.expect(navElements).to.equal(['First', 'Second', 'Third'])

    browser.end()
  }
}

【问题讨论】：

标签： javascript testing selenium-webdriver nightwatch.js e2e-testing

【解决方案1】：

您的代码几乎是正确的，但这是您遗漏的：

getNavElements 是一个回调，因此当您在下一行测试它时，您无法确定 navElements 是否会按预期填充。
browser.expect 不是函数。它是一个包含element 方法的简单对象。如果您想使用expect 执行常规测试，则必须直接使用Chai（Nightwatch BDD 风格的界面基于此库）。

这是一个最小的工作代码：

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nightwatch</title>
</head>
<body>
  <ul id="nav">
    <li class="item">First</li>
    <li class="item">Second</li>
    <li class="item">Third</li>
  </ul>
</body>
</html>

JavaScript (nav.js)

var expect = require('chai').expect;

module.exports = {
  'Navigation': function (browser) {
    var expectedNavElements = ['First', 'Second', 'Third'];

    function testNavElements(elements) {
      elements.value.forEach(function (element, index) {
        browser.elementIdText(element.ELEMENT, function(res) {
          expect(res.value).to.equal(expectedNavElements[index]);
        });
      });
    }

    browser
      .url('http://localhost:8000/index.html') // Change this if needed
      .waitForElementVisible('#nav', 1000);

    browser.expect.element('#nav').to.be.present;
    browser.elements('css selector', '#nav > .item', testNavElements);

    browser.end();
  }
};

命令

npm i chai安装柴
nightwatch -t tests/nav.js 运行测试套件

注意：如果 Chai 期望通过，您将不会在控制台中收到任何消息，因为这不是由 Nightwatch 本机处理的。但是如果它们没有通过，你会得到一个断言错误。尝试在 expectedNavElements 中输入错误的值，您会看到...

【讨论】：