如何使用 Nightwatch 滚动到元素？

Question

我正在使用 nightwatch 对我的应用程序进行电子测试。其中一项测试失败，因为它无法滚动到我怀疑它正在测试的元素。问题是我需要滚动还是有其他方法可以做到这一点？这是我正在测试的元素：

 return this.waitForElementVisible('#myElement', 4000) //wait for it to be visible
       .assert.visible('#myElement')
       .click('#myElement')

该元素位于页面顶部，但测试运行程序向下滚动了一点页面，因此在屏幕截图中不可见。如果需要我怎样才能滚动到这个元素？或者：我如何测试这个元素？

Answer 1

记住：

.execute() inject a snippet of JavaScript into the page for execution in the context of the currently selected frame. The executed script is assumed to be synchronous and the result of evaluating the script is returned to the client.

和

Window.scrollTo() Scrolls to a particular set of coordinates in the document.

您的测试将如下所示：

module.exports = {
    'your-test': function (browser) {
        browser
            .url("http://example.com")
            .waitForElementPresent('body', 2000, "Be sure that the page is loaded")
            .execute('scrollTo(x, y)')
            .yourFirstAssertionHere()
            .yourSecondAssertionHere()
            ...
            .yourLastAssertionHere()
            .end()
    }
};

如果您知道 ID 为 myElement 的元素位于页面顶部，您只需将 x 和 y 更改为 0（只是为了确保您会滚动到页面顶部）。
如果你需要得到x和y的精确值，你可以使用：getLocationInView()像这样：

module.exports = { 'your-test': function (browser) { browser .url("http://example.com") .waitForElementPresent('body', 2000, "Be sure that the page is loaded") .getLocationInView("#myElement", function(result) { //The x value will be: result.value.x //The y value will be: result.value.y }); } }

.getLocationInView(): Determine an element's location on the screen once it has been scrolled into view... Returns The X and Y coordinates for the element on the page.

希望对您有所帮助。

Answer 2

nightwatch 中有一个本地方法可以让元素进入视图。（一般来说，元素应该总是从 nightwatch/selenium 滚动到视图中。但是如果你想手动做到这一点，你可以使用 getLocationInView():

return this.getLocationInView('#myElement')
   .assert.visible('#myElement')
   .click('#myElement')

Nightwatch 还支持使用 moveTo() 通过 Webdriver 协议直接执行此操作，无需任何抽象。在那种情况下，它看起来更像是：

const self = this;
return this.api.element('#myElement', (res) => {
  self.api.moveTo(res.value.ELEMENT, 0, 0, () => {
    self.assert.visible('#myElement');
    self.click('#myElement');
  })
});

（这只是我从头到尾写的，希望我没有写错）

但是对您的情况有帮助的是改变配置中的 seleniums 元素滚动行为，例如：

firefox: {
  desiredCapabilities: {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true,
    elementScrollBehavior: 1
  }
}

默认为 0 -> 元素滚动到页面顶部

elementScrollBavior 1 -> 元素滚动到页面底部

Answer 3

您可以使用 execute document.querySelector({{ACTUAL_SELECTOR}}).scrollIntoView();

执行此 javascript

Answer 4

您可以使用 moveToElement()

就这么用

browser.
.moveToElement(#myElement, 10, 10)
.waitForElementVisible(#myElement, 500)

Answer 5

另外一个示例我用作页面对象命令 (be_expand)，其中我的选择器是一个已经在元素中使用的 xpath (@be_click):

    be_expand() {
        this.api.execute(function(xpath) {
            function getElementByXpath(path) {
                return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            }
            var res = getElementByXpath(xpath);
            res.scrollIntoView(true);
        }, [this.elements.be_click.selector]);
        this.assert.visible('@be_click');
        this.click('@be_click');
        return this;
    }

Answer 6

browser.execute('scrollTo(0,3000)');

如何使用 Nightwatch 滚动到元素？

How to scroll to element using Nightwatch?

javascript

selenium-webdriver

nightwatch.js