如何使用Nightwatch滚动到元素？

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

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坐标.

希望这对你有所帮助.