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

Question

我有一个页面，其中的元素在您向下滚动时变得可见。我正在尝试执行测试以确保在滚动到元素底部之前元素不存在，但我似乎无法弄清楚如何将大小从一次调用 (elementIdSize()) 传递给下一次调用的滚动偏移量 (scroll())。诚然，我的大脑还没有通过简单的调用链来理解“承诺”的概念。

我尝试过这样的事情：

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 永远不会从@987654328 中设置@调用，我要回来的对象似乎并不是我想要得到的。我觉得这是我在这里缺少的一些简单知识，它将使所有这些“点击”。

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

Answer 1

请务必了解，一旦执行链，所有参数都会得到解析。这意味着一旦您基本上执行了第一个命令，您就不能再更改它们了。在您的示例中，您在 promise 回调中设置元素变量的值。在你这样做的时候，elementIdSize 已经读取了元素变量（并且可能抛出了一个错误）。

解决这个问题的正确方法是执行带有参数的命令，这些参数稍后会在 then 或 finish 例程中得到解决。您还可以使用操作命令而不是原始协议命令将命令保存在 WebdriverIO 中。所以只需使用getSize，而不是先调用element，再调用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，它允许同步执行命令，所以不再有 Promise 头痛 ;-)）