Release v10 testing branch (#750)

Co-authored-by: Ben Alman <[email protected]>
Co-authored-by: Paul Jaffre <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Kevin Old <[email protected]>
Co-authored-by: ElevateBart <[email protected]>
Co-authored-by: Tyler Biethman <[email protected]>

.circleci/config.yml

@@ -57,22 +57,16 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: cache-dirs-{{ .Branch }}-{{ checksum "package.json" }}-{{ checksum "circle.yml" }}
+          key: cache-dirs-{{ .Branch }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
       - run: npm ci
 
-      # Use Git commit message to install any pre-release versions of Cypress
-      - run: npm i -g @cypress/commit-message-install
-      # if there is no special JSON comment in the current commit body
-      # then this command does nothing
-      - run: commit-message-install --else "echo nothing custom to install"
-
       # run verify and then save cache.
       # this ensures that the Cypress verified status is cached too
       - run: npm run cypress:verify
       - run: npm run cypress:info
       - run: npm run stop-only
       - save_cache:
-          key: cache-dirs-{{ .Branch }}-{{ checksum "package.json" }}-{{ checksum "circle.yml" }}
+          key: cache-dirs-{{ .Branch }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
           paths:
             - ~/.npm
             - ~/.cache
@@ -334,8 +328,8 @@ jobs:
     <<: *defaults
   server-communication__stream-tests:
     <<: *defaults
-  server-communication__offline:
-    <<: *defaults
+  # server-communication__offline:
+  #   <<: *defaults
   server-communication__server-timing:
     <<: *defaults
   server-communication__wait-for-api:
@@ -639,9 +633,9 @@ all_jobs: &all_jobs
   - server-communication__stream-tests:
       requires:
         - build
-  - server-communication__offline:
-      requires:
-        - build
+  # - server-communication__offline:
+  #     requires:
+  #       - build
   - server-communication__server-timing:
       requires:
         - build
@@ -708,7 +702,7 @@ all_jobs: &all_jobs
         - server-communication__visit-2nd-domain
         - server-communication__pass-value-between-specs
         - server-communication__stream-tests
-        - server-communication__offline
+        # - server-communication__offline
         - server-communication__server-timing
         - server-communication__wait-for-api
         - server-communication__request

README.md

@@ -1,5 +1,7 @@
 # Recipes
-[![CircleCI](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master) [![Build status](https://ci.appveyor.com/api/projects/status/7p4qkwavheciwbxc/branch/master?svg=true)](https://ci.appveyor.com/project/cypress-io/cypress-example-recipes/branch/master) [![renovate-app badge][renovate-badge]][renovate-app] [![Cypress Dashboard][dashboard badge]][dashboard url]
+[![CircleCI](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master) 
+<!-- [![Build status](https://ci.appveyor.com/api/projects/status/7p4qkwavheciwbxc/branch/master?svg=true)](https://ci.appveyor.com/project/cypress-io/cypress-example-recipes/branch/master)  -->
+[![renovate-app badge][renovate-badge]][renovate-app] [![Cypress Dashboard][dashboard badge]][dashboard url]
 
 > This repo contains various recipes for testing common scenarios using Cypress: [Fundamentals](#fundamentals), [Testing the DOM](#testing-the-dom), [Logging in](#logging-in-recipes), [Preprocessors](#preprocessors), [Blogs](#blogs), [Stubbing and spying](#stubbing-and-spying), [Unit Testing](#unit-testing), [Server Communication](#server-communication), [Other Cypress Recipes](#other-cypress-recipes), [Community Recipes](#community-recipes)
 
@@ -130,8 +132,8 @@ Recipe | Description
 [Seeding your Database in Node](./examples/server-communication__seeding-database-in-node) | Seed your database with test data
 [XHR assertions](./examples/server-communication__xhr-assertions) | Spy and assert on application's network calls
 [Visiting 2nd domain](./examples/server-communication__visit-2nd-domain) | Visiting two different domains from two different tests and passing value from one test to another
-[Pass value between specs](./examples/server-communication__pass-value-between-specs) | Pass a value from spec to spec via the plugin file using [cy.task](https://on.cypress.io/task)
-[Stream test results](./examples/server-communication__stream-tests) | Streams each test result from the browser to the plugins to an external process via IPC
+[Pass value between specs](./examples/server-communication__pass-value-between-specs) | Pass a value from spec to spec via the `setupNodeEvents` function in the Cypress configuration using [cy.task](https://on.cypress.io/task)
+[Stream test results](./examples/server-communication__stream-tests) | Streams each test result from the browser to the `setupNodeEvents` function to an external process via IPC
 [Offline](./examples/server-communication__offline) | Test web application when the network is offline
 [Server timing](./examples/server-communication__server-timing) | Report server timing results from Cypress test
 [Wait for API](./examples/server-communication__wait-for-api) | Call the backend using `cy.request` until it responds
@@ -182,13 +184,13 @@ Recipe | Description
 npm install
 ```
 
-## Opening Cypress GUI
+## Opening Cypress App
 
 ```bash
 cd ./examples/testing-dom__drag-drop
 # start local server
 npm start &
-# and open Cypress GUI
+# open Cypress App
 npm run cypress:open
 ```
 

examples/blogs__a11y/README.md

@@ -2,10 +2,10 @@
 
 This demo shows the [cypress-axe](https://github.com/avanslaars/cypress-axe) plugin which can run the [Axe-core](https://github.com/dequelabs/axe-core) library against the webpage to check if the page follows accessibility practices.
 
-The tests are in [cypress/integration](cypress/integration) folder.
+The tests are in [cypress/e2e](cypress/e2e) folder.
 
-- The [passing-spec.js](cypress/integration/passing-spec.js) loads local [index.html](index.html) with high contrast text, which passes A11y checks
-- The [failing-spec.js](cypress/integration/failing-spec.js) loads local [index-bad.html](index-bad.html) with low contrast text, failing the checks
+- The [passing-spec.cy.js](cypress/e2e/passing-spec.cy.js) loads local [index.html](index.html) with high contrast text, which passes A11y checks
+- The [failing-spec.cy.js](cypress/e2e/failing-spec.cy.js) loads local [index-bad.html](index-bad.html) with low contrast text, failing the checks
 
 ![Failing check](images/failing.png)
 

examples/blogs__a11y/cypress.config.js

@@ -0,0 +1,3 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({})

examples/blogs__application-actions/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: false,
+  defaultCommandTimeout: 8000,
+  e2e: {
+    baseUrl: 'http://localhost:8888',
+    excludeSpecPattern: 'utils.js',
+  },
+})

examples/blogs__application-actions/cypress/integration/spec.js → examples/blogs__application-actions/cypress/e2e/spec.cy.js

@@ -10,7 +10,7 @@ import {
   TODO_ITEM_THREE,
   TODO_ITEM_TWO,
   toggle,
-} from './utils'
+} from './utils.cy'
 
 describe('TodoMVC', function () {
   beforeEach(function () {

examples/blogs__application-actions/package.json

@@ -17,8 +17,6 @@
     "test:ci": "../../node_modules/.bin/start-test 8888 cypress:run",
     "test:ci:chrome": "../../node_modules/.bin/start-test 8888 cypress:run:chrome",
     "test:ci:firefox": "../../node_modules/.bin/start-test 8888 cypress:run:firefox",
-    "test:ci:record": "../../node_modules/.bin/start-test 8888 cypress:run:record",
-    "test:ci:windows": "bin-up start-test start:win http://localhost:8888 cypress:run:win",
-    "test:ci:windows:record": "bin-up start-test start:win http://localhost:8888 cypress:run:win:record"
+    "test:ci:record": "../../node_modules/.bin/start-test 8888 cypress:run:record"
   }
 }

examples/blogs__assertion-counting/README.md

@@ -6,7 +6,7 @@ See the application in [index.html](index.html) that shows `window.confirm` on c
 
 ![Window confirm](images/confirm.gif)
 
-The [cypress/integration/spec.js](cypress/integration/spec.js) shows various ways the tests can ensure the async assertions finish before the test finishes. The last test shows how to use [cypress-expect-n-assertions](https://github.com/bahmutov/cypress-expect-n-assertions) to automatically wait for declared number of assertions to run before finishing the test.
+The [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) shows various ways the tests can ensure the async assertions finish before the test finishes. The last test shows how to use [cypress-expect-n-assertions](https://github.com/bahmutov/cypress-expect-n-assertions) to automatically wait for declared number of assertions to run before finishing the test.
 
 ```js
 import { plan } from 'cypress-expect-n-assertions'
@@ -26,6 +26,6 @@ it('waits for planned number of assertion to run', () => {
 
 ## Unhandled promise rejections
 
-If the application code creates an unhandled rejected promise, Cypress does NOT see it by default. If you want to fail the test, listen to the unhandled promise event and throw an error. See spec file [errors.js](cypress/integration/errors.js)
+If the application code creates an unhandled rejected promise, Cypress does NOT see it by default. If you want to fail the test, listen to the unhandled promise event and throw an error. See spec file [errors.cy.js](cypress/e2e/errors.cy.js)
 
 ![Fail the test when a promise is rejected and is not handled](./images/fail-test-on-unhandled-promise-rejection.gif)

examples/blogs__assertion-counting/cypress.config.js

@@ -0,0 +1,3 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({})

examples/blogs__class-decorator/README.md

@@ -16,7 +16,7 @@ export default class TodoItem extends Component {
 During the test, we can get to that component using `cy.window().its('TodoItem')` to check internal state or trigger component's methods.
 
 ```js
-// cypress/integration/spec.js
+// cypress/e2e/spec.cy.js
 it('creates Todo components', () => {
   cy.visit('/')
   cy.get('.new-todo')

examples/blogs__class-decorator/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    baseUrl: 'http://localhost:1234',
+    supportFile: false,
+  },
+})

examples/blogs__codepen-demo/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  chromeWebSecurity: false,
+  fixturesFolder: false,
+  e2e: {
+    supportFile: false,
+  },
+})

examples/blogs__dayjs/README.md

@@ -1,7 +1,7 @@
 # example: dayjs
 > Using the [day.js](https://day.js.org/en/) instead of the deprecated Cypress.moment
 
-You can install `day.js` as a regular NPM dependency and require or import it in your spec file. See [spec.js](cypress/integration/spec.js) for example:
+You can install `day.js` as a regular NPM dependency and require or import it in your spec file. See [spec.cy.js](cypress/e2e/spec.cy.js) for example:
 
 ```js
 const dayjs = require('dayjs')
@@ -11,7 +11,7 @@ const todaysDate = dayjs().format('MMM DD, YYYY')
 cy.contains('span', `Order shipped on: ${todaysDate}`)
 ```
 
-Alternatively, if many specs need the dayjs library, you can load it from the [support file](cypress/support/index.js) and set the reference as `Cypress.dayjs` to make the library available in every spec.
+Alternatively, if many specs need the dayjs library, you can load it from the [support file](cypress/support/e2e.js) and set the reference as `Cypress.dayjs` to make the library available in every spec.
 
 ```js
 // support file

examples/blogs__dayjs/cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: false,
+  viewportWidth: 500,
+  viewportHeight: 200,
+})

examples/blogs__dayjs/cypress/support/index.js → examples/blogs__dayjs/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

examples/blogs__direct-control-angular/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    baseUrl: 'http://todomvc.com/examples/angularjs',
+    supportFile: false,
+  },
+})

examples/blogs__e2e-api-testing/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    baseUrl: 'http://localhost:7081',
+    supportFile: false,
+  },
+})

examples/blogs__e2e-api-testing/package.json

@@ -11,8 +11,6 @@
     "start": "../../node_modules/.bin/json-server db.json --port 7081 --quiet",
     "start:windows": "bin-up json-server db.json --port 7081 --quiet",
     "test:ci": "../../node_modules/.bin/start-test 7081 cypress:run",
-    "test:ci:record": "../../node_modules/.bin/start-test 7081 cypress:run:record",
-    "test:ci:windows": "bin-up start-test start:windows 7081 cypress:run:windows",
-    "test:ci:windows:record": "bin-up start-test start:windows 7081 cypress:run:windows:record"
+    "test:ci:record": "../../node_modules/.bin/start-test 7081 cypress:run:record"
   }
 }

examples/blogs__e2e-snapshots/README.md

@@ -9,9 +9,9 @@ Adding snapshot support to Cypress via 3rd party module [@cypress/snapshot](http
 ## Lessons
 
 - Adding `.snapshot()` command by requiring 3rd party module [cypress/support/commands.js](cypress/support/commands.js)
-- Capturing and saving snapshots of primitive values [cypress/integration/unit-spec.js](cypress/integration/unit-spec.js)
-- Testing central data Vuex store using snapshots [cypress/integration/store-spec.js](cypress/integration/store-spec.js)
-- Making assertions against a DOM element using `cy.get('todo-list').snapshot()`  [cypress/integration/ui-spec.js](cypress/integration/ui-spec.js)
+- Capturing and saving snapshots of primitive values [cypress/e2e/unit-spec.cy.js](cypress/e2e/unit-spec.cy.js)
+- Testing central data Vuex store using snapshots [cypress/e2e/store-spec.cy.js](cypress/e2e/store-spec.cy.js)
+- Making assertions against a DOM element using `cy.get('todo-list').snapshot()`  [cypress/e2e/ui-spec.cy.js](cypress/e2e/ui-spec.cy.js)
 
 ## Development
 

examples/blogs__e2e-snapshots/cypress.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  video: false,
+  e2e: {
+    baseUrl: 'http://localhost:3700',
+    setupNodeEvents (on, config) {
+      // `on` is used to hook into various events Cypress emits
+      // `config` is the resolved Cypress config
+      on('task', {
+        failed: require('cypress-failed-log/src/failed')(),
+      })
+    },
+  },
+})