在Nightwatch中获取匹配元素计数的正确方法?

时间:2015-09-23 20:47:00

标签: nightwatch.js

我试图测试todo应用是否具有正确数量的元素。

文档似乎几乎只涉及单个元素,因此我不得不使用Selenium Protocol函数。这是测试匹配选择器数量的正确方法(在这种情况下,检查2个li元素)吗?

client.elements('css selector','#todo-list li', function (result) {
    client.assert.equal(result.value.length, 2);
});

这在我的测试中起作用,但是我不确定是否有为此使用回调的问题。还不确定为什么Nightwatch没有任何辅助功能来处理多个元素。

6 个答案:

答案 0 :(得分:13)

我在VueJS模板中找到了以下非常优雅的解决方案。它显示了如何在Nightwatch中添加custom assertion,以计算选择器返回的元素数量。有关如何在Nightwatch中编写自定义断言的详细信息,请参阅http://nightwatchjs.org/guide#writing-custom-assertions

安装后,使用方法非常简单:

browser.assert.elementCount('#todo-list li', 2)

插件:

// A custom Nightwatch assertion.
// the name of the method is the filename.
// can be used in tests like this:
//
//   browser.assert.elementCount(selector, count)
//
// for how to write custom assertions see
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
  this.message = 'Testing if element <' + selector + '> has count: ' + count;
  this.expected = count;
  this.pass = function (val) {
    return val === this.expected;
  }
  this.value = function (res) {
    return res.value;
  }
  this.command = function (cb) {
    var self = this;
    return this.api.execute(function (selector) {
      return document.querySelectorAll(selector).length;
    }, [selector], function (res) {
      cb.call(self, res);
    });
  }
}

此代码已于2016年添加至vuejs-templates by yyx990803。因此,yyx990803可获得全部功劳。

答案 1 :(得分:8)

为了让你放心,我尝试抓住所有匹配的元素时做了类似的事情,例如:

    browser.elements("xpath","//ul[@name='timesList']/h6", function(result){
        els = result.value;
        var i = 0;
        els.forEach(function(el, j, elz){
            browser.elementIdText(el.ELEMENT, function(text) {
                dates[i] = text.value;
                i++;
            });
        });
    });

答案 2 :(得分:6)

或者,如果您想确保存在n个元素,则可以使用:nth-of-type / :nth-child选择器和夜视仪{{1}的组合}。

例如,如果您想测试expect是否有九个直接孩子:

#foo

或者如果function(browser) { browser .url('http://example.com') .expect.element('#foo > *:nth-child(9)').to.be.present; browser.end(); } 有三个直接#bar个孩子:

article

答案 3 :(得分:2)

我使用内置方法this.api.elements改编Chris K's answer以支持XPath表达式:

exports.assertion = function elementCount(selector, count) {
  this.message = 'Testing if element <' + selector + '> has count: ' + count

  this.expected = count

  this.pass = function pass(val) {
    return val === this.expected
  }

  this.value = function value(res) {
    return res.value.length
  }

  this.command = function command(callback) {
    return this.api.elements(this.client.locateStrategy, selector, callback)
  }
}

有关使用说明和信用,请参阅his answer

答案 4 :(得分:0)

如果您喜欢TypeScript,可以使用以下断言来确认元素计数:

import { NightwatchCallbackResult, NightwatchAssertion, NightwatchAPI } from "nightwatch";

module.exports.assertion = function (selector: string, count: number, description?: string) {

    this.message = description || `Testing if element <${selector}> has count: ${count}`;
    this.expected = count;

    this.pass = (value: number) => value === this.expected;

    this.value = (result: number) => result;

    this.command = (callback: (result: number) => void): NightwatchAPI => {

        const self: NightwatchAssertion = this;

        return self.api.elements(this.client.locateStrategy, selector, (result: NightwatchCallbackResult) => {
            callback(result.value.length);
        });
    }

}

像这样使用:

browser.assert.elementCount('body', 1, 'There is only one body element');

答案 5 :(得分:0)

您可以使用expect.elements(<selector>).count()

  browser.expect.elements('div').count.to.equal(10);
  browser.expect.elements('p').count.to.not.equal(1);