如何使用 Nightwatch 滚动到元素？

Question

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

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

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

Answer 1

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

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

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

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 2

你可以使用moveToElement()

像这样简单地使用它

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

Answer 3

请记住：

.execute()将一段 JavaScript 注入页面，以便在当前选定框架的上下文中执行。 假定执行的脚本是同步的，并将评估脚本的结果返回给客户端。

和

Window.scrollTo()滚动到文档中的一组特定坐标。

您的测试将如下所示：

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()：确定元素滚动到视图后在屏幕上的位置... 返回页面上元素的 X 和 Y 坐标。

希望这对您有所帮助。

Answer 4

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

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)');

Answer 7

browser.execute('window.scrollTo(0, 1080)')

这对我来说可以滚动到页面底部。