Handle web tables with Shadow DOM in Cypress

Question

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

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

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

Answer 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.