test(e2e): add canvas body element selector

- also update tests for addon-backgrounds
storybookjs · Sep 16, 2020 · 71feec1 · 71feec1
1 parent dc391b9
commit 71feec1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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
@@ -24,6 +24,11 @@ declare namespace Cypress {
      */
     getCanvasElement(): Chainable<Element>;
 
+    /**
+     * Custom command to select the DOM element of the body from the preview iframe in the canvas tab.
+     */
+    getCanvasBodyElement(): Chainable<Element>;
+
     /**
      * Navigate to a story.
      * 'Storybook Example/Button'