如何使用 Nightwatch 滚动到元素？答案

【问题标题】：How to scroll to element using Nightwatch?如何使用 Nightwatch 滚动到元素？
【发布时间】：2020-10-01 01:58:17
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript selenium-webdriver nightwatch.js

【解决方案1】：

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 -> 元素滚动到页面底部

【讨论】：

提一下原生方法是nightwatchjs.org/api/moveTo.html会很有帮助
@MikeDavlantes 感谢您的意见。我试图扩展我的描述，希望我记得如何在守夜人中正确使用它：'D

【解决方案2】：

您可以使用moveToElement()

这样用就行了

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

【讨论】：

如果元素在折叠之下，它会“滚动”屏幕以将元素移动到可视区域吗？
moveToElement 在 Firefox 中不起作用。这是一个已知问题。

【解决方案3】：

记住：

.execute() 将 JavaScript 的 sn-p 注入到页面中在当前选定帧的上下文中执行。被执行的假定脚本是同步的，并且评估的结果脚本返回给客户端。

和

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 坐标对于页面上的元素。

希望对您有所帮助。

【讨论】：

【解决方案4】：

你可以用executedocument.querySelector({{ACTUAL_SELECTOR}}).scrollIntoView();执行这个javascript

【讨论】：

scrollIntoView() 兼容所有主流浏览器。 developer.mozilla.org/en-US/docs/Web/API/Element/…

【解决方案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;
    }

【讨论】：