Почему Cypress не находит мой элемент H1?

Question

У меня есть несколько сквозных тестов для веб-сайта, реализованных в Javascript с использованием Cypress.io v3.2.0.Один из моих шагов теста реализован следующим образом:

cy.get('h1#feed_header_id').contains('אביזרי');  //('אביזרי' is in Hebrew)

Когда я запускаю тест в графическом интерфейсе Cypress, он завершается ошибкой на шаге CONTAINS.Но когда я нажимаю на шаг CONTAINS в журнале, на снимке четко отображается элемент H1 с текстом «אביזרי».

Снимок экрана:

Обратите внимание: элемент: <h1 id="feed_header_id">אביזרי רכב</h1> и является единственным элементом с таким идентификатором на странице.

Почему Cypress не может найти текст в элементе, когда элемент и текстхорошо видны?

Answer 1

Я сильно подозреваю, что вина лежит на инструменте тестирования.

У некоторых инструментов тестирования есть проблемы с языками RTL, и они меняют порядок букв.Хуже того, если в строке есть латиница, цифра или пунктуация, она также преобразует строку.

Я предлагаю попробовать:

cy.get('h1#feed_header_id').contains('ירזיבא');

Answer 2

Вы можете использовать альтернативную команду «содержащий»,

cy.contains('#feed_header_id', 'אביזרי');

Причина в том, что cy.get(...).contains(...) не ожидает асинхронного содержимого .

Часть get() имеет автоматическую повторную попытку, но селектор идентификатора жестко задан в вашем html, поэтому get() выполняется немедленно (до того, как xhr вернет свое значение), затем элемент проверяется на содержимое (которое изначально пусто).

Приведенный выше альтернативный синтаксис применяет автоматическую повторную попытку как к селектору, так и к содержимому.

Вот быстрый тест, который я использовал, чтобы убедиться, что он не из-за особенностей языка RTL.

Spec - содержит-rtl.js

describe('contains', () => {
  it('waits for content', () => {
    cy.visit('app/hebrew-calendar.html').then(x => console.log('x', x))
    // cy.get('h1#feed_header_id').contains('כ״ט בְּאִיָּר תשע״א');
    cy.contains('h1#feed_header_id', 'כ״ט בְּאִיָּר תשע״א');
  })
})

Пример страницы - hebrew-calendar.html

<h1 id="feed_header_id"></h1>

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.hebcal.com/converter/?cfg=json&gy=2011&gm=6&gd=2&g2h=1', true);

  xhr.onload = function () {
    const hebrewDate = JSON.parse(xhr.response).hebrew;
    const el = document.querySelector('h1#feed_header_id');
    el.textContent = hebrewDate;
  };

  xhr.send(null);
</script>

Answer 3

У вас может быть несколько элементов с одинаковым текстом. Попробуйте cy.get('#feed_header_id').find('h1').contains('אביזרי');