使用cypress选择react选择下拉列表选项

有人知道如何在cypress测试中从react select下拉列表中选择选项吗

我试过很多东西，但都没用

似乎react select使用了隐藏的输入。那棵柏树不能写字。而cypress也无法写入的div

我不知道如何检查dev工具中的实际下拉列表也没有帮助，因为它没有保持打开状态

我正在使用：

• 反应选择v2.4.1
• cypress v3.1.5

编辑1： @bkucera的答案有效。我得到的工作代码是：

it（'updates Person'，（）=>{
cy.get（“[data id=bearbeiter]”）
.find（“.css-10nd86i”）
。单击（）
.find（'输入'）
.eq（1）
.focus（）
包含（'testtester'）。单击（{force:true}）
})

我不得不在

find

之后添加一个

.eq（1）

，因为似乎有两个输入

编辑2： 上面的解决方案最后点击了我网站导航树中碰巧包含相同文本的元素。所以不要抽雪茄：-(

编辑3： 我也尝试过这个解决方案：

Cypress.Commands.add（'setSelectOption'，（{selector，option，value}）=>{
cy.get（选择器）
.find（“.css-10nd86i输入”）
.eq（1）
.focus（）
.type（值{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.

至少它对短列表有效。文本输入缓慢。对于我们的物种列表（7000长），我添加了

延迟

和

超时

选项。延迟似乎有帮助，但我无法确切理解这些选项如何影响行为。有时cypress超时：-(

编辑5： 同时（react select v3.0.4，cypress v3.3.2）所有测试都失败，因为：

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

---

我想类已经改变了。对于这样一个脆弱的解决方案，这并不奇怪：-（

您必须先单击以打开react select下拉列表，然后单击要打开的实际元素。我们使用以下语法：

cy.get（'.s3p-react-select___指示符'）。等式（1）
。单击（）
cy.get（'[id^=“react select-“]'）。包含（“”）
。单击（）

in确实使用隐藏的输入字段。要找到隐藏的输入字段，请打开developertools，选择元素并查找“input[type='hidden']”

最后，请回答您最近的问题：

我不知道如何检查dev工具中的实际下拉列表也没有帮助，因为它没有保持打开状态

尝试下载适用于Chrome的React select developer插件：

---

如果你打开了你的Chrome开发者工具，点击React选项卡。现在右键点击你的React元素并选择inspect element。你可以看到你可以为该元素做的所有选项。但是它可能不会一次选择正确的元素，所以请查看带有复选框menuIsOpen的元素，并检查它。下拉列表将保持打开状态，直到页面上发生更改

不幸的是，您遇到了两个Cypress错误

• 1） 已具有焦点的输入在

  之前进行验证。键入
  ，这是错误的
  

• 2） 浏览器失焦时chrome不会触发模糊/聚焦事件，这是select所依赖的。由于此错误，当chrome窗口未聚焦时，您将看不到下拉列表出现。
  Cypress的下一个版本将填充这些事件，修复此问题
  解决方法：
  对于1）在

  .type

  过程中，您必须使用

  {force:true}

  （见下文）
  对于2）您可以确保在运行测试时聚焦窗口，或者查看下面代码中的解决方法

it（'react-select'，（）=>{
参观https://react-select.com/creatable')
cy.get（'.css-10nd86i input'）.eq（1）//获取第一个反应选择输入
.focus（）//bug#2的解决方法
.type（'Ocean'，{force:true}）//bug#1的解决方法
})

另一个例子：

it（'react-select'，（）=>{
参观https://react-select.com/creatable')
cy.get（'.css-10nd86i'）.eq（1）
.click（）//单击react select div
.find（'input'）.focus（）//错误2的解决方法
cy.contains（'Ocean'）。单击（{force:true}）//bug#1的解决方法
//要采取的其他措施我在这里得到了这个解决方案：

"cypress": "^3.4.1"
"react-select": "^2.4.3"

cy
.get（'[class*=“-control”]'）
。单击（0，0，{force:true}）
.get（'[class*=“-menu”]'）
.find（“[class*=”-选项“]”）
.eq（2）
。单击（0，0，{force:true}）
将ID传递给react select，然后按如下方式查找：

    cy.get('#country').within($el => {
    cy.wrap($el)
        .click()
        .find('div[tabindex*="-1"]')
        .first()
        .click();
    });

因此，首先在元素内进行查询，将其包装并触发click事件，然后使用每个元素拥有的数据道具之一，我使用了tabindex-1，因为每个元素都有它，如果需要特定元素，请使用eq（x）。
在我的例子中，这有助于：

cy.get("[for=country]")
        .click() 
        .type("Poland{enter}");

但请记住，我正在单击标签，它很好地集中于react select输入。
在Cypress 4.2.0和react select 3.0.8上，按两次enter键对我有效：

cy.get('#react-select-component-id').type('Something{enter}{enter}');

我使用Cypress 4.2.0，可以执行以下链命令：

Cypress.Commands.add('selectDropdownlist', (dropDownSelectionId) => {
cy.get('[data-id=bearbeiter]').click({force: true})
.get(`[id="${dropDownSelectionId}"]`).click() //the id or any selector of the value 'Test Tester'
})

在最新版本的
react select
中，您可以设置
classnameffix
属性


如果您提供classNamePrefix属性来选择，则所有内部
元素将根据您提供的类名获得一个类名

例如，给定classNamePrefix=“react select”，DOM将
大致如下：

<div class="react-select">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>

您还可以探索cypress测试。
您可以尝试我的代码模板。在这个测试中，我单击输入，在菜单列表中选择选项3次。注意：每次选择选项后，我的菜单列表关闭，因此在此之后我需要单击输入


it（'test-react-select'，（）=>{
cy.get（'#react-select-2-input'）。单击（）。焦点（）
cy.get（'#react-select-2-option-0'）。单击（）
cy.get（'#react-select-2-input'）。单击（）。焦点（）
cy.get（'#react-select-2-option-1'）。单击（）
cy.get（'#react-select-2-
cy.get('.react-select__control') // find react-select component     
   .click() // click to open dropdown
   .get('.react-select__menu') // find opened dropdown
   .find('.react-select__option') // find all options
   .first() 
   .click() // click on first option

cy.get('[id="react-select-component"] select > option ').eq(3);

<select id="name_select" name="name_select">

<option value="someValue_1"> someOptionText_1 </option>
<option value="someValue_2"> someOptionText_2 </option>
<option value="someValue_3"> someOptionText_3 </option>

</select>

// definition
function selectOptionFromDropDown(elDropdown, stOptionElement, stOptionToSelect){
  cy.get(elDropdown).eq(0).click()
  .find(stOptionElement).first().focus()
  cy.contains(stOptionToSelect).click({force:true})
} 
// calling
keywords.selectOptionFromDropDown('[id="dropdown-account-campaigns"]','input', 'Main (GBP)')