时间戳

首页 > 解决方案 > 使用带有嵌入撇号的“包含”的赛普拉斯问题

html - 使用带有嵌入撇号的“包含”的赛普拉斯问题

问题描述

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

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

这是我的赛普拉斯 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>

标签： htmljquery-selectorscypress

解决方案

让我们保持简单并且应该可以工作：

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

赛普拉斯足够聪明地处理这个问题。更多信息：链接

推荐阅读