CyConf followups

.circleci/config.yml

@@ -1,5 +1,8 @@
 version: 2.1
 
+orbs:
+  cypress: cypress-io/cypress@3
+
 executors:
   node-executor:
     resource_class: medium+
@@ -51,7 +54,27 @@ jobs:
       - attach_workspace:
           at: ~/repo
       - run: npm run lint
-
+
+  install-and-persist:
+    executor: cypress/default
+    steps:
+      - cypress/install
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - .cache/Cypress
+            - project
+
+  run-tests-in-parallel:
+    executor: cypress/default
+    parallelism: 6
+    steps:
+      - attach_workspace:
+          at: ~/
+      - cypress/run-tests:
+          start-command: 'npm run start'
+          cypress-command: 'npx wait-on http://localhost:3000 && npx cypress run --parallel --record'
+
   release:
     <<: *job-defaults
     steps:
@@ -67,15 +90,20 @@ jobs:
             node ./scripts/search/scrape-and-compare-algolia-index.mjs 
 
 workflows:
-  version: 2
   build-and-test:
     jobs:
       - build
       - lint:
           name: "Lint JS/CSS/Markdown"
           requires:
             - build     
-
+      - install-and-persist:
+          name: Install & Persist To Workspace
+      - run-tests-in-parallel:
+          name: Run Tests in Parallel
+          requires:
+            - build
+            - Install & Persist To Workspace      
       # Run Algolia scraper only on main.
       - release:
           name: 'Run Algolia scraper'

cypress.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from "cypress";
+import { readdirSync } from 'fs'
+import { join } from 'path'
+
+export default defineConfig({
+  projectId: 'imown1',
+  viewportHeight: 800,
+  viewportWidth: 1200,
+  experimentalMemoryManagement: true,
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    setupNodeEvents(on, config) {
+      on("task", {
+        "createFileTree"({ path }) {
+          // take the given path and create an array of all file paths
+          // with each files and the directory path of the file as strings
+          // for example: given 'accessibility' return
+          // ['accessibility/get-started/introduction', 'accessibility/core-concepts/how-it-works']
+          path = 'docs/' + path;
+
+          function walk(dir: string): string[] {
+            return readdirSync(dir, { withFileTypes: true }).flatMap((file) => {
+              if (file.name.includes('_category_.json') || file.name.includes('.DS_Store')) {
+                return []
+              }
+
+              if (file.name.includes('.mdx')) {
+                // remove the .mdx file extension
+                file.name = file.name.slice(0, -4)
+              }
+
+              if (file.isDirectory()) {
+                return walk(join(dir, file.name))
+              } else {
+                return [join(dir, file.name)]
+              }
+            })
+          }
+
+          return walk(path).filter((file) => file !== undefined).map((file) => file.slice(5))
+        }
+      })
+      }
+    },
+});

cypress/e2e/a11y_pages.cy.ts

@@ -0,0 +1,16 @@
+describe('Visit a11y pages', () => {
+  before(() => {
+    cy.task('createFileTree', { path: 'accessibility' }).then((urls) => {
+      // console.log('urlsLength', urls.length)
+      Cypress.env({ urls })
+    })
+  })
+
+  // Well, this number is hardcoded and should match the length of urls
+  Cypress._.range(0, 12).forEach(index => {
+    it(`Visit a11y page ${index} `, () => {
+      cy.visit(Cypress.env().urls[index])
+      cy.get('h1').should('be.visible')
+    })
+  })
+})

cypress/e2e/api_pages.cy.ts

@@ -0,0 +1,16 @@
+describe('Visit API pages', () => {
+  before(() => {
+    cy.task('createFileTree', { path: 'api' }).then((urls) => {
+      // console.log('urlsLength', urls.length)
+      Cypress.env({ urls })
+    })
+  })
+
+  // Well, this number is hardcoded and should match the length of urls
+  Cypress._.range(0, 132).forEach(index => {
+    it(`Visit API page ${index} `, () => {
+      cy.visit(Cypress.env().urls[index])
+      cy.get('h1').should('be.visible')
+    })
+  })
+})

cypress/e2e/app_pages.cy.ts

@@ -0,0 +1,16 @@
+describe('Visit App pages', () => {
+  before(() => {
+    cy.task('createFileTree', { path: 'app' }).then((urls) => {
+      console.log('urlsLength', urls.length)
+      Cypress.env({ urls })
+    })
+  })
+
+  // Well, this number is hardcoded and should match the length of urls
+  Cypress._.range(0, 81).forEach(index => {
+    it(`Visit App page ${index} `, () => {
+      cy.visit(Cypress.env().urls[index])
+      cy.get('h1').should('be.visible')
+    })
+  })
+})

cypress/e2e/basic_tests.cy.ts

@@ -0,0 +1,64 @@
+describe('Basic tests', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('root reroutes to App ', () => {
+    cy.url().should('include', '/app/get-started/why-cypress')
+  })
+
+  describe('Main Nav', () => {
+    it('App', () => {
+      cy.get('nav a').contains('App').click()
+      cy.url().should('include', '/app/get-started/why-cypress')
+      cy.get('[aria-current="page"]').should('contain', 'App')
+    })
+
+    it('API', () => {
+      cy.get('nav a').contains('API').click()
+      cy.url().should('include', '/api/table-of-contents')
+      cy.get('[aria-current="page"]').should('contain', 'API')
+    })
+
+    it('Cloud', () => {
+      cy.get('nav a').contains('Cloud').click()
+      cy.url().should('include', '/cloud/get-started/introduction')
+      cy.get('[aria-current="page"]').should('contain', 'Cloud')
+    })
+
+    it('UI Coverage', () => {
+      cy.get('nav a').contains('UI Coverage').click()
+      cy.url().should('include', '/ui-coverage/get-started/introduction')
+      cy.get('[aria-current="page"]').should('contain', 'UI Coverage')
+    })
+
+    it('Accessibility', () => {
+      cy.get('nav a').contains('Accessibility').click()
+      cy.url().should('include', '/accessibility/get-started/introduction')
+      cy.get('[aria-current="page"]').should('contain', 'Accessibility')
+    })
+  })
+
+  describe('Announcement Bar', () => {
+    it('should close when clicking close btn', () => {
+      cy.get('[role="banner"]').should('be.visible')
+      cy.get('.close').click()
+      cy.get('[role="banner"]').should('not.exist')
+    })
+  })
+
+  describe('Dark mode', () => {
+    it('switch to dark mode when clicked', () => {
+      cy.get('[data-theme=light]').should('have.css', 'background-color', 'rgb(255, 255, 255)')  // white
+      cy.get('[aria-label="Switch to dark mode"]').click()
+      cy.get('[data-theme=dark]').should('have.css', 'background-color', 'rgb(27, 30, 46)') // dark gray
+    })
+  })
+
+  describe('Search', () => {
+    it('search opens search popup', () => {
+      cy.contains('Search ⌘K').click()
+      cy.get('.DocSearch-Modal').should('be.visible')
+    })
+  })
+})

cypress/e2e/cloud_pages.cy.ts

@@ -0,0 +1,16 @@
+describe('Visit Cloud pages', () => {
+  before(() => {
+    cy.task('createFileTree', { path: 'cloud' }).then((urls) => {
+      // console.log('urlsLength', urls.length)
+      Cypress.env({ urls })
+    })
+  })
+
+  // Well, this number is hardcoded and should match the length of urls
+  Cypress._.range(0, 29).forEach(index => {
+    it(`Visit Cloud page ${index} `, () => {
+      cy.visit(Cypress.env().urls[index])
+      cy.get('h1').should('be.visible')
+    })
+  })
+})

cypress/e2e/ui_cov_pages.cy.ts

@@ -0,0 +1,16 @@
+describe('Visit UI Cov pages', () => {
+  before(() => {
+    cy.task('createFileTree', { path: 'ui-coverage' }).then((urls) => {
+      console.log('urlsLength', urls.length)
+      Cypress.env({ urls })
+    })
+  })
+
+  // Well, this number is hardcoded and should match the length of urls
+  Cypress._.range(0, 16).forEach(index => {
+    it(`Visit UI Cov page ${index} `, () => {
+      cy.visit(Cypress.env().urls[index])
+      cy.get('h1').should('be.visible')
+    })
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/accessibility/core-concepts/how-it-works.mdx

@@ -29,6 +29,6 @@ This means that a 100% axe score does not mean all possible accessibility errors
 
 The value of this form of testing in Cypress Accessibility is to give you fast, reliable, easy-to-understand feedback about common accessibility mistakes that are found in most projects. Providing these results automatically as part of your test run means that you can find and fix these issues with minimal friction, shifting accessibility left in your software development lifecycle.
 
-## Test Replay limitations
+## Powered by Test Replay
 
-Because Cypress Accessibility uses data captured through the Test Replay protocol, it is subject to any [limitations of that protocol](https://docs.cypress.io/faq/questions/cloud-faq#Is-everything-captured-and-replayed-in-Test-Replay) related to data capture or browser support.
+Because Cypress Accessibility uses data captured through Cypress Test Replay, it is subject to any [limitations of Test Replay](https://docs.cypress.io/faq/questions/cloud-faq#Is-everything-captured-and-replayed-in-Test-Replay) data captured and browser support.

docs/accessibility/get-started/introduction.mdx

@@ -23,6 +23,12 @@ Cypress Accessibility generates a sortable, filterable report, to see scores and
 
 ## How are reports created?
 
+:::caution
+
+Cypress Accessibility generates reports using [Test Replay](/cloud/features/test-replay) data and requires Cypress v13+.
+
+:::
+
 Cypress Cloud generates an accessibility report for each unique state reached during your tests on a given Cypress run. This includes pages visited in end-to-end tests, as well as individual components rendered in component tests, and any states or pages that were encountered as a result of interactions performed during test execution.
 
 All of these page or component states are detected using the same protocol that powers [Test Replay](/cloud/features/test-replay), meaning no additional code or setup is needed anywhere in your tests.

docs/api/commands/origin.mdx

@@ -339,7 +339,10 @@ Cypress.Commands.add('login', (username, password) => {
 
 ### How to Test Multiple Origins
 
-<DocsVideo src="https://youtube.com/embed/Fohrq5GZSD8" />
+<DocsVideo
+  src="https://youtube.com/embed/Fohrq5GZSD8"
+  title="How to test multiple domains or origins with Cypress"
+/>
 
 In this video we walk through how to test multiple origins in a single test. We
 also look at how to use the `cy.session()` command to cache session information

docs/api/commands/scrollintoview.mdx

@@ -1,6 +1,5 @@
 ---
 title: scrollIntoView
-slug: /api/commands/scrollIntoView
 ---
 
 Scroll an element into view.
@@ -131,4 +130,4 @@ console outputs the following:
 
 ## See also
 
-- [`cy.scrollTo()`](/api/commands/scrollTo)
+- [`cy.scrollTo()`](/api/commands/scrollto)

docs/api/commands/scrollto.mdx

@@ -1,6 +1,5 @@
 ---
 title: scrollTo
-slug: /api/commands/scrollTo
 ---
 
 Scroll to a specific position.
@@ -224,4 +223,4 @@ following:
 
 ## See also
 
-- [`.scrollIntoView()`](/api/commands/scrollIntoView)
+- [`.scrollIntoView()`](/api/commands/scrollintoview)