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

Question

有谁知道如何从赛普拉斯测试的“反应选择”下拉列表中选择一个选项？

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

似乎react-select使用隐藏的输入。那棵柏树不能写。赛普拉斯的div也无法写入。

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

我在用：

• react-select 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)after，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：

到目前为止，效果最好：

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长），我添加了这些delay和timeout选项。延迟似乎有帮助，但我无法确切了解这些选项如何影响行为。有时柏树会超时:-(

编辑5：

同时（反应选择v3.0.4，cypress v3.3.2）所有测试均失败，原因是：

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

我想上课了。如此脆弱的解决方案不足为奇:-(

Answer 1

不幸的是，您遇到了两个Cypress 错误，这些错误已在待发布的版本中修复

• 1) 已经有焦点的输入在之前被验证.type，这是错误的

• 2)当浏览器失焦时， chrome 不会触发 react-select 依赖的模糊/焦点事件。由于此错误，当 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})
})

Answer 2

在 Cypress 4.2.0 和 react-select 3.0.8 上按两次 Enter 对我有用：

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

Answer 3

我在这里得到了这个解决方案：

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

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

Answer 4

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

来自react-select文档的引用：

如果您为 react-select 提供 classNamePrefix 道具，则所有内部元素都将根据您提供的 className 获得一个 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>

使用这个技巧，您可以react-select使用类选择器轻松地在 Cypress 中找到组件。例如，这里是选择第一个选项的代码片段：

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

您也可以在 react-select 的官方 github 存储库中探索 cypress test 。

Answer 5

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

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

并且确实使用了隐藏的输入字段。要查找隐藏的输入字段，请打开开发人员工具，选择元素并查找“input[type='hidden']”。

最后回答您最新的问题：

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

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

如果你打开了 Chrome 开发者工具，请点击 React 选项卡。现在右键单击您的 React 元素并选择检查元素。您会看到可以对该元素执行的所有选项。但它可能不会立即选择正确的元素，因此查找带有复选框“menuIsOpen”的元素，然后检查它。下拉菜单将保持打开状态，直到页面上发生更改