diff --git a/cypress/generated/addon-backgrounds.spec.ts b/cypress/generated/addon-backgrounds.spec.ts index de4a7edb4f8c..04201f225952 100644 --- a/cypress/generated/addon-backgrounds.spec.ts +++ b/cypress/generated/addon-backgrounds.spec.ts @@ -11,7 +11,7 @@ describe('addon-backgrounds', () => { cy.get('[title="Change the background of the preview"]').click(); cy.get('#dark').click(); - cy.getCanvasElement().should('have.css', 'background-color', 'rgb(51, 51, 51)'); + cy.getCanvasBodyElement().should('have.css', 'background-color', 'rgb(51, 51, 51)'); }); it('should apply a grid', () => { @@ -21,6 +21,6 @@ describe('addon-backgrounds', () => { // Toggle grid view cy.get('[title="Apply a grid to the preview"]').click(); - cy.getCanvasElement().should('have.css', 'background-image'); + cy.getCanvasBodyElement().should('have.css', 'background-image'); }); }); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index f8d68d45d81e..ccd076d41f1f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -81,6 +81,15 @@ Cypress.Commands.add('getCanvasElement', {}, () => { .then((iframe) => cy.wrap(iframe, { log: false })); }); +Cypress.Commands.add('getCanvasBodyElement', {}, () => { + cy.log('getCanvasBodyElement'); + return cy + .getCanvasElement() + .its('0.contentDocument.body', { log: false }) + .should('not.be.empty') + .then((body) => cy.wrap(body, { log: false })); +}); + Cypress.Commands.add('navigateToStory', (kind, name) => { const kindId = kind.replace(/ /g, '-').toLowerCase(); const storyId = name.replace(/ /g, '-').toLowerCase(); diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index 3dce9a258c87..0b1b2b22c6e5 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -24,6 +24,11 @@ declare namespace Cypress { */ getCanvasElement(): Chainable; + /** + * Custom command to select the DOM element of the body from the preview iframe in the canvas tab. + */ + getCanvasBodyElement(): Chainable; + /** * Navigate to a story. * 'Storybook Example/Button'