在Cypress中定位元素时使用的#符号的含义及用法是什么

你在Cypress选择器里用到的#属于标准CSS选择器的语法规则，不是Cypress独有的标识，具体用法如下：

• 核心含义：#是CSS的ID选择器标记，后面紧跟的字符串对应页面DOM元素的id属性值，用于快速匹配带有指定ID的元素
  举个例子，如果页面存在元素<input id="account" type="text">，在Cypress中写cy.get('#account')就可以直接定位到这个输入框。
• 正确使用规则
  • 单个HTML页面中ID属性默认是唯一的，所以用#定位元素的效率远高于类选择器、标签选择器等其他CSS选择器，优先度最高
  • 如果ID包含特殊字符（比如.、/、空格等），需要对特殊字符做转义，例如ID为user.name时，写法为cy.get('#user\\.name')
  • 不要使用动态生成的ID做定位（比如页面每次加载都会变化后缀的btn-73921这类ID），会导致用例运行不稳定
• 常用示例

  // 定位ID为password的输入框，输入测试密码
  cy.get('#password').type('test123456')
  // 定位ID为submit的按钮，触发点击操作
  cy.get('#submit').click()
  

相关的基础规则可以参考CSS选择器标准文档，Cypress原生支持所有标准CSS选择器语法，无需额外适配。

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