Question

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

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

元素位于页面顶部，但testrunner在页面上向下滚动了一下，在屏幕截图中看不到。如果需要滚动到此元素，我该怎么办？或者：我如何测试这个元素？

Answer 1

夜视中有一种原生方法可以将元素放入视图中。（一般情况下，元素应始终从夜视/硒中滚动到视图中。但如果您想手动执行此操作，可以使用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 - ＆gt;元素滚动到页面顶部

elementScrollBavior 1 - ＆gt;元素滚动到页面底部

Answer 2

请记住：

.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 3

您可以使用moveToElement()

只需像这样使用它

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

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;
    }

如何使用Nightwatch滚动到元素？

5 个答案: