Cypress 未找到包含反斜杠的 aria-label 定位器

Question

我正在尝试使用

aria-label

属性获取其中一个复选框，但 Cypress 无法找到它。它的值中有一个反斜杠，我用两个反斜杠替换了它，但 Cypress 仍然找不到它。

它最多定位到“class=checkbox-container checkbox-list-item”定位器，但是当转到特定的

[aria-label="Default\PizzaID-RedOnionsID"]

复选框时，Cypress 说找不到定位器。

尝试通过

cy.get('[aria-label="Default\PizzaID-RedOnionsID"]')

获取它不会产生任何结果。我也试过

cy.get('.checkbox-container.checkbox-list-item').find('[aria-label="Default\PizzaID-RedOnionsID"]')

我可以在 DOM 检查器中看到该元素：

Answer 1

问题在于

\

是一个特殊字符，用于“转义”字符串中的下一个字符。

例如，如果您想在这样的字符串中使用双引号

const myString = "a string containing a double " quote"

你需要添加一个这样的转义字符

const myString = "a string containing a double \" quote"

但是如果你想在字符串中转义字符，如何转义呢？

通常您会添加另一个转义字符，但在您的示例中这也不起作用。您需要将三个转义字符添加到查询选择器

cy.get('[aria-label="Default\\\\PizzaID-RedOnionsID"]') 

---

更传统的方法是选择字符串的部分，绕过转义字符。

如果将

$=

添加到选择器，它只会比较 aria-label 的末尾。

cy.get('[aria-label$="PizzaID-RedOnionsID"]')  

或者你可以把反斜杠切掉

cy.get('[aria-label^="Default"][aria-label$="PizzaID-RedOnionsID"]')