等待多个元素在 selenium webdriver JavaScript 绑定中可见

Question

JavaScript 的 selenium webdriver 绑定允许通过组合两个等待命令来等待元素可见，如下例所示：

const timeout = 1000;
const locator = webdriver.By.id('test');
driver.wait(webdriver.until.elementLocated(locator, timeout).then(function() {
   that.findElement(locator).then(function(element) {
      driver.wait(webdriver.until.elementIsVisible(element), timeout).then(function() {
         // element is visible!
      });
   });
});

当我们需要等待一组元素一起可见时，是否有更简单的方法以及如何做到这一点？

Answer 1

Promises 的一大优点是您可以保持异步代码线性而不是嵌套（来自延续传递风格的回调地狱）。

Promise 为您提供 return 语句和错误抛出，而您会因延续传递风格而失去这些。

在您的情况下，您需要从您的承诺返回函数中返回承诺，以便您可以链接您的承诺。

示例：Promise.all 接受一个 promise 数组，并在所有 promise 解析后解析，如果有任何一个被拒绝，则该数组被拒绝。

this.waitForElementsToBecomeVisible = function() {
    return Promise.all([
        driver.wait(webdriver.until.elementIsVisible(usernameTextField), 500),
        driver.wait(webdriver.until.elementIsVisible(firstNameTextField), 500),
        driver.wait(webdriver.until.elementIsVisible(lastNameTextField), 500),
        driver.wait(webdriver.until.elementIsVisible(createEmployeeButton), 500)
    ]);
}

然后你可以链接你的承诺。

driver.get('https://website.com/login').then(function () {
    loginPage = new LoginPage(driver);
    return loginPage.login('company.admin', 'password')
}).then(function () {
    employeePage = new EmployeePage(driver);
    return employeePage.clickAddEmployee()
}).then(function () {
    addEmployeeForm = new AddEmployeeForm(driver);
   /**
    *
    * Wait for elements to become visible
    */
    return addEmployeeForm.waitForElementsToBecomeVisible();
}).then(function() {
    return addEmployeeForm.completeForm(employee);
}).then(function() {
    return addEmployeeForm.clickCreateEmployee();
}).then(function() {
    return employeePage.searchEmployee(employee);
});

您可以看到上面的示例没有嵌套并且更易于维护。您返回一个承诺并继续链接而不是嵌套。我希望这对您有所帮助，并且不会让您感到困惑。

Answer 2

简单 - 编写一个通用/全局函数。如果需要改变它，可以将单个或多个 Webdriver 元素作为输入和条件。循环直到元素结束并执行相同的操作 等待每个元素可见。

这就是我在我的职能中经常这样做的方式。在 Ruby 中我会这样做

for each element in [array of elements], Condition
   [Below is same as your code if working well]
   Driver - Element wait until (Condition satisfied)
   element perform function
end

如果您甚至需要处理多个条件，则可以使用 switch case 语句。 如果您只需要执行一次功能，请将功能保留在外面

element perform function