Playwright Python无法通过类选择元素的技术求助

已确认页面完全加载（使用非无头浏览器），但脚本始终无法定位目标输入元素，出现timeout error。尝试过父元素链式定位、占位符、角色、ID以及多CSS类定位等方式均失败。

目标元素代码 #

<input type="text" id="keyword" formcontrolname="companyName" maxlength="35" class="form-control ng-untouched ng-pristine ng-valid" placeholder="Type Company Name">

用户原代码 #

ric = 'ITUB'
user_agent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'
url = 'https://www.b3.com.br/en_us/products-and-services/trading/equities/listed-companies.htm?codigo=19623'

async with async_playwright() as P:
    browser = await P.chromium.launch(channel='chrome', headless=False)
    page: Page = await browser.new_page(user_agent=user_agent)
    await page.goto(url, wait_until='load')
    await page.locator('input[class=form-control ng-untouched ng-pristine ng-valid]').fill(ric)
    await page.get_by_role("button", name="Search").click()
    await page.screenshot(path="screenshot.png")

解决方法 #

你之前的定位失败核心原因是：ng-untouched、ng-pristine这类带ng-前缀的类是Angular动态生成的状态类，会随页面交互（比如输入内容）或加载状态变化，导致定位器无法稳定匹配元素。

正确的多CSS类定位方式 #

1. 筛选稳定类组合

只保留不会变化的基础类（比如form-control），用CSS选择器的.class1.class2语法组合（如果有多个稳定类的话）：

# 仅用稳定的form-control类定位
await page.locator('input.form-control').fill(ric)

如果页面有多个同类型元素，可结合其他稳定属性进一步缩小范围，比如ID（最可靠）：

await page.locator('#keyword').fill(ric)

或结合formcontrolname属性：

await page.locator('input[formcontrolname="companyName"]').fill(ric)

2. 优化等待逻辑

即使页面触发load事件，元素可能仍未完全可交互，可通过以下方式优化：

• 显式等待元素可见/可交互：

  await page.locator('#keyword').wait_for(state='visible')
  await page.locator('#keyword').fill(ric)
  

• 调整page.goto的等待策略，确保页面资源加载充分：

  await page.goto(url, wait_until='networkidle')
  

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