html - Cypress 使用带有嵌入式撇号的 'contains' 时出现问题

标签 html jquery-selectors cypress

我正在使用最新版本的 Cypress (4.11.0)。我无法通过文本选择下拉列表中的条目以单击它。我很确定这是因为嵌入的撇号,因为我对不包含撇号的同类条目没有任何问题。

在带有转义撇号的代码中,我尝试了多种版本的转义。我总是需要使用奇数个反斜杠,否则我会收到语法错误。

这是我的 Cypress JS 代码:

cy.get('li:contains("Dick\'s Sporting Goods")').click({force: true});   // does not find the 'li'
cy.get('li:contains("Dick's Sporting Goods")').click({force: true});   // does not find the 'li'
cy.get('li:contains("Dick\\\'s Sporting Goods")').click({force: true});   // does not find the 'li'
cy.get('li:contains("Dick\\\\\'s Sporting Goods")').click({force: true});   // does not find the 'li'
cy.get('li:contains("Golf Galaxy")').click({force: true});   // finds the 'li'

以下是 Chrome 开发工具生成的 HTML:

<ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1" id="menu-list-grow" style="padding-top: 0px;">
    <li class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="0" role="menuitem" aria-disabled="false"
        style="padding-left: 0px; font-family: Archivo; font-size: 12px; font-weight: bold; background-color: transparent;">
        <img alt="dsg"
             src="..."
             style="margin-right: 10px; width: 40px;">Dick’s Sporting Goods<span class="MuiTouchRipple-root"></span>
    </li>
    <li class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
        tabindex="-1" role="menuitem" aria-disabled="false"
        style="padding-left: 0px; font-family: Archivo; font-size: 12px; font-weight: bold; background-color: transparent;">
        <img alt="gg"
             src="..."
             style="margin-right: 10px; width: 40px;">Golf Galaxy<span class="MuiTouchRipple-root"></span></li>
</ul>

最佳答案

让我们保持简单并且应该有效:

 cy.get('li').contains("Dick's Sporting Goods").click();
 cy.contains("Dick's Sporting Goods").click();

Cypress 足够聪明,可以处理这个问题。更多信息:link

关于html - Cypress 使用带有嵌入式撇号的 'contains' 时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63124211/

相关文章:

javascript - 单击按钮时 jquery 切换 <td>

javascript - 如何将光标放在带有 contenteditable 的 div 标签中的文本末尾

jquery - 突出显示所选页码的有效方法是什么?

用于链接到图像的 jQuery 选择器,可以容忍查询字符串

Cypress 如何从 div 中获取文本并存储在变量中以备后用

javascript - 使用 KineticJS 删除绘制的对象

php - 使用 PHP 和 MySQL 单击产品图像显示产品详细信息

jquery - 如何在 jQuery 中选择一组多个匹配元素中除第一个元素之外的所有元素?

javascript - 如何使用 Cypress 和 @testing-library/cypress 测试复选框切换,

cypress - 重试柏树 cucumber