Блог

Главная - Вопросы по программированию - Как запустить выбор пользовательского интерфейса материала в Cypress

Как запустить выбор пользовательского интерфейса материала в Cypress

#reactjs #material-ui #cypress

#reactjs #материал-пользовательский интерфейс #кипарис

Вопрос:

Я пытаюсь запустить MUI Select с помощью Cypress, но я не могу заставить его работать.

Я прочитал источник MUI selectInput, и ясно, что они запускаются при событии «mousedown». Я профилировал клик и видел, что это правда. Однако вызов cy.find(input).trigger('mousedown', { force: true }) не вызывает всплывающего cy.find('label').trigger('mousedown', { force: true }) окна, равно как и захват любого из содержащих div элементов и запуск наведения курсора мыши на них.

Если я перейду на страницу примера MUI: https://material-ui.com/components/selects / и я проверяю там DOM и смотрю на элементы, ни у одного из них нет обработчика onmousedown, и захват их как глобальных и вызов temp<n>.dispatchEvent(new MouseEvent('mousedown')) не вызывает открытия всплывающего окна. Поэтому я не могу понять, где подключается обработчик наведения курсора мыши.

Что я упускаю из виду?

Заранее спасибо.

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

1. В наших тестах Cypress мы используем findByText (из библиотеки тестирования Cypress) и делаем cy.findByText("Text of the Select label or current selected value").click().findByText("Text of option we want to select").click() .

2. Если это может кому-нибудь помочь, вот обходной путь, вдохновленный этой темой , чтобы выбрать первый элемент в выпадающем списке с помощью клавиатуры : cy.get('div.MuiSelect-root').first().type('{downarrow}{enter}')

Ответ №1:

Для Cypress, чтобы заполнить компонент Material-UI React Select , это сработало для меня:

 cy.get('#fooID')
  .parent()
  .click()
  .get('ul > li[data-value="FooBar"]')
  .click();

Замена:

  • Foo с помощью вашего компонента MUI Select Id
  • FooBar с текстом, который вы хотите выделить в раскрывающемся списке.

Этот пост помог мне указать правильное направление.

В компоненте Material-UI React Select идентификатор метки формы переносится / контролируется внешним div. So .get('#fooID') захватывает внутреннюю метку по идентификатору, .parent().click() щелкает корневой компонент div, чтобы открыть выпадающий список, и .get('ul > li[data-value="FooBar"]').click() находит и щелкает правильный элемент в раскрывающемся списке.

Ответ №2:

это работает для меня, представьте, что текст по умолчанию находится Organization на вашем выборе, и вы хотите выбрать SUN из выпадающего списка

 cy.findByText('Organization').type('SUN{enter}');

Ответ №3:

Документация Cypress рекомендует назначать уникальный data-cy реквизит элементам, с которыми Cypress должен взаимодействовать, поэтому вы должны сделать это как для поля выбора, так и для его параметров.

Смотрите пример ниже (при условии, что вы все еще используете Material-UI v4):

Компонент выбора:

 <TextField
  select
  data-cy={`input-fruits`}
  defaultValue=''
>
  {
    [`apple`,`banana`,`orange`].map((fruit, index) => (
      <MenuItem
        key={`item-${index}`}
        value={fruit}
        data-cy={`select-option-${fruit}`}
      >
        {fruit}
      </MenuItem>
    ))
  }
</TextField>

Тест Cypress:

 it("should change value of select box", () => {
  /** Confirm that the select box is empty by default */
  cy.get(`[data-cy = "input-fruits"]`).should(`have.value`, ``);

  /** Click on the select box, then on the option */
  cy.get(`[data-cy = "input-fruits"]`).click();
  cy.get(`[data-cy = "select-option-orange"]`).click();

  /** Assert the new value of the select box */
  cy.get(`[data-cy = "input-fruits"]`).should(`have.value`, `orange`);
});