cypress：css选择器通过文本选择锚点答案

【问题标题】：cypress: css selector to select an anchor by textcypress：css选择器通过文本选择锚点
【发布时间】：2019-03-16 08:37:40
【问题描述】：

我开始玩cypress，我需要选择这样的链接：

<table cellSpacing="0" cellPadding="0" width="100%" border="0" class="ToolBarBkg">
  <tbody>
    <tr>
      <td class="ContentLeftLinks" align="right" width="98%" height="40" nowrap>
        &nbsp;
        <a href="javascript:FireEvent('Agregar')" style="COLOR: black; font-weight: normal" tabindex="-1">
          <IMG src="/metassc/images/toolbar/AltaOn.gif" align="absmiddle" border=0> Alta
        </a>
        &nbsp;

        <a href="javascript:FireEvent('Eliminar')" style="COLOR: black; font-weight: normal" tabindex="-1">

          <IMG src="/metassc/images/toolbar/BajaOn.gif" align="absmiddle" border=0> Baja
        </a>

在this page 之后，我已经尝试过这些：

cy.contains('a[href~=Agregar]')
cy.contains('a[href*="Agregar"]')
cy.contains('a:contains("^Agregar$") ')
cy.contains('a:contains("^Alta$") ')

但它们似乎都不起作用。有什么想法吗？

【问题讨论】：

标签： css css-selectors cypress

【解决方案1】：

cy.contains() 也可以接受两个参数：

cy.contains('a', 'Alta')

这将获取包含文本Alta 的第一个a 元素

【讨论】：

【解决方案2】：

有这个流行的图书馆> cypress-testing-library

这使得通过文本、标题、值、替代文本等获取选择器变得非常容易。

对于您的问题，您可以简单地使用此库中的 getByText 方法： cy.getByText('Agregar').click()

【讨论】：

【解决方案3】：

这似乎可行，必须使用 cy.get 而不是 contains

cy.get('a[href*="Agregar"]')
  .click()

【讨论】：

【解决方案4】：

另一种方法是，您可以通过 cypress 中的 parent() 和 find() 方法向下钻取到 <a> 标签；

cy.get('a:contains("Agregar")').parents('.ToolBarBkg').find('tbody').find('tr').find('td').find('a').contains("Agregar").click();

【讨论】：