Cypress итерации строк таблицы получить указанный элемент c в ячейках

Question

Я пытаюсь перебрать строки таблицы и получить каждую строку, которая содержит заданное значение c, но у меня это не работает. Я использую .each() для итерации строк и .within() для каждого $el, внутри которого я использую cy.get('td').eq(1).contains('hello'), но я получаю ошибку подтверждения:

Повторная попытка по времени: ожидается чтобы найти содержимое: 'hello' внутри элемента: <td>, но никогда не делал.

, когда я console.log cy.get('td').eq(1), он выдает нужную ячейку в каждой строке и тест проходит, поэтому я не понимаю, почему цепочка .contains() не работает ...

it('get element in table', () => {
  cy.visit('http://localhost:3000/');
  cy.get('tbody tr').each(($el) => {
    cy.wrap($el).within(() => {
      cy.get('td').eq(1).contains('hello') // contains() doesn't work
    })
  })
});

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>hello</td>
      <td>$80</td>
    </tr>
     <tr>
      <td>$10</td>
      <td>hello</td>
    </tr>
  </tbody>
</table>

Answer 1

should('have.text', text) должно работать

cy.get('td').eq(1).should('have.text', 'hello')

Если вокруг текста есть пробелы, используйте contain.text

cy.get('td').eq(1).should('contain.text', 'hello')

Answer 2

Простой ответ: не:)

Чтобы быть более точным c используйте взамен html выбор атрибута. Соглашение должно иметь атрибут с именем data-cy. Кроме того, я обнаружил, что удобно выбирать data-cy-identifier для выбора определенных c строк. Поскольку я не уверен, что вы пытаетесь сделать с вашим кодом, я буду использовать похожий пример, который, как мы надеемся, поможет вам:

<table data-cy="expences">
    <tr>
        <td data-cy="month">January</td>
        <td data-cy="price">$100</td>
    </tr>

    <tr data-cy="discounted">
        <td data-cy="month">Feburary</td>
        <td data-cy="price">$80</td>
    </tr>

    <tr data-cy="discounted">
        <td data-cy="month">March</td>
        <td data-cy="price">$10</td>
    </tr>
</table>

Вы, конечно, можете делать все виды комбинаций этого, но теперь вы можете сделать более точные c и полезные выборы, такие как:

cy.get('[data-cy="expenses"]').find('[data-cy="discounted"]').find('[data-cy="price"]').should(...)

и аналогичные. Это гибкий подход, поскольку он отражает структуру ваших данных, а не презентацию, поэтому вы можете изменить это на список или еще что-нибудь позже. Он избегает выбора изменчивых вещей, поэтому он также более надежен. Он также использует иерархию, а не чрезмерно специфицированные c селекторы.

Идея добавления таких вещей, как data-cy-identifier, позволяет вам делать выборки по идентификатору (вы можете распространять ее, используя javascript, angular, vue или что вы используете), а затем проверяете такие вещи, как содержимое строки с логически связанными элементами.

Надеюсь, это поможет вам. Также я могу рекомендовать читать: https://docs.cypress.io/guides/references/best-practices.html