如何选择含可变属性的data-cy定位器？动态文档菜单场景

核心思路就是把文件名和固定的-dropdown后缀做字符串拼接，不同测试工具里的具体写法如下：

Cypress 场景 #

直接用模板字符串生成完整的data-cy选择器，也可以封装成复用函数：

// 单个使用示例
const fileName = "PDF file # 1939";
const dropDownLocator = `[data-cy="${fileName}-dropdown"]`;

// 点击菜单按钮
cy.get(dropDownLocator).click();

// 封装成复用函数，方便多处调用
function getDocDropdown(fileName) {
  return `[data-cy="${fileName}-dropdown"]`;
}

// 调用示例
cy.get(getDocDropdown("PDF file # 1939")).click();

其他测试框架（比如 Playwright） #

逻辑完全一致，只是定位器的调用方式不同：

const fileName = "PDF file # 1939";
const dropDownLocator = `[data-cy="${fileName}-dropdown"]`;

await page.locator(dropDownLocator).click();

注意点 #

• 文件名要和页面上data-cy的前缀完全匹配，包括空格、大小写、特殊符号（比如示例里的#），不然会定位失败。
• 用模板字符串包裹属性值时，文件名里的特殊字符不需要额外转义，CSS选择器会正确识别带引号的属性值。

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