0

I am struggling to make Cypress see my web table that is in a Shadow DOM. My test Scenario is: After I type invalid data on the search bar, e.g 'oo', Cypress ensures that the table is empty, this means that only the headers: Name and Billing Contact Name are displayed.

What I did:

  1. Installed getTable command: npm install --save cypress-get-table
  2. Included in the project’s cypress/support/index.js file: require('cypress-get-table')

This is the HTML code

HTML code

And this is my cypress code

 it('should type an invalid search', function () {
        cy.get('div.input-container').type('oo{enter}') //type oo in the search bar
//After type oo the table should be cleared

        cy.get('im-data-table.hydrated').shadow().find('div#dataTable').getTable().should(tableData(){
expect(tableData).to.be.empty
    })
})
Problem is: Cypress can not find the table.
Any help is realy appreciated.

Update: I put a new picture to have the HTML code more complete. On this new one, we can see the content of the table and the im-root

enter image description here and this is the code with multiple .shadow() calls

cy.get('im-page.hydrated').shadow()
.find('im-section:nth-of-type(2)') //second im-section
.shadow()
.find('im-data-table.hydrated')
.shadow()
.find('div#dataTable')
.getTable()
.should(function (tableData) {
 expect(tableData).to.be.empty
})

With this chained .shadow() calls Cypress does not find the im-section

1

Firstly, in order to ensure the problem does not come from the cypress-get-table plugin, you could assert with "normal Cypress" that the table exists:

cy.get('im-data-table.hydrated')
    .shadow()
    .find('div#dataTable')
    .should('exist')

Secondly, I think the assertion you are using is incorrect - the tableData should be the variable in the assertion function, not the function itself:

cy.get('im-data-table.hydrated')
    .shadow()
    .find('div#dataTable')
    .getTable()
    .should(function(tableData){
        expect(tableData).to.be.empty
    })

Finally, your im-data-table.hydrated is itself in a shadow DOM, which you have to enter - so you have to chain multiple .shadow() calls:

cy.get('im-page.hydrated')
    .shadow()

    .find('...') // the im-section you're interested in
    .shadow()

    .find('im-data-table.hydrated')
    .shadow()

    .find('div#dataTable')
    .getTable()
    .should(function(tableData){
        expect(tableData).to.be.empty
    })

Of course, you can wrap all that code in a function.

4
  • tks @Cycy I got the idea. But I Cypress is still not finding im-data-table.hydrated, so I tried cy.get('im-data-table.hydrated').should('exist'), but still it is not found. Any thought? Mar 15 at 13:20
  • Beware: your im-data-table.hydrated is also in a shadow DOM. I think you have to enter every one of the shadow DOMs with the .shadow() command. I'll update the answer too.
    – Cycy
    Mar 15 at 13:29
  • tks a lot for your help. I updated my question with a picture of the table when it has data and its HTML code + Cypress code with chained Shadow calls. Cypress can not find the im-section Mar 15 at 16:28
  • @IngriddBrito, the im-section is directly in the im-page div, not in its shadow DOM - maybe you just have one too much .shadow() ?
    – Cycy
    Mar 15 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.