Блог

Главная - Вопросы по программированию - Несогласованный запрос элемента с помощью Cypress

Несогласованный запрос элемента с помощью Cypress

#cypress

Вопрос:

Я пытаюсь использовать Cypress для щелчка react-select по элементу. Однако я получаю очень противоречивые результаты.

введите описание изображения здесь

Мой код для нажатия на элемент выглядит следующим образом:

 cy.get('div[class*=container]').contains('Brand').click()

Иногда это работает, иногда нет. Иногда, если я повторяю эту строку дважды (что довольно банально…), это работает, но в других случаях это не так…

Каков был бы правильный и надежный способ дождаться правильной загрузки этого элемента и только после этого щелкнуть по Cypress нему ?

Комментарии:

1. Можете ли вы поделиться HTML-кодом для этого элемента ?

2. Ну, я использую react-select стандартный способ, просто <Select ...myprops /> ничего особенного. Это div[class*=container] связано с проверкой результата в браузере и некоторыми экспериментами над тем, на что он реагирует click .

Ответ №1:

Я заглянул в это репо cypress, и оно предложило два способа сделать click() это .

 cy.contains('.product', 'First item')
  .find('button.order')
  .click()
  .wait(1000)
 
 cy.contains('.product', 'First item')
  .find('button.order')
  .click()
  .click()

Комментарии:

1. На мгновение я подумал, что .wait() это решает мою проблему, но она снова начала терпеть неудачу… Интересно то, что я вижу, что мой выбор загружен в браузере, но время выполнения теста истекает с ошибкой Timed out retrying after 4000ms: Expected to find content: 'Brand' within the element: [ <div..css-dyr6gj-container>, 2 more... ] but never did. . Так что это похоже на то, что Cypress не может обнаружить, когда браузер обновляется или что-то подобное…

2. как насчет того, чтобы сделать принудительный щелчок click({force: true}) ? Или, может быть, немного увеличить время и проверить.

3. Вы имеете в виду увеличить время ожидания по умолчанию на 4000 мс? Я подозреваю, что это не проблема, так как, как я уже упоминал, я ясно вижу загруженный элемент на экране, но Cypress его не обнаруживает, хотя Cypress часто выполняет действия еще до того, как у меня появляется возможность увидеть отображаемый результат.

4. Нет , я имел в виду в первом случае .wait(1000) это значение. но я тоже не думаю, что это сработает. Как насчет того, чтобы ты попробовал cy.get('div[class*=container]').contains('Brand').eq(0).click() или cy.get('div[class*=container]').contains('Brand').focus().click()

Ответ №2:

Поскольку это элемент выбора, то, что вы хотели бы сделать, это:

 cy.get('div[class*=container]').select('Brand')

или

 cy.get('div[class*=container]').contains('Brand').realClick()

Комментарии:

1. Извините, Эндрю, похоже .select() , это может быть вызвано только для реального собственного <select> html-элемента, которого react-select нет. И .realClick() , похоже, не существует в Кипарисе…

2. Извините за это, у меня сложилось впечатление, что это элемент <select>. realClick() определенно работает в cypress. Я пользуюсь им почти каждый день.

Ответ №3:

Глядя на примеры react-select, в них много классов container , так 'div[class*=container]' что это не лучший селектор.

Я понимаю class*=container , что нужно обойти хэш стиля, который может измениться при компиляции.

В идеале добавьте определенный класс в исходный код, как в первом примере на домашней странице

 <Select
  className="basic-single"
  ...

затем у вас есть ссылка на самый верхний элемент, который доступен для клика.

 cy.visit('https://react-select.com/home')

cy.get('div.basic-single')
  .should('contain', 'Ocean')
  .click()

cy.contains('Green').click()  // option selection

cy.get('div.select__control').eq(0)
  .should('contain', 'Green')
Метки: