javascript - Cypress 和 select2 jquery 插件

Question

如何使用 cypress 与 select2我在使用 Select2 Jquery 插件和 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>

Cypress :

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

CypressError:重试超时:cy.select() 失败，因为此元素:

...

被另一个元素覆盖:

...

修复此问题，或使用 {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

同时有一篇关于 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})