如何用Selenium WebDriver循环实现登录密码验证流程？

我是自动化测试新手，需要测试正确用户名与密码的输入流程，使用Selenium WebDriver。不使用循环的实现过程冗长繁琐，示例代码如下：

let element0 = driver.findElement(By.id("login"));   
element0.click();   
element0.sendKeys("admin");
await driver.sleep(1500);
element0.clear();

我需要实现循环逻辑，从账号密码数组中依次取出元素，填入登录、密码框，完成验证后清除内容等操作。尝试使用for循环时，出现一次性输出数组所有元素的问题，当前代码如下：

async function fillLoginPassBox() {
  let element0 = driver.findElement(By.id("login"));
  let element1 = driver.findElement(By.xpath('//*[@id="password"]'));
  let logins = ['test0', 'test1', 'admin'];
  let passwords = ['test0', 'test1', 'admin'];       

    for(let key in logins) {
      element0.sendKeys(logins[key]);
      element0.click();
      element0.clear();
      console.log(logins[key]);
    }
   // element0.click();
   // element0.sendKeys("admin");  
      await driver.sleep(1500);                                         
      element1.click();
      element1.sendKeys("admin");
      await driver.sleep(1500);
      return element1, element0;
}

问题分析 #

1. 异步操作未等待：Selenium的API大多是异步的，循环里直接调用sendKeys、click却没加await，导致所有操作被批量执行，出现一次性输出所有元素的情况。
2. 密码逻辑未关联循环：密码输入代码在循环外部，没有和对应的用户名配对，无法完成完整的单组账号密码测试。
3. 数组遍历方式不合适：for...in遍历数组可能会拿到数组的非索引属性，更适合遍历对象，数组遍历优先用for...of或普通for循环。
4. return语句错误：return element1, element0是错误写法，JS逗号运算符只会返回最后一个值，应该用对象返回多个元素。

修正后的代码 #

async function fillLoginPassBox() {
  // 用await等待元素加载完成，确保获取到可用元素
  const loginElement = await driver.findElement(By.id("login"));
  const passwordElement = await driver.findElement(By.xpath('//*[@id="password"]'));
  
  // 将账号密码配对成对象数组，避免索引对应错误
  const credentials = [
    { login: 'test0', password: 'test0' },
    { login: 'test1', password: 'test1' },
    { login: 'admin', password: 'admin' }
  ];       

  // 用for...of遍历，确保每一组账号密码的操作完成后再执行下一组
  for (const cred of credentials) {
    // 输入用户名
    await loginElement.click();
    await loginElement.sendKeys(cred.login);
    console.log(`已输入用户名: ${cred.login}`);
    await driver.sleep(1000); // 等待输入状态稳定

    // 输入密码
    await passwordElement.click();
    await passwordElement.sendKeys(cred.password);
    console.log(`已输入密码: ${cred.password}`);
    await driver.sleep(1000);

    // 这里可以添加登录验证逻辑，比如点击登录按钮、检查页面跳转或提示
    // const loginBtn = await driver.findElement(By.id("submit-btn"));
    // await loginBtn.click();
    // await driver.sleep(2000);
    // 验证步骤：比如检查是否出现欢迎信息或错误提示

    // 清除输入框，准备下一组测试
    await loginElement.clear();
    await passwordElement.clear();
    await driver.sleep(500);
  }

  // 用对象返回元素，保证返回正确
  return { loginElement, passwordElement };
}

额外优化建议 #

• 替换sleep为显式等待：driver.sleep是固定等待，不够灵活，推荐用WebDriverWait等待元素状态，比如等待元素可点击、可见，提升代码稳定性：

  const { WebDriverWait, until } = require('selenium-webdriver');
  const wait = new WebDriverWait(driver, 10); // 最长等待10秒
  
  // 等待用户名输入框可点击
  await wait.until(until.elementIsEnabled(loginElement));
  

• 添加错误捕获：可以给异步操作加try...catch，捕获测试过程中的异常，方便排查问题：

  try {
    await loginElement.sendKeys(cred.login);
  } catch (err) {
    console.error(`输入用户名${cred.login}失败:`, err);
  }
  

内容的提问来源于stack exchange，提问作者serbox