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

Question

I use moveMouseTo but it doesn't seem to work. This is my code. Does anyone able to see what is wrong with it? The assert should work and not return error, because if you try to scroll down the page at www.keylocation.sg , it will shows a navigation bar.

Thanks before.

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

Your test is probably failing because of how the WebDriver server you're using determines element visibility. The header menu on that page is initially not visible because it has a negative top margin, which moves it outside of the viewport. However, according to the WebDriver spec , an element that's outside the viewport because of a negative margin isn't necessarily considered invisible. Chrome's and Firefox's WebDriver servers, at least, say it's visible. This is a WebDriver issue rather than an Intern issue; Intern is basically just asking the WebDriver server "is this element visible" and telling you the answer.

Since isDisplayed doesn't seem like it will work in this case, you could instead check whether the element has the disabled class, which is what causes it to have the negative margin.

Unfortunately, trying to simply move the mouse 1000 pixels outside of an element context doesn't scroll the page. When you don't give moveMouseTo an element, it moves within the current context element (the last thing that was found). When there's no context, it's moving within the outermost element, which in this case is only 632px high. You'll need to set the context to an element that's tall enough to contain your movement offset, or you can find an element at the bottom of the page, like the footer, and move the mouse to that:

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

or

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

Your test has a few other issues you may want to correct as well. The initial get('about:blank') isn't necessary. There's no reason to split the two halves of your command chain; the timeout applies to the whole chain whether it's split or whole. You don't need an end after the moveMouseTo ; end is for popping elements off the command chain's context, and moveMouseTo doesn't add anything to the context.