Puppeteer基于部分ARIA标签定位文本输入框的技术问题

因为你的应用符合WCAG2.0标准，标签与输入框必然存在合法关联（如for属性绑定、嵌套结构、aria-labelledby关联），结合Playwright的定位能力，可通过以下几种通用方式实现部分标签文本定位输入框：

方法1：利用filter筛选关联输入框 #

这是最通用的方案，无需关心具体关联方式，直接筛选出带有指定部分文本标签的输入框：

const partialLabel = "First"; // 你的部分标签文本
const inputBox = page.locator('::-p-aria([role="textbox"])').filter({
  has: page.locator(`::-p-text("${partialLabel}")`)
});
// 执行输入操作
await inputBox.fill("目标内容");

方法2：基于for属性关联定位（适用于标签通过for绑定输入框ID的场景） #

先定位包含部分文本的标签，再通过其for属性值找到对应输入框：

const partialLabel = "First";
const labelElement = page.locator(`::-p-text("${partialLabel}")`);
const targetInputId = await labelElement.getAttribute("for");
const inputBox = page.locator(`#${targetInputId}`);
await inputBox.fill("目标内容");

方法3：嵌套结构定位（适用于标签直接包裹输入框的场景） #

如果标签是输入框的父元素，可直接通过嵌套定位：

const partialLabel = "First";
const inputBox = page.locator(`::-p-text("${partialLabel}") ::-p-aria([role="textbox"])`);
await inputBox.fill("目标内容");

方法4：基于aria-labelledby关联定位（适用于ARIA属性绑定的场景） #

若输入框通过aria-labelledby关联标签ID，可按以下方式定位：

const partialLabel = "First";
const labelElement = page.locator(`::-p-text("${partialLabel}")`);
const labelId = await labelElement.getAttribute("id");
const inputBox = page.locator(`::-p-aria([aria-labelledby*="${labelId}"])`);
await inputBox.fill("目标内容");

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