Question

我目前正在通过测试套件多次运行jquery函数，以验证元素在视口中是否可见（夜视仪的当前命令，如可见，现在等，不要将其考虑在内）。这似乎是一个非常有价值的东西作为一个可重用的命令或断言，但我正在努力解决如何将当前代码转换为新的可重用代码，并花了很多时间尝试不同的事情。

我有其他自定义命令可以很好地工作，但它们不能验证函数的结果，它们只是执行可重复的命令。这让我相信这应该是一个自定义断言？有关自定义断言的文档很少，并没有帮助我成功拼凑出我自己的自定义断言。

这是我在测试文件中运行的内容：

browser.execute(function () {
      $.fn.isOnScreen = function(){
        var win = $(window);
        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };
      return {
          search: $('.search').isOnScreen(),
          header: $('.gateway-header').isOnScreen()
      };
    }, function (result) {
        browser.verify.equal(result.value.search, false);
        browser.verify.equal(result.value.header, false);
    });

所以我的自定义命令/断言需要能够调用isOnScreen（）并验证它是否返回true或false。好像很简单？任何人都可以帮我理解如何解决这个问题吗？非常感谢。

Answer 1

您可以创建自定义命令来实现：

  module.exports.command = function(options, callback) {
    var that = this;
    this
    .execute(function () {
      $.fn.isOnScreen = function(){
        var win = $(window);
        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
      };

      var result = [];
      options.forEach( function(element, index) {
          result.push($(element).isOnScreen());
      });

      return result;

    }, function (result) {

        result.value.forEach( function(element, index) {
            that.verify.equal(element, false)
        });
    });
  };

然后你可以这样称呼它：

client.verifyIfIsOnScreen(['.search', '.gateway-header'])

将nightwatch.js测试（使用jquery函数）转换为自定义断言或命令

1 个答案: