Playwright定位元素后填充超时：TimeoutError问题如何修复？

问题重现 #

HTML结构 #

<sp-textfield id="library-name-textfield" data-testid="library-name-textfield" quiet="" placeholder="Name" dir="ltr" type="text" focusable="">
     #shadow-root
       <input class="input" type="text" aria-describedby="sp-help-text" aria-label="Yourname" placeholder="Your name">
</sp-textfield>

Playwright测试代码 #

// 定位器定义
inputBrandLibNameTxtBox = () => this.page.getByTestId("library-name-textfield").locator("input");

// 测试操作
await this.inputBrandLibNameTxtBox().waitFor({ state: "visible", timeout: 20000 });
await this.inputBrandLibNameTxtBox().fill(brandName);

错误信息 #

TimeoutError: locator.fill: Timeout 20000ms exceeded.
Call log:

• waiting for getByTestId('library-name-textfield').locator('input')
• locator resolved to
• fill("new-brand--1733244070919")
• attempting fill action
• waiting for element to be visible, enabled and editable

解决方法 #

1. 正确穿透Shadow DOM定位 #

Playwright默认不会自动穿透Shadow DOM，需显式使用shadowLocator或CSS伪类定位Shadow内元素：

// 方法一：使用shadowLocator
inputBrandLibNameTxtBox = () => this.page.getByTestId("library-name-textfield").shadowLocator("input");

// 方法二：使用CSS选择器穿透Shadow DOM
inputBrandLibNameTxtBox = () => this.page.locator('[data-testid="library-name-textfield"] ::-webkit-shadow-root .input');

2. 等待元素进入可编辑状态 #

元素可见但可能未完成初始化，直接等待可编辑状态替代可见状态：

const input = this.page.getByTestId("library-name-textfield").shadowLocator("input");
await input.waitFor({ state: "editable", timeout: 20000 });
await input.fill(brandName);

3. 强制填充（绕过状态校验） #

若确认元素正常但Playwright误判状态，添加force: true参数强制执行填充：

await this.inputBrandLibNameTxtBox().fill(brandName, { force: true });

4. 模拟用户聚焦后输入 #

通过聚焦+逐字符输入的方式替代fill，更贴近真实用户操作：

const input = this.page.getByTestId("library-name-textfield").shadowLocator("input");
await input.focus();
await input.type(brandName);

5. 移除限制属性（测试场景专用） #

若输入框被设置disabled或readonly，可先通过JS移除这些属性再填充：

await this.page.evaluate(() => {
  const host = document.querySelector('[data-testid="library-name-textfield"]');
  const input = host.shadowRoot.querySelector('.input');
  input.removeAttribute('disabled');
  input.removeAttribute('readonly');
});
await this.inputBrandLibNameTxtBox().fill(brandName);

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