如何使用 Nightwatch.js 滚动到页面底部

Question

我正在使用 Nightwatch.js 对我的 Vue.js 应用程序执行端到端测试。我的应用程序包含长表单，其中 "hides" 在执行测试时视图外的按钮。我调查了很多建议使用 getLocationInView 的问题，但是 documentation 清楚地说

Determine an element's location on the screen once it has been scrolled into view

我尝试使用

browser
  .url("http://localhost:8080")
  .setValue("@email", "valid4@mail.ca")
  .getLocationInView("#myElement")
  .submit()    //defined elsewhere
  .waitForElementVisible("#error", 3000);

这个片段应该点击表单底部的一个按钮，这就是 submit() 所做的，但是当我得到错误截图时发现没有发生任何向下滚动，导致按钮远离焦点，因此无法点击！

有没有办法最终滚动到页面底部，这样我就可以通过测试而无需更改或至少对我的原始代码进行最少的更改？

Answer 1

而不是使用 submit，而是使用 elementIdClick。

文档说此方法会将元素滚动到视图中。这将单击按钮以提交表单，而不是在不与按钮交互的情况下尝试提交表单。

这似乎是一种更 'authentic' 的测试方式，因为用户无论如何都会单击表单按钮上的按钮。否则如您所知，测试将一直失败，因为按钮不在视图中。

编辑：

也看看这个答案：

Answer 2

单击按钮需要先滚动到该按钮才能将其显示在屏幕上，但显然 setValue 会自行滚动。所以我没有滚动然后单击，而是以这种方式设置按钮的值：

browser
.url("http://localhost:8080")
.setValue("@email", "valid4@mail.ca")
.setValue("@submitButton", " ")  //<---this line
.waitForElementVisible("#error", 3000)

这就像将焦点设置到元素（按钮）然后点击 space 栏。

这当然不是最好的方法，但我认为如果您的表单没有 space 并且输入 restricted from submitting/triggering 按钮，这可能是一个有用的解决方法。

如何使用 Nightwatch.js 滚动到页面底部

How to scroll to the bottom of the page with Nightwatch.js

javascript

nightwatch.js

vue.js