javascript - 使用 intern.js 进行测试时无法滚动

Question

我使用 moveMouseTo 但它似乎不起作用。这是我的代码。有谁能看出它有什么问题吗？断言应该有效并且不会返回错误，因为如果您尝试向下滚动位于 www.keylocation.sg 的页面，它将显示一个导航栏。

先谢谢了。

define([
  'intern!object',
  'intern/chai!assert',
  './util',
  'intern/dojo/node!fs'
], function(registerSuite, assert, util, fs) {

  var suite = {
    name: 'home-navbar',
    afterEach: util.checkJSErrors,

    // testing the visibility of navigation bar in the home page
    'Home page navigation bar: navigation bar visibility': function() {
      var remote = this.remote
        .setWindowSize(1024, 768)
        .get('about:blank')
        .get('https://www.keylocation.sg');
      this.timeout = 300000;
      return remote
        // check: Home page loads, navbar is not visible
        .findById('header-menu').isDisplayed().then(assert.isFalse).end()
        // check: Scroll down to next page, navbar becomes visible
        .moveMouseTo(0,1000).end()
        .findById('header-menu').isDisplayed().then(assert.isTrue).end();
    }
  };

  registerSuite(suite);

});

Answer 1

您的测试可能因您使用的 WebDriver 服务器确定元素可见性的方式而失败。该页面上的标题菜单最初是不可见的，因为它有一个负的上边距，这将它移到了视口(viewport)之外。然而，根据the WebDriver spec ，由于负边距而位于视口(viewport)之外的元素不一定被视为不可见。至少，Chrome 和 Firefox 的 WebDriver 服务器说它是可见的。这是 WebDriver 问题而不是 Intern 问题； Intern 基本上只是询问 WebDriver 服务器“这个元素是否可见”并告诉您答案。

由于 isDisplayed 在这种情况下似乎不起作用，您可以改为检查该元素是否具有 disabled 类，这是导致它具有的原因负边距。

不幸的是，尝试简单地将鼠标移动到元素上下文之外 1000 像素不会滚动页面。当您不给 moveMouseTo 元素时，它会在当前上下文元素(找到的最后一个元素)内移动。当没有上下文时，它会在最外层元素内移动，在本例中它只有 632 像素高。您需要将上下文设置为一个足够高的元素以包含您的移动偏移量，或者您可以在页面底部找到一个元素，例如页脚，然后将鼠标移至该元素:

.findByCssSelector('.wrapper')
.moveMouseTo(0, 1500)   // 1000 pixels is too small to show the scrollbar
.end()

或

.findByTagName('footer')
.then(function (footer) {
    return this.parent.moveMouseTo(footer);
})
.end()

您的测试还有一些您可能想要更正的其他问题。初始的 get('about:blank') 不是必需的。没有理由将命令链分成两半；超时适用于整个链，无论它是 split 的还是完整的。在 moveMouseTo 之后不需要 end； end 用于从命令链的上下文中弹出元素，moveMouseTo 不会向上下文添加任何内容。