使用 Webdriver.io 移动到元素的底部

Question

我有一个页面，其中的元素在您向下滚动时可见。我正在尝试执行一项测试以确保在滚动到元素底部之前元素不存在，但我似乎无法弄清楚如何通过一次调用传递大小 (elementIdSize())到下一次调用的滚动偏移量 (scroll())。不可否认，我的大脑还没有得到 "promises" 过去简单调用链的概念。

我试过这样的事情：

this.browser
    .setViewportSize({width: 1000, height: 600})
    .element(selector)
    .then(function(e) { 
        console.log('then element: ', e);
        element = e; 
    })
    .elementIdSize(element.id)
    .then(function(size) {
        console.log('Size: ', size);
    })
    .call(callback);

我希望使用传入的选择器获取元素，在 then() 中设置元素，然后在元素的 ID 上调用 elementIdSize()，但是 var element 永远不会从 element() 调用中设置，而且我要返回的对象似乎并不是我想要得到的对象。我觉得这是我在这里缺少的一些简单的知识，它将使所有这些 "click".

我正在使用 API here 来查找 Webdriver 调用，但文档没有提供太多细节。

Answer 1

了解执行链后所有参数都将得到解析很重要。这意味着一旦你基本上执行了第一个命令，你就不能再改变它们了。在您的示例中，您在 promise 回调中设置了元素变量的值。在您执行此操作时，elementIdSize 已经读取了元素变量（并且可能引发了错误）。

正确的方法是执行带有参数的命令，这些参数稍后在 then 或 finish 例程中解析。您还可以使用操作命令而不是原始协议命令将命令保存在 WebdriverIO 中。所以只需使用 getSize 而不是先调用元素，然后再调用 elementIdSize。这就是 getSize 的工作 ;-)

我不确定你到底想做什么，但下面是应该可以解决问题的代码：

this.browser
    .setViewportSize({width: 1000, height: 600})
    .getElementSize(selector).then(function(size) { 
        console.log('size of element "' + selector + " is', size);
        // now as we have the size execute the scroll in a then callback
        return this.scroll(0, 600 + size.height);
    })
    // this get executed once we we did the scrolling since
    // the getSize promise is only then fulfilled once the promise
    // within the then function is resolved
    .isVisible(otherElem).should.be.eventually.be(true, 'element was visible after scrolling')
    .call(callback);

（附带说明：我们已经在开发 WebdriverIO v4，它将允许同步执行命令，因此不再有令人头疼的承诺；-））

使用 Webdriver.io 移动到元素的底部

Moving to the bottom of an element with Webdriver.io

meteor

cucumber

webdriver-io

meteor-cucumber