Playwright定位器是否支持动态添加的属性？如何获取动态生成的aria-controls属性值以定位弹窗？

嘿，这个场景我之前做组件自动化测试的时候刚好碰到过，给你详细说下怎么处理～

首先明确回答你第一个问题：Playwright的定位器完全支持定位动态添加的属性！因为Playwright的定位逻辑是实时查询当前DOM状态的，不是一开始就抓静态快照，所以哪怕属性是点击后才动态加上的，也能正常识别到。

接下来是具体怎么获取aria-controls的值来定位弹窗，分几步来：

1. 先定位触发弹窗的按钮
   你可以用按钮的静态属性（比如文本、role、class这些不会变的）来定位它，比如：

   // 示例：按按钮角色和文本定位
   const triggerButton = page.getByRole('button', { name: '打开弹窗' });
   

2. 点击按钮并等待属性生成
   点击按钮后，组件会动态给按钮加上aria-controls属性。虽然Playwright有自动等待机制，但保险起见，你可以显式等待这个属性出现，避免异步加载的问题：

   await triggerButton.click();
   // 等待aria-controls属性被添加
   await triggerButton.waitForAttribute('aria-controls');
   

3. 获取aria-controls的属性值
   用getAttribute方法就能拿到这个属性对应的弹窗ID：

   const popupId = await triggerButton.getAttribute('aria-controls');
   

4. 用ID定位弹窗
   拿到ID后，直接用CSS选择器定位弹窗就行，还可以等待弹窗可见再操作：

   const popup = page.locator(`#${popupId}`);
   // 等待弹窗处于可见状态
   await popup.waitFor({ state: 'visible' });
   // 之后就可以对弹窗做各种操作了，比如输入、点击按钮等
   

额外小技巧 #

如果你觉得分步写太繁琐，也可以把获取ID和定位弹窗合并成一行：

const popup = page.locator(`#${await triggerButton.getAttribute('aria-controls')}`);

另外，如果你用的是Python版本的Playwright，逻辑是完全一样的，只是语法稍有不同：

trigger_button = page.get_by_role("button", name="打开弹窗")
await trigger_button.click()
await trigger_button.wait_for_attribute("aria-controls")
popup_id = await trigger_button.get_attribute("aria-controls")
popup = page.locator(f"#{popup_id}")
await popup.wait_for(state="visible")

备注：内容来源于stack exchange，提问作者cksanjose