Cypress无法识别按placeholder属性定位的元素且报语法错误

问题原因 #

• CSS选择器语法不支持反引号作为属性值的包裹符号，你在cy.get()的选择器参数里混用了JS模板字符串的反引号和CSS选择器规则，导致选择器解析失败。
• 目标placeholder值包含单引号'，如果没有正确处理引号嵌套的转义逻辑，也会导致选择器语法被截断报错。

解决方案 #

以下几种写法均可正常定位元素：

1. 选择器整体用反引号包裹，内层属性值用双引号包裹，避免引号冲突：

cy.get(`input[placeholder="What's this article about?"]`).type("<3");

2. 选择器外层用单引号，内层属性值用双引号同时转义内容里的单引号：

cy.get('input[placeholder="What\'s this article about?"]').type("<3");

3. 用Cypress内置方法过滤元素，可读性更高：

// 基于属性匹配过滤
cy.get('input').filter('[placeholder="What\'s this article about?"]').type("<3");

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