Selenium WebDriver+JavaScript登录测试遇NoSuchElementError求助

问题场景 #

使用Selenium WebDriver结合JavaScript测试OrangeHRM登录流程，目标是登录成功后控制台输出SUCCESSFUL，但运行node myfilename.js时触发NoSuchElementError，无法定位name="username"的元素。

原代码：

const {Builder, By, Key} = require("selenium-webdriver");

require("chromedriver");

async function test() {
  const driver = await new Builder().forBrowser("chrome").build();
  await driver.get("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");
  await driver.findElement(By.name("username")).sendKeys("Admin"); 
  await driver.findElement(By.name("password")).sendKeys("admin123"); 
  await driver.findElement(By.className("oxd-button oxd-button--medium oxd-button--main orangehrm-login-button")).click();
  const currentUrl = await driver.getCurrentUrl();
  if (currentUrl === "https://opensource-demo.orangehrmlive.com/web/index.php/dashboard/index") {
  console.log("SUCCESSFUL");
} else {
  console.log("ERROR");
 }
}
test();

报错信息：

/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/error.js:521
    let err = new ctor(data.message)
              ^

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"*[name="username"]"}
  (Session info: chrome=122.0.6261.94)
    at Object.throwDecodedError (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/error.js:521:15)
    at parseHttpResponse (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/http.js:510:13)
    at Executor.execute (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/http.js:443:28)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Driver.execute (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:740:17)
    at async toWireValue (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:146:15)
    at async /home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:192:16
    at async forEachKey (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:186:9)
    at async convertKeys (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:191:3)
    at async Driver.execute (/home/metalhead/Desktop/testJs/node_modules/selenium-webdriver/lib/webdriver.js:738:22) {
  remoteStacktrace: '#0 0x560c89955e93 <unknown>\n' +
    '#1 0x560c8964dce6 <unknown>\n' +
    '#2 0x560c89698e48 <unknown>\n' +
    '#3 0x560c89698f01 <unknown>\n' +
    '#4 0x560c896dc3f4 <unknown>\n' +
    '#5 0x560c896baedd <unknown>\n' +
    '#6 0x560c896d9899 <unknown>\n' +
    '#7 0x560c896bac53 <unknown>\n' +
    '#8 0x560c8968bdb3 <unknown>\n' +
    '#9 0x560c8968c77e <unknown>\n' +
    '#10 0x560c8991b7cb <unknown>\n' +
    '#11 0x560c8991f7e5 <unknown>\n' +
    '#12 0x560c899090e1 <unknown>\n' +
    '#13 0x560c89920372 <unknown>\n' +
    '#14 0x560c898ed1bf <unknown>\n' +
    '#15 0x560c89944488 <unknown>\n' +
    '#16 0x560c89944683 <unknown>\n' +
    '#17 0x560c89955044 <unknown>\n' +
    '#18 0x7f4922294ac3 <unknown>\n'
}

错误原因 #

1. 页面未完全加载就定位元素：OrangeHRM登录页面是动态渲染的，driver.get()仅保证页面框架加载完成，内部表单元素可能还未渲染，直接调用findElement会找不到元素。
2. 多类名定位方式错误：By.className仅支持单个类名，传入多个空格分隔的类名会导致定位失败，需改用CSS选择器。

修复后的代码 #

const {Builder, By, Key, until} = require("selenium-webdriver");

require("chromedriver");

async function test() {
  const driver = await new Builder().forBrowser("chrome").build();
  try {
    await driver.get("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");
    
    // 显式等待用户名输入框出现，最多等待10秒
    const usernameInput = await driver.wait(until.elementLocated(By.name("username")), 10000);
    await usernameInput.sendKeys("Admin");
    
    // 显式等待密码输入框出现
    const passwordInput = await driver.wait(until.elementLocated(By.name("password")), 10000);
    await passwordInput.sendKeys("admin123");
    
    // 用CSS选择器定位登录按钮（支持多类名）
    const loginBtn = await driver.wait(until.elementLocated(By.css(".oxd-button.oxd-button--medium.oxd-button--main.orangehrm-login-button")), 10000);
    await loginBtn.click();
    
    // 等待跳转至仪表盘页面，验证登录成功
    await driver.wait(until.urlIs("https://opensource-demo.orangehrmlive.com/web/index.php/dashboard/index"), 10000);
    console.log("SUCCESSFUL");
  } catch (err) {
    console.log("ERROR", err.message);
  } finally {
    // 关闭浏览器
    await driver.quit();
  }
}
test();

关键修复点说明 #

• 显式等待：使用driver.wait(until.elementLocated(...), 超时时间)替代直接findElement，确保元素渲染完成后再操作，避免因动态加载导致的定位失败。
• 按钮定位修正：将By.className改为By.css，用.连接多个类名，符合CSS选择器语法，正确定位多类名元素。
• URL验证优化：用until.urlIs()等待目标URL加载完成，比直接获取当前URL更可靠，避免页面跳转未完成时的判断误差。
• 异常处理与资源清理：添加try/catch捕获异常，finally块中调用driver.quit()确保浏览器进程关闭，避免资源残留。

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