Playwright中如何定位含动态值的元素并实现交互？

核心思路 #

利用CSS选择器的模糊匹配特性，忽略动态变化的中间值，通过匹配元素属性的固定前缀/后缀来定位目标元素。

具体实现方案 #

方案1：通过ID属性的前缀+后缀匹配 #

针对ID格式ship_0_动态值_address，用^=匹配前缀、$=匹配后缀，精准定位索引为0的目标select：

// 定位索引为0的select（对应ship[0]）
await page.locator('select[id^="ship_0_"][id$="_address"]').selectOption('24553');

// 定位索引为1的select（对应ship[1]），修改前缀即可
await page.locator('select[id^="ship_1_"][id$="_address"]').selectOption('24553');

方案2：通过Name属性的结构匹配 #

Name属性格式为ship[0][动态值][address]，同样用前缀+后缀匹配，这种方式比ID更稳定（部分场景下ID生成规则可能更复杂）：

// 定位索引为0的select
await page.locator('select[name^="ship[0]["][name$="][address]"]').selectOption('24553');

// 定位索引为1的select
await page.locator('select[name^="ship[1]["][name$="][address]"]').selectOption('24553');

方案3：批量处理所有同类Select元素 #

如果需要一次性处理页面上所有ship[*][动态值][address]格式的select，可以用通用选择器结合索引遍历：

// 获取所有符合规则的select元素
const selectElements = page.locator('select[name^="ship["][name$="][address]"]');

// 遍历处理每个元素，比如给第一个选24553，第二个选其他值
await selectElements.nth(0).selectOption('24553');
await selectElements.nth(1).selectOption('其他选项值');

补充说明 #

• 若页面中存在其他结构类似的非目标元素，可以增加额外筛选条件（比如结合标签名select已做限定，若后续有可用class也可补充）。
• Playwright的locator支持链式筛选，也可结合文本、其他属性进一步缩小范围。

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