How to click a menu item present inside an iframe in cypress? - cypress

Question

I have a menu item named as Transform table after clicking on it more items are shown for selection. These are all present inside an iframe. I want to click on the options available inside Transform Table, but when I am searching for the options the main pop gets closed. Please suggest some way to keep it open and the select the options in it.
const body = $iframe.contents().find('body');
let getElement = cy.wrap(body);
getElement.find(getdatasourcelocator.SearchBox).should('be.visible', { timeout: 30000 }).type(datasourceType);
getElement = cy.wrap(body);
getElement.find('.textCsv').click();
getElement = cy.wrap(body);
getElement.find(getdatasourcelocator.URL).type(entityURL);
getElement = cy.wrap(body);
getElement.find('button').contains('Next').click();
getElement = cy.wrap(body);
getElement.wait(15000);
getElement.find('button').contains('Transform table').click().then(()=>{
cy.get('button[data-automation-id="PromoteHeaders"]').should('be.visible');
cy.contains('li','Use first row as headers').should('be.visible', { timeout: 30000 }).click()
});
});
}```

Answer 1

Unfortunately, you cannot target elements or interact with anything in an iframe - regardless of it being the same domain or cross-domain iframe. Here is a known issue.
As workaround, you can try to use something from the comments:
Add custom command.
Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.on('load', () => {
resolve($iframe.contents().find('body'));
});
});
});
And use this command.
// for <iframe id="foo" src="bar.html"></iframe>
cy.get('#foo').iframe().find('.bar').should('contain', 'Success!');