выберите реагировать-выберите опцию выпадающего списка, используя кипарис - PullRequest
Новая
       10

выберите реагировать-выберите опцию выпадающего списка, используя кипарис

2 голосов
/ 07 марта 2019

Кто-нибудь знает, как выбрать опцию из выпадающего списка реагировать-выбора в тесте на кипарис?

Я пробовал много вещей, но безрезультатно.

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

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

Я использую:

  • реагировать-выбрать v2.4.1
  • кипарис v3.1.5

Редактировать 1:

@ bkucera's answerработает.Рабочий код, который я получил, был: 

it('updates Person', () => {
    cy.get('[data-id=bearbeiter]')
      .find('.css-10nd86i')
      .click()
      .find('input')
      .eq(1)
      .focus()
    cy.contains('Test Tester').click({ force: true })
  })

Мне пришлось добавить .eq(1) после find, потому что, кажется, есть два входа.

Редактировать 2:

Вышеупомянутое решение закончилось тем, что я нажал на элементы в дереве навигации на моем сайте, которые, как оказалось, содержали тот же текст.Так что без сигары: - (

Редактировать 3:

Я также пробовал это решение: 

Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input')
    .eq(1)
    .focus()
    .type(value, { force: true })
})

... но даже если используется force: true, я получаюэта ошибка: 

The element typed into was:

  > <input name="aeId" type="hidden" value="862333db-31cf-444c-b8ea-021c640c7a44">

Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements.

Редактировать 4:

Пока это работает лучше всего: 

Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input:text')
    .focus()
    .type(option, { force: true, delay: 600, timeout: 330000 })
    .type('{enter}', { force: true })
  cy.get(selector)
    .find('.css-10nd86i')
    .find('input')
    .eq(1)
    .should('have.value', value)
})

По крайней мере, это работает для коротких списков. Текст вводится медленно.Для нашего списка видов (длиной 7000) я добавил эти опции delay и timeout. Задержка, кажется, помогает, но я не смог точно понять, как эти опции влияют на поведение. И иногда время ожидания кипариса: - (

Редактировать 5:

Между тем (реакция-выбор v3.0.4, cypress v3.3.2) все тесты не пройдены, потому что: 

Expected to find element '.css-10nd86i' but never found it

Я полагаю, класс изменился.такой хрупкий раствор: - (

Ответы [ 2 ]

2 голосов
/ 07 марта 2019

К сожалению, вы сталкиваетесь с двумя ошибками Cypress, , которые исправлены в ожидающих выпусках

  • 1) входом, который уже имеетфокус проверяется до .type, что неверно

  • 2) , когда браузер не в фокусе Chrome не запускает события размытия / фокусировки, которые реагируют-выбор опирается на.Из-за этой ошибки вы не увидите выпадающий список, если окно Chrome не сфокусировано.
    Следующая версия Cypress будет заполнять эти события, исправляя эту проблему.

    обходные пути:

    для 1) вы должны будете использовать {force:true} во время .type (см. Ниже)

    для 2), вы можете убедиться, чтосфокусируйте окно при запуске теста или посмотрите обходной путь в приведенном ниже коде 

it('react-select', () => {
  cy.visit('https://react-select.com/creatable')
  cy.get('.css-10nd86i input').eq(1) // get the first react-select input
    .focus() // workaround for bug #2
    .type('Ocean', {force:true}) // workaround for bug #1
})

другой пример: 

it('react-select', () => {
  cy.visit('https://react-select.com/creatable')
  cy.get('.css-10nd86i').eq(1)
    .click() // click on the react-select div
    .find('input').focus() // workaround for bug #2
  cy.contains('Ocean').click({force:true}) // workaround for bug #1
  // Other actions to take ?
  // cy.focused().type('{downarrow}{enter}', {force:true}) 
  // cy.focused().type('{enter}', {force:true})
  // cy.focused().type('Ocean', {force:true})
})
0 голосов
/ 07 марта 2019

Сначала нужно щелкнуть, чтобы открыть раскрывающийся список «Реакция выбора», а затем нажать на элемент, который вы хотите открыть. Мы используем этот синтаксис для этого: 

cy.get('.s3p-react-select__indicator').eq(1)
  .click()
cy.get('[id^="react-select-"]').contains('<value_dropdownbox>')
  .click()

И действительно использует скрытые поля ввода. Чтобы найти скрытое поле ввода, откройте ваш developertools, выберите элементы и найдите «input [type = 'hidden']».

Наконец-то ответ на ваш последний вопрос:

Также не помогает, что я не знаю, как проверить фактический выпадающий список в инструментах разработки, потому что он не остается открытым.

Попробуйте загрузить плагин React select для разработчиков для Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Если вы открыли инструменты разработчика Chrome, перейдите на вкладку React. Теперь нажмите прямо на свой элемент React и выберите элемент inspect. Вы видите все варианты, которые вы можете сделать для этого элемента. Но, вероятно, он не выберет правильный элемент сразу, поэтому найдите элемент с флажком «menuIsOpen» и отметьте его. Раскрывающийся список будет оставаться открытым, пока что-то не изменится на странице

...