Bump to Cypress v12 (#135)

* upgrade Cypress to v12

* bump cypress github action versions

* update a few more specs for v12

* fix a few more tests

* fix more tests

* remove trailing slash for JS

* fix more errors

* fix more errors

* fix more examples

* two more fixes

Author: bahmutov

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       #   ~/.npm
       #   ~/.cache/Cypress
       - name: Install 📦
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           runTests: false
 
@@ -65,7 +65,7 @@ jobs:
           name: built
 
       - name: Install 📦
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           runTests: false
 
@@ -97,7 +97,7 @@ jobs:
       # download cached ~/.npm and ~/.cache/Cypress
       # and install node_modules
       - name: Cypress tests 🧪
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         # run all tests straight from Markdown files
         # using Cypress GH action
         # https://github.com/cypress-io/github-action
@@ -147,7 +147,7 @@ jobs:
           name: built
 
       - name: Test built site 🧪
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           start: npm run serve
           config-file: cypress-dist.json
@@ -179,7 +179,7 @@ jobs:
           name: built
 
       - name: Install 📦
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           runTests: false
 

.github/workflows/deployed.yml

@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Install dependencies 📦
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           # just perform install
           runTests: false
@@ -56,7 +56,7 @@ jobs:
         run: cat docs/**/*.js > docs/run-all-specs.js
 
       - name: Test deployed site 🧪💨
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           # we have already installed all dependencies above
           install: false

.github/workflows/scrape.yml

@@ -19,7 +19,7 @@ jobs:
           persist-credentials: false
 
       - name: Install dependencies 📦
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           # just perform install
           runTests: false

cypress.config.js

@@ -0,0 +1,30 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: 'cypress/fixtures',
+  viewportHeight: 1000,
+  viewportWidth: 600,
+  env: {
+    'cypress-fiddle': {
+      stylesheets: [
+        'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
+      ],
+      style:
+        'body { padding: 2rem; } .action-focus.focus { border: 5px solid orange; } .hidden { display: none !important; }',
+    },
+    'cypress-book': {
+      imageFolder: './pics',
+      tolerance: 0.02,
+    },
+  },
+  projectId: 'dis6wg',
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./plugins.js')(on, config)
+    },
+    specPattern: 'docs/**/*.md',
+  },
+})

cypress.json

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

cypress/fixtures/example.json

@@ -140,15 +140,16 @@ cy.get('[data-cy=query-the-alias]').within(() => {
 
 ```js
 // Alias the route to wait for its response
-cy.server()
-cy.route('GET', 'comments/*').as('getComment')
+cy.intercept('GET', 'comments/*').as('getComment')
 
 // we have code that gets a comment when
 // the button is clicked in scripts.js
 cy.get('.network-btn').click()
 
 // https://on.cypress.io/wait
-cy.wait('@getComment').its('status').should('eq', 200)
+cy.wait('@getComment')
+  .its('response.statusCode')
+  .should('eq', 200)
 ```
 
 <!-- fiddle-end -->

cypress/support/index.js renamed to cypress/support/e2e.js

@@ -1870,15 +1870,14 @@ This is especially useful when dealing with dimensions of elements on the page,
 
 ```html
 <div id="font-size-example">This is my message</div>
-<style></style>
 ```
 
 ```js
 cy.get('#font-size-example')
   .invoke('css', 'fontSize')
-  .then(cy.log)
+  .should('be.a', 'string')
   // the font size returned is in pixels, like "16px"
-  .should('match', /^\d+px$/)
+  .and('match', /^\d+px$/)
   .invoke('replace', 'px', '')
   .then(Number)
   .should('be.closeTo', 16, 1)

docs/commands/aliasing.md

@@ -32,22 +32,26 @@ To load a fixture, use the `cy.fixture()` command.
 ```js
 // Instead of writing a response inline you can
 // use a fixture file's content.
+cy.fixture('example.json').then((comment) => {
+  cy.intercept('GET', 'comments/*', comment).as('getComment')
+})
+```
 
-cy.server()
-cy.fixture('example.json').as('comment')
-cy.route('GET', 'comments/*', '@comment').as('getComment')
+We have code that gets a comment when the button is clicked in `scripts.js`
 
-// we have code that gets a comment when
-// the button is clicked in scripts.js
+```js
 cy.get('.fixture-btn').click()
 
 cy.wait('@getComment')
-  .its('responseBody')
+  .its('response.body')
   .should('have.property', 'name')
   .and('include', 'Using fixtures to represent data')
+```
+
+You can also just write the fixture in the route
 
-// you can also just write the fixture in the route
-cy.route('GET', 'comments', 'fixture:example.json').as(
+```js
+cy.intercept('GET', 'comments', { fixture: 'example.json' }).as(
   'getComment',
 )
 
@@ -56,20 +60,7 @@ cy.route('GET', 'comments', 'fixture:example.json').as(
 cy.get('.fixture-btn').click()
 
 cy.wait('@getComment')
-  .its('responseBody')
-  .should('have.property', 'name')
-  .and('include', 'Using fixtures to represent data')
-
-// or write fx to represent fixture
-// by default it assumes it's .json
-cy.route('GET', 'comments', 'fx:example').as('getComment')
-
-// we have code that gets a comment when
-// the button is clicked in scripts.js
-cy.get('.fixture-btn').click()
-
-cy.wait('@getComment')
-  .its('responseBody')
+  .its('response.body')
   .should('have.property', 'name')
   .and('include', 'Using fixtures to represent data')
 ```
@@ -107,23 +98,23 @@ To read a file's content, use the `cy.readFile()` command.
 ```js
 // You can read a file and yield its contents
 // The filePath is relative to your project's root.
-cy.readFile('cypress.json').then((json) => {
+cy.readFile('cypress/fixtures/example.json').then((json) => {
   expect(json, 'parsed json').to.be.an('object')
 })
 ```
 
 JSON files are automatically parsed, so if you want the raw text, you need to convert it back. For example, you can go through a `Cypress.Buffer`
 
 ```js
-cy.readFile('cypress.json', null)
+cy.readFile('cypress/fixtures/example.json', null)
   .invoke('toString')
   .should('be.a', 'string')
 ```
 
 Or by convert the object to a JSON string
 
 ```js
-cy.readFile('cypress.json')
+cy.readFile('cypress/fixtures/example.json')
   .then(JSON.stringify)
   .should('be.a', 'string')
 ```

docs/commands/assertions.md

@@ -42,10 +42,17 @@ Let's say we want to print to the Command Log the number of elements the previou
 cy.get('#log-fruits li')
   // you can add assertions to make sure the list is populated
   .its('length')
-  // prints just the number
-  .then(cy.log)
+  // prints just the number,
+  // must be careful to yield the value to the next command
+  .then((x) => {
+    cy.log(x)
+    cy.wrap(x, { log: false })
+  })
   // if you want to add a message, use a callback function
-  .then((n) => cy.log(`found ${n} items`))
+  .then((n) => {
+    cy.log(`found ${n} items`)
+    cy.wrap(n, { log: false })
+  })
   // because cy.log never changes the current subject
   // we can confirm the found number of elements by adding an assertion
   .should('equal', 5)
@@ -59,18 +66,21 @@ cy.get('#log-fruits li')
   .filter(':contains("Grape")')
   .its('length')
   // if you want to add a message, use a callback function
-  .then((n) => cy.log(`found ${n} fruits with "Grape" in them`))
+  .then((n) => {
+    cy.log(`found ${n} fruits with "Grape" in them`)
+    cy.wrap(n, { log: false })
+  })
   // confirm the number of elements
   .should('equal', 2)
 ```
 
 <!-- fiddle-end -->
 
-### cy.log yields the original argument
+### cy.log does not yield the original argument
 
-Because `cy.log` yields `undefined`, Cypress will yield the original argument to the next command or assertion. For example, let's print the element's node name and then confirm its value.
+Because `cy.log` yields `null`, Cypress will NOT yield the original argument to the next command or assertion. Thus you need to wrap the original value.
 
-<!-- fiddle .log() / yields the original argument -->
+<!-- fiddle .log() / does not yield the original argument -->
 
 ```html
 <button name="log-me">Submit</button>
@@ -82,9 +92,9 @@ cy.get('[name=log-me]')
   // of that HTML prop
   .should('have.prop', 'nodeName')
   // prints the nodeName value to the Command Log
-  // and yields it to the next step
+  // and yields NULL to the next step
   .then(cy.log)
-  .should('equal', 'BUTTON')
+  .should('equal', null)
 ```
 
 <!-- fiddle-end -->
@@ -227,9 +237,9 @@ cy.exec('echo Jane Lane')
   .should('contain', 'Jane Lane')
 
 if (Cypress.platform === 'win32') {
-  cy.exec('print cypress.json').its('stderr').should('be.empty')
+  cy.exec('print renovate.json').its('stderr').should('be.empty')
 } else {
-  cy.exec('cat cypress.json').its('stderr').should('be.empty')
+  cy.exec('cat renovate.json').its('stderr').should('be.empty')
 
   cy.exec('pwd').its('code').should('eq', 0)
 }

docs/commands/files.md

@@ -8,7 +8,7 @@ _Deprecated_ in Cypress v6
 
 To control the behavior of network requests and responses, use the `cy.server()` command.
 
-<!-- fiddle cy.server() - control behavior of network requests and responses -->
+<!-- fiddle.skip cy.server() - control behavior of network requests and responses -->
 
 ```js
 // https://on.cypress.io/server
@@ -245,7 +245,7 @@ _Deprecated_ in Cypress v6
 
 To route responses to matching requests, use the `cy.route()` command.
 
-<!-- fiddle cy.route() - route responses to matching requests -->
+<!-- fiddle.skip cy.route() - route responses to matching requests -->
 <!-- fiddle-markup
 <style>
 .network-route-btn,

docs/commands/misc.md

@@ -317,11 +317,9 @@ In the HTML below all links have the class "help", but some links have the class
 ```js
 cy.get('a.help:not(.external)')
   .should('have.length', 2)
-  .within(() => {
-    // confirm the two found elements
-    cy.root().eq(0).should('have.text', 'Article 2')
-    cy.root().eq(1).should('have.text', 'index')
-  })
+  // confirm the two found elements
+  .then(($el) => Cypress._.map($el, 'innerText'))
+  .should('deep.equal', ['Article 2', 'index'])
 ```
 
 <!-- fiddle-end -->
@@ -1394,9 +1392,9 @@ cy.get('picture').within(() => {
 
 ### Within works with multiple elements
 
-The parent command can yield multiple elements.
+The command `cy.within` requires the parent subject to be a single element.
 
-<!-- fiddle .within / multiple elements -->
+<!-- fiddle.skip .within / multiple elements -->
 
 ```html
 <ul id="fruits">
@@ -1406,19 +1404,13 @@ The parent command can yield multiple elements.
 ```
 
 ```js
-cy.get('#fruits li').within(() => {
-  cy.root().should('have.length', 2) // there are 2 LI items
-  cy.contains('a', 'Apples').should(
-    'have.attr',
-    'href',
-    '/apples',
-  )
-  cy.contains('a', 'Oranges').should(
-    'have.attr',
-    'href',
-    '/oranges',
-  )
-})
+cy.get('#fruits li')
+  .should('have.length', 2) // there are 2 LI items
+  // 🚨 NOT GOING TO WORK
+  // "Your subject contained 2 elements"
+  .within(() => {
+    // Nope, not going to get here
+  })
 ```
 
 <!-- fiddle-end -->