cypress-io · chrisbreiding · Nov 2, 2021 · Oct 6, 2021 · Oct 11, 2021 · Oct 11, 2021
diff --git a/packages/driver/cypress/fixtures/sticky-header.html b/packages/driver/cypress/fixtures/sticky-header.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <div class="overlay-background" style="position: fixed; width: 300px">
+    <div class="sidepanel" style="position: absolute; height: 300px; overflow: auto;">
+      <header class="sticky-header" style="position: sticky; top: 0; left: 0; height: 40px; background-color: blue;">
+        sticky header
+      </header>
+      <div style="height: 500px">
+        <p>content to scroll to</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js
@@ -1090,6 +1090,26 @@ 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()
+      })
+
+      // https://github.com/cypress-io/cypress/issues/4233
+      it('allows users to pass in a custom scroll behavior', (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).contain('failed because this element is not visible')
+          expect(err.message).contain('it has CSS property: `position: fixed` and it\'s being covered by another element')
+          done()
+        })
+
+        cy.viewport(400, 400)
+        cy.visit('./fixtures/sticky-header.html')
+        cy.get('p').click({ scrollBehavior: 'top' })
+      })
+
       it('does not scroll when being forced', () => {
         const scrolled = []
 

diff --git a/packages/driver/src/cy/actionability.ts b/packages/driver/src/cy/actionability.ts
@@ -350,6 +350,35 @@ const verify = function (cy, $el, options, callbacks) {
     }
   }
 
+  const scrollElementIntoView = ($el, scrollBehaviorOption) => {
+    if (scrollBehaviorOption !== false) {
+      // scroll the element into view
+      const scrollBehavior = scrollBehaviorOptionsMap[scrollBehaviorOption]
+
+      const removeScrollBehaviorFix = addScrollBehaviorFix()
+
+      debug('scrollIntoView:', $el[0])
+      $el.get(0).scrollIntoView({ block: scrollBehavior })
+
+      removeScrollBehaviorFix()
+
+      if (onScroll) {
+        onScroll($el, 'element')
+      }
+    }
+  }
+
+  const scrollUntilVisible = ($el, scrollOptions) => {
+    try {
+      cy.ensureVisibility($el, _log)
+    } catch (err) {
+      if (!scrollOptions[0]) throw err
+
+      scrollElementIntoView($el, scrollOptions[0])
+      scrollUntilVisible($el, scrollOptions.slice(1))
+    }
+  }
+
   return Promise.try(() => {
     const coordsHistory = []
 
@@ -365,27 +394,21 @@ const verify = function (cy, $el, options, callbacks) {
           cy.ensureNotDisabled($el, _log)
         }
 
-        if (options.scrollBehavior !== false) {
-          // scroll the element into view
-          const scrollBehavior = scrollBehaviorOptionsMap[options.scrollBehavior]
-
-          const removeScrollBehaviorFix = addScrollBehaviorFix()
-
-          debug('scrollIntoView:', $el[0])
-          $el.get(0).scrollIntoView({ block: scrollBehavior })
+        scrollElementIntoView($el, options.scrollBehavior)
 
-          removeScrollBehaviorFix()
+        if (options.ensure.visibility) {
+          // if the user specified the scroll behavior explicitly, stick with that and don't try other scroll behaviors
+          if (options.userSetScrollBehavior) {
+            cy.ensureVisibility($el, _log)
+          } else {
+            // if not already visible, try remaining scroll behavior options
+            // https://github.com/cypress-io/cypress/issues/4233
+            const scrollOptions = Object.keys(scrollBehaviorOptionsMap).filter((option) => option !== options.scrollBehavior)
 
-          if (onScroll) {
-            onScroll($el, 'element')
+            scrollUntilVisible($el, scrollOptions)
           }
         }
 
-        // ensure its visible
-        if (options.ensure.visibility) {
-          cy.ensureVisibility($el, _log)
-        }
-
         if (options.ensure.notReadonly) {
           cy.ensureNotReadonly($el, _log)
         }

diff --git a/packages/driver/src/cy/commands/actions/click.ts b/packages/driver/src/cy/commands/actions/click.ts
@@ -172,7 +172,10 @@ export default (Commands, Cypress, cy, state, config) => {
       // properties like `total` and `_retries` are mutated by
       // $actionability.verify and retrying, but each click should
       // have its own full timeout
-      const individualOptions = { ... options }
+      const individualOptions = {
+        userSetScrollBehavior: userOptions.scrollBehavior !== undefined,
+        ...options,
+      }
 
       // must use callbacks here instead of .then()
       // because we're issuing the clicks synchronously