How to trigger Material UI Select in Cypress

Question

I am trying to trigger a MUI Select using Cypress but I cannot get it to work.

我已阅读 MUI SelectInput 源代码，很明显它们是在“mousedown”事件上触发的。我分析了一次点击，发现这是真的。但是，调用cy.find(input).trigger('mousedown', { force: true })不会触发弹出窗口，也不会触发弹出窗口cy.find('label').trigger('mousedown', { force: true })，也不会抓取任何包含的div元素并在它们上触发 mousedown。

如果我转到 MUI 示例页面： https://material-ui.com/components/selects/ 并检查那里的 DOM 并查看元素，它们都没有 onmousedown 处理程序，并将它们作为全局变量并调用temp<n>.dispatchEvent(new MouseEvent('mousedown'))不会触发弹出窗口打开。所以我无法弄清楚 mousedown 处理程序被挂接到哪里。

我缺少什么？

提前致谢。

Answer 1

对于 Cypress 来说，填写 Material-UI ReactSelect组件，这对我有用：

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

更换：

• Foo使用您的 MUI Select 组件Id
• FooBar以及您想要在下拉栏中选择的文本。

这篇文章帮助我指明了正确的方向。

在 Material-UI ReactSelect组件中，表单标签的 ID由外部 div 包装/控制。 因此，.get('#fooID')通过 ID 获取内部标签，.parent().click()单击根组件 div以显示下拉列表，然后.get('ul > li[data-value="FooBar"]').click()在下拉栏中找到并单击正确的项目。

Answer 2

这个对我有用，想象一下默认文本在Organization您的选择上，并且您想SUN从下拉列表中进行选择

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