Merge pull request #16285 from storybookjs/feature/cypress-skip-tests

add ability to skip cypress tests based on framework

cypress/generated/addon-docs.spec.ts

@@ -1,30 +1,36 @@
+import { skipOn } from '@cypress/skip-test';
+
 describe('addon-action', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visitStorybook();
-  });
-
-  it('should have docs tab', () => {
     cy.navigateToStory('example-button', 'primary');
     cy.viewAddonTab('Docs');
+  });
 
+  it('should have docs tab', () => {
     // MDX rendering
     cy.getDocsElement().find('h1').should('contain.text', 'Button');
 
     // inline story rendering
     cy.getDocsElement().find('button').should('contain.text', 'Button');
+  });
 
-    cy.getDocsElement()
-      .find('.docblock-code-toggle')
-      .first()
-      .should('contain.text', 'Show code')
-      .click();
+  skipOn('vue3', () => {
+    it('should provide source snippet', () => {
+      cy.getDocsElement()
+        .find('.docblock-code-toggle')
+        .first()
+        .should('contain.text', 'Show code')
+        // use force click so cypress does not automatically scroll, making the source block visible on this step
+        .click({ force: true });
 
-    cy.getDocsElement()
-      .find('pre.prismjs')
-      .first()
-      .should(($div) => {
-        const text = $div.text();
-        expect(text).not.match(/^\(args\) => /);
-      });
+      cy.getDocsElement()
+        .find('pre.prismjs')
+        .first()
+        .should(($div) => {
+          const text = $div.text();
+          expect(text).not.match(/^\(args\) => /);
+        });
+    });
   });
 });

package.json

@@ -313,6 +313,7 @@
     }
   },
   "optionalDependencies": {
+    "@cypress/skip-test": "^2.6.1",
     "@cypress/webpack-preprocessor": "^5.7.0",
     "cypress": "6.8.0",
     "puppeteer": "^2.1.1",

scripts/run-e2e.ts

@@ -56,7 +56,7 @@ const serveStorybook = async ({ cwd }: Options, port: string) => {
 const runCypress = async (location: string, name: string) => {
   const cypressCommand = openCypressInUIMode ? 'open' : 'run';
   await exec(
-    `yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,defaultCommandTimeout=4000,integrationFolder="cypress/generated",videosFolder="/tmp/cypress-record/${name}" --env location="${location}"`,
+    `CYPRESS_ENVIRONMENT=${name} yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,defaultCommandTimeout=4000,integrationFolder="cypress/generated",videosFolder="/tmp/cypress-record/${name}" --env location="${location}"`,
     { cwd: rootDir },
     {
       startMessage: `🤖 Running Cypress tests`,

yarn.lock

@@ -4068,6 +4068,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cypress/skip-test@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "@cypress/skip-test@npm:2.6.1"
+  checksum: 1d0d2cb4b3094c6dee2d2339b75d60f85e5fb17b4e281cbee854e6cd4a124fad61cc65db8335b9a169ccc24b490df5b29c3385f09fa590124dc4d5b57e110019
+  languageName: node
+  linkType: hard
+
 "@cypress/webpack-preprocessor@npm:^5.7.0":
   version: 5.7.0
   resolution: "@cypress/webpack-preprocessor@npm:5.7.0"
@@ -8661,6 +8668,7 @@ __metadata:
     "@babel/preset-typescript": ^7.12.7
     "@babel/runtime": ^7.12.5
     "@compodoc/compodoc": ^1.1.14
+    "@cypress/skip-test": ^2.6.1
     "@cypress/webpack-preprocessor": ^5.7.0
     "@emotion/snapshot-serializer": ^0.8.2
     "@nicolo-ribaudo/chokidar-2": ^2.1.8
@@ -8824,6 +8832,8 @@ __metadata:
   dependenciesMeta:
     "@compodoc/compodoc":
       built: false
+    "@cypress/skip-test":
+      optional: true
     "@cypress/webpack-preprocessor":
       optional: true
     core-js: