如何使用 cypress 测试 vaadin-combo-box？

Question

我尝试在 cypress vaadin-combo-box 中进行测试。我有两个值：是/否。默认值为“否”。 在测试中我想更改为“是”

我柏树我写道：

cy.get('#addressDetails input').should('be.visible').clear().type('yes')

接下来我应该做什么来选择“是”值？

        <vaadin-combo-box
          id="addressDetails"
          label="Address details"
          item-label-path="name"
          item-value-path="id"
          .items="comboBoxItems"
          :value="optionsModel.addressdetails ? 'yes' : 'no'"
          @change="optionsModel.addressdetails = $event.target.checked"
        ></vaadin-combo-box>

Answer 1

vaadin 框架有很多 Shadow dom 部分 - 如果你在开发工具中检查，你可以看到它们。

#shadow-root（打开）

您可以将配置

includeShadowDom:true

添加到测试或

cypress.config.js

中的全局配置。

在此示例中，我将其内联添加到测试中，它阻止

shadow-dom

阻止查询。

it('tests vaadin-combo-box', {includeShadowDom:true}, () => {

  cy.get('vaadin-combo-box input') 
    .type('Ukraine')
    .click()

  cy.get('vaadin-combo-box input') 
    .should('have.value', 'Ukraine')
})