从 Cypress 的自动完成材质 UI 列表框中选择一个项目

Answer 1

不要想太多问题，只需在组件中使用文本即可。

像 React Material-UI 这样的库会生成相当复杂的 HTML 来处理样式和动画，并且很难从生成的 HTML 中选择正确的部分。

给出这样的源代码（取自MUI演示页面）

<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

您将获得像这样的生成结构（省略用于样式化的类）

<div class="MuiAutocomplete-root" data-cy="movie-autocomplete">
  <div>
    <label for="combo-box-demo" id="combo-box-demo-label">Movie</label>
    <div>
      <input id="combo-box-demo" type="text" role="combobox" value="">
      ...
    </div>
  </div>
</div>

MUIAutocomplete-root

是外部元素 - 您可以使用元素中的文本来测试它。

cy.contains('.MuiAutocomplete-root', 'Movie')  // identify Autocomplete component
  .click()                                     // open it

cy.contains('The Godfather').click()           // choose an option

cy.contains('.MuiAutocomplete-root', 'Movie')  
  .find('input')                               
  .should('have.value', 'The Godfather')       // verify the value in the input

---

具有data-cy属性

如果向组件添加

data-cy

属性，

<Autocomplete
  data-cy='movie-autocomplete'
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

测试变得更简单

cy.get('[data-cy="movie-autocomplete"]').click()

cy.contains('The Godfather').click()

cy.get('[data-cy="movie-autocomplete"]')
  .find('input')
  .should('have.value', 'The Godfather')