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

Question

我正在使用 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()
  }
}

Answer 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 安装 Chai
nightwatch -t tests/nav.js 到运行测试套件

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

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

How to test if navigation menu has all expected items?

javascript

testing

selenium-webdriver

nightwatch.js

e2e-testing