Javascript 如何使用Nightwatch滚动到元素？

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

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

元素位于页面顶部，但testrunner在页面上向下滚动了一点，在屏幕截图中不可见。 如果需要，如何滚动到此元素？或者：如何测试此元素？

请记住：

.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

  的元素位于页面顶部，则只需通过

  0

  更改

  x

  和

  y

  （以确保滚动到页面顶部）

• 如果需要获得

  x

  和

  y

  的精确值，可以使用：

  getLocationInView（）

  ，如下所示：

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

  module.exports={
  “您的测试”：功能（浏览器）{
  浏览器
  .url（“http://example.com")
  .waitForElementPresent（'body'，2000，“确保页面已加载”）
  .getLocationInView（“#myElement”，函数（结果）{
  //x值将为：result.value.x
  //y值将为：result.value.y
  });
  }
  }

  .getLocationInView（）：确定元素在屏幕上的位置 一旦它被滚动到视图中。。。 返回X和Y坐标 对于页面上的元素

---

希望这能对您有所帮助。

在nightwatch中有一个本地方法可以让元素进入视图。（通常情况下，元素应始终从nightwatch/selenium滚动到视图中。但是，如果您想手动进行此操作，可以使用：

Nightwatch还支持通过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->元素滚动到页面顶部

---

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

您可以使用

execute

document.querySelector（{ACTUAL\u SELECTOR}}}）.scrollIntoView（）；

执行此javascript。您可以使用

简单地像这样使用它

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

---

此外，我还使用了一个示例作为页面对象命令（be_expand），其中我的选择器是元素（@be_click）中已经使用的xpath：

---

scrollIntoView（）

在所有主要浏览器中都兼容。感谢您的输入，请注意本机方法是@MikeDavlantes。我试图扩展我的描述，希望我记得如何在夜视中正确使用它：“如果元素在折叠下面，它会“滚动”吗？”将这些元素移动到可视区域的屏幕？moveToElement在Firefox中不起作用。这是一个已知的问题。

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