Cypress 和 select2 jquery 插件

Question

如何在select2中使用 cypress 我在使用 Select2 Jquery Plugin 和 cypress 我的 html 时遇到了一些问题

<div class="form__polozka-hodnota"><select name="client_type" data-cy="typ_klienta" data-dep="" class="form-control"
    id="frm-vehicleInsurance-form-client_type" required
    data-nette-rules='[{"op":":filled","msg":"Vyberte: Typ klienta"}]'>
    <option value="">---</option>
    <option value="1">Fyzická osoba</option>
    <option value="2">Právnická osoba</option>
</select></div>

柏：

cy.get('[data-cy=typ_klienta]').select('Fyzická osoba').should('have.value', '1')

CypressError: Timed out retrying: cy.select() failed 因为这个元素：

...

被另一个元素覆盖：

...

修复此问题，或使用 {force: true} 禁用错误检查。

https://on.cypress.io/element-cannot-be-interacted-with

输出控制台：

$('[data-cy="typ_klienta"]')

对象 { 0：select#frm-vehicleInsurance-form-client_type.form-control.select2-hidden-accessible，长度：1，prevObject：{…} }

Answer 1

我已经开始了一个食谱，现在展示如何选择单个值（您的用例），请参阅https://github.com/cypress-io/cypress-example-recipes/pull/439

Answer 2

同时有一篇关于 cypress 和 select2 的非常好的和详细的博文，请参阅https://www.cypress.io/blog/2020/03/20/working-with-select-elements-and-select2-widgets-in-cypress /

在我的项目中，我现在可以简单地使用“force:true”在我的 select2 中选择一个值

cy.get('[data-cy=typ_klienta]').select('Fyzická osoba', {force: true})