Search code examples
javascriptseleniuminternsaucelabs

Scrolling to element in Selenium using intern.js and leadfoot


There are so many components to this I'm not sure where the issue is happening but here's my problem. I'm using intern.js for javascript functional testing with SauceLabs.

The following test passes, however when I go to the screenshot at SauceLabs to see how the window is behaving it doesn't scroll properly to the element, so .moveMouseTo is not working properly.

There is a slight bit of scroll but the element is still not visible. I looked into Selenium and focus but I'm new to intern.js so I'm not sure how I can implement this from the descriptions in Selenium only posts here.

Here's the test:

'added comment shows the comment added': function () {
        return this.get('remote')
            .get(require.toUrl('index.html'))
            .setFindTimeout(500)
            .setWindowSize(800, 600)
            .findByCssSelector('.ht-comment-box')
            .click()
            .type('My New Comment')
            .end()
            .findByCssSelector('#addComment')
            .click()
            .end()
            .setFindTimeout(500)
            .findByCssSelector('.commentRow:last-child > .commentContent ')
            .moveMouseTo()
            .getVisibleText()
            .then(function (text) {
                assert.strictEqual(text, 'My New Comment',
                    'Adding a comment should display the comment. Showed instead ' + text);
            });
    },

Here's how the scrolling looks, the added comment is not visible.

enter image description here


Solution

  • I believe you need to pass an element to moveMouseTo

    var remote = this.get('remote');
    
    return remote.get( … )
      // …
      .findByCssSelector( … ).then(function (element) {
        return remote.moveMouseTo(element);
      })
      .getVisibleText();