Блог

Главная - Вопросы по программированию - cypress: css-селектор для выбора привязки по тексту

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

#css #css-selectors #cypress

#css #css-селекторы #cypress

Вопрос:

Я начинаю играть с cypress, и мне нужно выбрать ссылку, подобную этой:

 <table cellSpacing="0" cellPadding="0" width="100%" border="0" class="ToolBarBkg">
  <tbody>
    <tr>
      <td class="ContentLeftLinks" align="right" width="98%" height="40" nowrap>
        amp;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>
        amp;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$") ')

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

Ответ №1:

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

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

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

Ответ №2:

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

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

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

Ответ №3:

Кажется, это работает, пришлось использовать cy.get вместо contains

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

Ответ №4:

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

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