Webdriver IO使用CSS选择器#password-inp无法定位元素问题

错误根因分析 #

核心有三个常见触发原因：

• 页面加载未完成就执行元素查找：browser.url()是异步操作，未加等待逻辑时，页面还没渲染完登录表单，WDIO就已经触发元素查找，自然无法定位到目标元素。
• 未适配WDIO异步模式：WDIO v7及以上版本默认采用异步模式，所有浏览器操作、元素操作都需要加await关键字才能按顺序执行，你当前的同步写法会跳过等待直接执行下一行逻辑，导致元素还没渲染就触发查找。
• 选择器语法错误：你原有断言步骤的$('#.ng-star-inserted')不符合CSS选择器规范，#是ID选择器标识，不能直接拼接类选择器的.符号。

修复方案 #

1. 统一异步写法，补充元素等待逻辑 #

Given(/^I am on the login page$/, async function () {
    await browser.url('https://secure-sandbox.modulrfinance.com/')
    await browser.maximizeWindow()
    // 等待登录容器加载完成，再执行后续操作，可替换为你页面登录区域的实际容器选择器
    await $('#login-container').waitForExist({ timeout: 10000 })
});

When(/^I enter password as "([^"]*)"$/, async function (password:string) {
    const txt_username = await $('#username-inp')
    const txt_password = await $('#password-inp')
    // 操作前先确认元素处于可交互状态
    await txt_username.waitForEnabled({ timeout: 5000 })
    await txt_password.waitForEnabled({ timeout: 5000 })
    await txt_username.setValue('')
    await txt_password.setValue(password)
});

Then(/^I should see a flash message under username saying "([^"]*)"$/, async function (expectedText) {
    // 修复选择器语法错误，去掉多余的#标识
    const banner = await $('.ng-star-inserted')
    await banner.waitForDisplayed({ timeout: 5000 })
    await expect(banner).toHaveText(expectedText)
});

2. Shadow DOM场景补充处理 #

如果目标站点用Shadow DOM封装了登录组件，普通CSS选择器无法穿透查找内部元素，需要按以下方式定位：

// 先定位Shadow宿主元素，替换为你页面实际的Shadow宿主选择器
const shadowHost = await $('app-login-form')
const shadowRoot = await shadowHost.shadow$()
// 穿透Shadow DOM查找内部密码输入框
const txt_password = await shadowRoot.$('#password-inp')

内容的提问来源于stack exchange，提问作者Goverdhan Reddy Thati Laxmanna