Merge branch 'develop' into 9.0-release

CONTRIBUTING.md

@@ -569,6 +569,8 @@ Independent packages are automatically released when code is merged into `master
   ![Select release for PR](https://user-images.githubusercontent.com/1271364/135139641-657015d6-2dca-42d4-a4fb-16478f61d63f.png)
 - Please check the "Allow edits from maintainers" checkbox when submitting your PR. This will make it easier for the maintainers to make minor adjustments, to help with tests or any other changes we may need.
 ![Allow edits from maintainers checkbox](https://user-images.githubusercontent.com/1271181/31393427-b3105d44-ada9-11e7-80f2-0dac51e3919e.png)
+- After the PR is approved, the original contributor can merge the PR (if the original contributor has access).
+- When you merge a PR into `develop`, select [**Squash and merge**](https://docs.github.com/en/github/collaborating-with-pull-requests/incorporating-changes-from-a-pull-request/about-pull-request-merges#squash-and-merge-your-pull-request-commits). This will squash all commits into a single commit. *The only exception to squashing is when converting files to another language and there is a clear commit history needed to maintain from the file conversion.*
 
 ### Dependencies
 

browser-versions.json

@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "96.0.4664.27",
+  "chrome:beta": "96.0.4664.35",
   "chrome:stable": "95.0.4638.69"
 }

npm/cypress-schematic/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/schematic-v1.5.3](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v1.5.2...@cypress/schematic-v1.5.3) (2021-10-29)
+
+
+### Bug Fixes
+
+* remove outdated registry link ([#18710](https://github.com/cypress-io/cypress/issues/18710)) ([e2a869d](https://github.com/cypress-io/cypress/commit/e2a869d2a984abb6703aec966dd9124ee693b8c1))
+
 # [@cypress/schematic-v1.5.2](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v1.5.1...@cypress/schematic-v1.5.2) (2021-10-29)
 
 

npm/react/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [@cypress/react-v5.10.2](https://github.com/cypress-io/cypress/compare/@cypress/react-v5.10.1...@cypress/react-v5.10.2) (2021-10-29)
+
+
+### Bug Fixes
+
+* Next.JS 12 components testing failing with ` TypeError: Cannot read property 'traceChild' of undefined` ([#18648](https://github.com/cypress-io/cypress/issues/18648)) ([cb0cbdf](https://github.com/cypress-io/cypress/commit/cb0cbdf4c35da09a7dedcc4563a242cb4748e994))
+* remove outdated registry link ([#18710](https://github.com/cypress-io/cypress/issues/18710)) ([e2a869d](https://github.com/cypress-io/cypress/commit/e2a869d2a984abb6703aec966dd9124ee693b8c1))
+* **cypress/react:** disable react-refresh for craco setups ([#18517](https://github.com/cypress-io/cypress/issues/18517)) ([ea10795](https://github.com/cypress-io/cypress/commit/ea1079559473fc672b5e0e188b5b54bf8ebe2f98))
+
 # [@cypress/react-v5.10.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v5.10.0...@cypress/react-v5.10.1) (2021-10-04)
 
 

npm/react/plugins/next/checkSWC.ts

@@ -0,0 +1,19 @@
+import type { Configuration } from 'webpack'
+
+export function checkSWC (
+  webpackConfig: Configuration,
+  cypressConfig: Cypress.Config,
+) {
+  const hasSWCLoader = webpackConfig.module?.rules.some((rule) => {
+    return rule.oneOf?.some(
+      (oneOf) => (oneOf.use as any)?.loader === 'next-swc-loader'
+    )
+  })
+
+  if (hasSWCLoader && cypressConfig.nodeVersion !== 'system') {
+    throw new Error(`Cypress requires "nodeVersion" to be set to "system" in order to run Next.js with SWC optimizations.
+Please add "nodeVersion": "system" to your Cypress configuration and try again.`)
+  }
+
+  return false
+}

npm/react/plugins/next/findNextWebpackConfig.js

@@ -4,6 +4,7 @@ const debug = require('debug')('@cypress/react')
 const getNextJsBaseWebpackConfig = require('next/dist/build/webpack-config').default
 const { findPagesDir } = require('../../dist/next/findPagesDir')
 const { getRunWebpackSpan } = require('../../dist/next/getRunWebpackSpan')
+const { checkSWC } = require('../../dist/next/checkSWC')
 
 async function getNextWebpackConfig (config) {
   let loadConfig
@@ -38,6 +39,8 @@ async function getNextWebpackConfig (config) {
 
   debug('resolved next.js webpack config %o', nextWebpackConfig)
 
+  checkSWC(nextWebpackConfig, config)
+
   return nextWebpackConfig
 }
 

npm/vue/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/vue-v3.0.4](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.3...@cypress/vue-v3.0.4) (2021-10-29)
+
+
+### Bug Fixes
+
+* remove outdated registry link ([#18710](https://github.com/cypress-io/cypress/issues/18710)) ([e2a869d](https://github.com/cypress-io/cypress/commit/e2a869d2a984abb6703aec966dd9124ee693b8c1))
+
 # [@cypress/vue-v3.0.3](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.2...@cypress/vue-v3.0.3) (2021-07-31)
 
 

packages/driver/cypress/fixtures/sticky-header.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <div class="overlay-background" style="position: fixed; width: 300px">
+    <div class="sidepanel" id="container" style="position: absolute; height: 300px; overflow: auto;">
+      <header class="sticky-header" style="position: sticky; top: 0; left: 0; height: 50px; background-color: blue;">
+        sticky header
+      </header>
+      <div style="height: 500px">
+        <p>content to scroll to</p>
+        <input type="text" value="input">
+        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
+      </div>
+    </div>
+  </div>
+</body>
+</html>

packages/driver/cypress/integration/commands/actions/check_spec.js

@@ -204,6 +204,42 @@ describe('src/cy/commands/actions/check', () => {
       })
     })
 
+    it('can specify scrollBehavior bottom in config', { scrollBehavior: 'bottom' }, () => {
+      cy.get(':checkbox:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':checkbox:first').check()
+
+      cy.get(':checkbox:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+      })
+    })
+
+    it('can specify scrollBehavior center in config', { scrollBehavior: 'center' }, () => {
+      cy.get(':checkbox:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':checkbox:first').check()
+
+      cy.get(':checkbox:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+      })
+    })
+
+    it('can specify scrollBehavior nearest in config', { scrollBehavior: 'nearest' }, () => {
+      cy.get(':checkbox:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':checkbox:first').check()
+
+      cy.get(':checkbox:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+      })
+    })
+
     it('does not scroll when scrollBehavior is false in config', { scrollBehavior: false }, () => {
       cy.get(':checkbox:first').scrollIntoView()
       cy.get(':checkbox:first').then((el) => {
@@ -230,6 +266,13 @@ describe('src/cy/commands/actions/check', () => {
       })
     })
 
+    // https://github.com/cypress-io/cypress/issues/4233
+    it('can check an element behind a sticky header', () => {
+      cy.viewport(400, 400)
+      cy.visit('./fixtures/sticky-header.html')
+      cy.get(':checkbox:first').check()
+    })
+
     it('waits until element is no longer disabled', () => {
       const chk = $(':checkbox:first').prop('disabled', true)
 

packages/driver/cypress/integration/commands/actions/clear_spec.js

@@ -124,6 +124,13 @@ describe('src/cy/commands/actions/type - #clear', () => {
     })
   })
 
+  // https://github.com/cypress-io/cypress/issues/4233
+  it('can scroll to an element behind a sticky header', () => {
+    cy.viewport(400, 400)
+    cy.visit('./fixtures/sticky-header.html')
+    cy.get('input:first').clear()
+  })
+
   // https://github.com/cypress-io/cypress/issues/5835
   it('can force clear when hidden in input', () => {
     const input = cy.$$('input:first')

packages/driver/cypress/integration/commands/actions/click_spec.js

@@ -1090,6 +1090,13 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('#overflow-auto-container').contains('quux').click()
       })
 
+      // https://github.com/cypress-io/cypress/issues/4233
+      it('can click an element behind a sticky header', () => {
+        cy.viewport(400, 400)
+        cy.visit('./fixtures/sticky-header.html')
+        cy.get('p').click()
+      })
+
       it('does not scroll when being forced', () => {
         const scrolled = []
 
@@ -1224,6 +1231,42 @@ describe('src/cy/commands/actions/click', () => {
         })
       })
 
+      it('can specify scrollBehavior bottom in config', { scrollBehavior: 'bottom' }, () => {
+        cy.get('input:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('input:first').click()
+
+        cy.get('input:first').then((el) => {
+          expect(el[0].scrollIntoView).calledWith({ block: 'end' })
+        })
+      })
+
+      it('can specify scrollBehavior center in config', { scrollBehavior: 'center' }, () => {
+        cy.get('input:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('input:first').click()
+
+        cy.get('input:first').then((el) => {
+          expect(el[0].scrollIntoView).calledWith({ block: 'center' })
+        })
+      })
+
+      it('can specify scrollBehavior nearest in config', { scrollBehavior: 'nearest' }, () => {
+        cy.get('input:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('input:first').click()
+
+        cy.get('input:first').then((el) => {
+          expect(el[0].scrollIntoView).calledWith({ block: 'nearest' })
+        })
+      })
+
       it('does not scroll when scrollBehavior is false in config', { scrollBehavior: false }, () => {
         cy.get('input:first').then((el) => {
           cy.spy(el[0], 'scrollIntoView')
@@ -2155,7 +2198,8 @@ describe('src/cy/commands/actions/click', () => {
         cy.on('fail', (err) => {
           expect(this.logs.length).eq(2)
           expect(err.message).not.to.contain('CSS property: `opacity: 0`')
-          expect(err.message).to.contain('`cy.click()` failed because this element is not visible')
+          expect(err.message).to.contain('`cy.click()` failed because this element')
+          expect(err.message).to.contain('is being covered by another element')
 
           done()
         })
@@ -2282,17 +2326,10 @@ describe('src/cy/commands/actions/click', () => {
           expect(lastLog.get('snapshots')[0].name).to.eq('before')
           expect(lastLog.get('snapshots')[1]).to.be.an('object')
           expect(lastLog.get('snapshots')[1].name).to.eq('after')
-          expect(err.message).to.include('`cy.click()` failed because this element is not visible:')
-          expect(err.message).to.include('>button ...</button>')
-          expect(err.message).to.include('`<button#button-covered-in-span>` is not visible because it has CSS property: `position: fixed` and it\'s being covered')
-          expect(err.message).to.include('>span on...</span>')
+          expect(err.message).to.include('`cy.click()` failed because this element:')
+          expect(err.message).to.include('is being covered by another element:')
           expect(err.docsUrl).to.eq('https://on.cypress.io/element-cannot-be-interacted-with')
 
-          const console = lastLog.invoke('consoleProps')
-
-          expect(console['Tried to Click']).to.be.undefined
-          expect(console['But its Covered By']).to.be.undefined
-
           done()
         })
 

packages/driver/cypress/integration/commands/actions/trigger_spec.js

@@ -654,6 +654,42 @@ describe('src/cy/commands/actions/trigger', () => {
         })
       })
 
+      it('can specify scrollBehavior bottom in config', { scrollBehavior: 'bottom' }, () => {
+        cy.get('button:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('button:first').trigger('mouseover')
+
+        cy.get('button:first').then((el) => {
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+        })
+      })
+
+      it('can specify scrollBehavior center in config', { scrollBehavior: 'center' }, () => {
+        cy.get('button:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('button:first').trigger('mouseover')
+
+        cy.get('button:first').then((el) => {
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+        })
+      })
+
+      it('can specify scrollBehavior nearest in config', { scrollBehavior: 'nearest' }, () => {
+        cy.get('button:first').then((el) => {
+          cy.spy(el[0], 'scrollIntoView')
+        })
+
+        cy.get('button:first').trigger('mouseover')
+
+        cy.get('button:first').then((el) => {
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+        })
+      })
+
       it('does not scroll when scrollBehavior is false in config', { scrollBehavior: false }, () => {
         cy.scrollTo('top')
         cy.get('button:first').then((el) => {
@@ -680,6 +716,13 @@ describe('src/cy/commands/actions/trigger', () => {
         })
       })
 
+      // https://github.com/cypress-io/cypress/issues/4233
+      it('can check an element behind a sticky header', () => {
+        cy.viewport(400, 400)
+        cy.visit('./fixtures/sticky-header.html')
+        cy.get('p').trigger('mouseover')
+      })
+
       it('errors when scrollBehavior is false and element is out of view and is clicked', (done) => {
         cy.scrollTo('top')
 
@@ -1046,7 +1089,8 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.on('fail', (err) => {
           expect(this.logs.length).eq(2)
           expect(err.message).not.to.contain('CSS property: `opacity: 0`')
-          expect(err.message).to.contain('`cy.trigger()` failed because this element is not visible')
+          expect(err.message).to.contain('`cy.trigger()` failed because this element')
+          expect(err.message).to.contain('is being covered by another element')
 
           done()
         })

packages/driver/cypress/integration/commands/actions/type_spec.js

@@ -408,6 +408,42 @@ describe('src/cy/commands/actions/type - #type', () => {
       })
     })
 
+    it('can specify scrollBehavior bottom in config', { scrollBehavior: 'bottom' }, () => {
+      cy.get(':text:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':text:first').type('foo')
+
+      cy.get(':text:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+      })
+    })
+
+    it('can specify scrollBehavior center in config', { scrollBehavior: 'center' }, () => {
+      cy.get(':text:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':text:first').type('foo')
+
+      cy.get(':text:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+      })
+    })
+
+    it('can specify scrollBehavior nearest in config', { scrollBehavior: 'nearest' }, () => {
+      cy.get(':text:first').then((el) => {
+        cy.spy(el[0], 'scrollIntoView')
+      })
+
+      cy.get(':text:first').type('foo')
+
+      cy.get(':text:first').then((el) => {
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+      })
+    })
+
     it('does not scroll when scrollBehavior is false in config', { scrollBehavior: false }, () => {
       cy.get(':text:first').then((el) => {
         cy.spy(el[0], 'scrollIntoView')
@@ -432,6 +468,13 @@ describe('src/cy/commands/actions/type - #type', () => {
       })
     })
 
+    // https://github.com/cypress-io/cypress/issues/4233
+    it('can scroll to an element behind a sticky header', () => {
+      cy.viewport(400, 400)
+      cy.visit('./fixtures/sticky-header.html')
+      cy.get('input:first').type('foo')
+    })
+
     it('errors when scrollBehavior is false and element is out of view and is clicked', (done) => {
       cy.on('fail', (err) => {
         expect(err.message).to.include('`cy.type()` failed because the center of this element is hidden from view')