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

Question

Я использую react-select V2 в своем коде и использую множественный выбор, мой компонент выглядит следующим образом:

 <Select 
      isMulti 
      className="basic-multi-select"
      classNamePrefix="select"
      options={ this.getTransformedOptions() }
      components={{ Placeholder, DropdownIndicator }}
      placeholder={this.props.placeholderText}
      onChange={this.props.onChange('multi')}
 />

Я использую драйверы mocha, node, selenium и chrome для создания интеграционных тестов для моего приложения, поэтому для этой страницы я хотел бы просто протестировать открытие раскрывающегося меню, выбор некоторых параметров, удаление некоторых параметров и т. Д.

Если я передаю menuIsOpen={true} компоненту, я могу легко щелкнуть элемент с помощью следующей команды:

driver.findElement(By.css('.select__menu div[id="react-select-2-option-0"]')).click();

Однако я все еще не могу открыть меню программно. Кто-нибудь знает, как я могу сделать это с помощью команды, аналогичной приведенной выше?

Answer 1

Мне удалось решить проблему, используя метод селен actions и mouseDown следующим образом:

driver.wait(until.elementLocated(By.css('div.select__dropdown-indicator')), TEST_TIMEOUT);
currentElement = driver.findElement(By.css("div.select__dropdown-indicator"));
driver.actions().mouseDown(currentElement).click().perform(); // expand drop down menu
currentElement = driver.findElement(By.className("select__input"));
driver.actions().mouseDown(currentElement).click().perform();
driver.findElement(By.css('.select__menu div[id="react-select-2-option-0"]')).click();

Answer 2

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

При использовании xPath он выглядит следующим образом:

//div[contains(@class, 'here__your__className')]//div[contains(@class, 'your__prefix__indicators')]

Использование css:

driver.findElement(By.css('.your__prefix__indicators')).click();