cypress: css селектор для выбора якоря по тексту

Question

Я начинаю играть с 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>

После этой страницы Я уже пробовал с этим:

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

Но, похоже, ни один из них не работает. Есть идеи?

Answer 1

cy.contains() также может принимать два аргумента:

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

Получает первый a элемент, содержащий текст Alta

Answer 2

Есть эта популярная библиотека> cypress-testing-library

Это позволяет легко получить селекторы по тексту, заголовку, значению, альтернативному тексту и т. Д.

Для вашей проблемы вы можете просто использовать метод getByText из этой библиотеки: cy.getByText('Agregar').click()

Answer 3

Другой способ, вы, вероятно, можете углубиться до тега <a> с помощью parent() и find() метода в кипарисе;

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

Answer 4

Это похоже на работу, пришлось использовать cy.get вместо содержит

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