Question

有人知道如何在赛普拉斯测试中从反应选择下拉列表中选择一个选项吗？

我尝试了很多东西，但无济于事。

似乎“反应选择”使用隐藏的输入。那棵柏树不能写。赛普拉斯的div也无法写入。

我不知道如何检查开发工具中的实际下拉列表，这也无济于事，因为它没有保持打开状态。

我正在使用：

反应选择v2.4.1
赛普拉斯v3.1.5

编辑1：

@bkucera的答案有效。我最终得到的有效代码是：

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选项。延迟似乎有所帮助，但我无法确切了解这些选项如何影响行为。有时柏树会超时：-（

Answer 1

在赛普拉斯4.2.0上，然后选择两次选择3.0.8，按回车键对我有用：

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

Answer 2

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

Quote from react-select docs:

如果您提供classNamePrefix道具来进行反应选择，则所有内部元素将根据您提供的名称被赋予className。

例如，给定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中轻松找到react-select组件。例如，下面是选择第一个选项的代码段：

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

您还可以探索柏树测试in the official github repository of react-select。

Answer 3

很遗憾，您遇到了两个赛普拉斯bug，which are fixed in pending releases

1）在<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/srchbar_menu" android:title="search" android:icon="@drawable/ic_search_black_24dp" app:showAsAction="ifRoom|collapseActionView" app:actionViewClass="com.mancj.materialsearchbar.MaterialSearchBar"/> </menu>之前验证了已经具有焦点的输入，这是错误的
2）当浏览器失焦时，Chrome不会触发模糊/聚焦事件，而后者是“反应-选择”所依赖的。由于存在此错误，当chrome窗口未聚焦时，您将不会看到下拉菜单。
赛普拉斯的下一版本将填补这些事件，从而解决此问题。

解决方法：

对于1），您必须在grep -R "USA" /path/to/file >> Out_USA.csv grep -R "India" /path/to/file >> Out_India.csv期间使用.type（见下文）

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

{force:true}

另一个例子：

.type

Answer 4

嘿，我在这里有此解决方案：

Reducer State

function mapStateToProps(state) {
  return {
    course: state.course
  };
}

Answer 5

传递ID以进行反应选择，并找到它，例如：

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

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

Answer 6

对于我来说，这有所帮助：

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

但是请记住，我单击的是标签，它很好地关注了反应选择输入。

Answer 7

我使用赛普拉斯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'
})

Answer 8

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

  it('test react-select', () => {
    cy.get('#react-select-2-input').click().focus()
    cy.get('#react-select-2-option-0').click()
    cy.get('#react-select-2-input').click().focus()
    cy.get('#react-select-2-option-1').click()
    cy.get('#react-select-2-input').click().focus()
    cy.get('#react-select-2-option-2').click()
  })

Answer 9

这对我有用：

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

在我的情况下，id用于选择组件：

<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>

eq（3）=> value =“ someValue_2”; eq（1）标头

Answer 10

我正在处理的基于 React 的应用程序中有一个自定义下拉列表。因此，我编写了以下函数来从下拉列表中选择一个值。

// 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)')

Answer 11

我找到了解决相同问题的简单方法：

-> cy.get('#basic_category').click()    //getting id of dropdown by cy.get() and using click()
-> cy.contains('Test Category2').click()   //typing name of what you want to pick from dropdown in cy.contains() and using click()

Answer 12

这适用于我的 State 下拉菜单，它有一个用于 React 测试库的 data-testid：

cy.get("[data-testid='shippingAddress.state']").type("California{enter}");

使用：

"@testing-library/react": "11.2.7"
"react-select": "3.2.0"
"cypress": "6.9.1"

Answer 13

您必须先单击以打开“反应选择”下拉列表，然后单击要打开的实际元素。为此，我们使用以下语法：

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

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

最后回答您最近的问题：

我不知道如何检查开发工具中的实际下拉列表，这也无济于事，因为它没有保持打开状态。

尝试下载适用于Chrome的React select开发人员插件：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

如果您打开了Chrome开发人员工具，请点击React标签。现在，在您的React元素上单击鼠标右键，然后选择检查元素。您会看到可以为该元素执行的所有选项。但是可能不会一次选择正确的元素，因此请使用复选框“ menuIsOpen”查找该元素，然后进行检查。下拉菜单将保持打开状态，直到页面上发生任何更改

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

编辑1：

编辑2：

编辑3：

编辑4：

13 个答案: