Search code examples
testingautomated-testscypressvaadinshadow-dom

How to test vaadin-combo-box with cypress?

I try test in cypress vaadin-combo-box. I have two values: yes/no. Default value is 'no'. In test I want change to 'yes'

I cypress I wrote:

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

What shoud I do next to select 'yes' value?

        <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>
Solution

  • The vaadin framework has a lot of shadow dom parts - you can see them if you inspect in dev-tools.

    #shadow-root (open)

    enter image description here

    By default these block the Cypress queries (i.e cannot select elements within the shadow root).

    To get around this, add config includeShadowDom:true to the test header or to the global config in cypress.config.js.

    In this example I added it inline to the test, it stops the shadow-dom from blocking the queries.

    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')
})

    enter image description here

    Ref: Documentation

    I don't recommend trying to use the .shadow() command when there is extensive use of shadow roots in the DOM or nested shadow roots.