fix: scroll elements into view on both axes during actionability (#34108)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: mschile

cli/CHANGELOG.md

@@ -14,6 +14,7 @@
 - Fixed an issue where the [`userAgent`](https://on.cypress.io/configuration#Browser) configuration option was not applied when running tests in the experimental WebKit browser. Fixes [#33349](https://github.com/cypress-io/cypress/issues/33349).
 - Fixed an issue where, in the experimental WebKit browser, a request to focus the browser window was silently ignored, so the window could remain in the background. The active page is now correctly brought to the front. Addressed in [#34137](https://github.com/cypress-io/cypress/pull/34137).
 - Fixed an issue where opening an unconfigured project from a git repository sub-directory (such as a monorepo package) skipped project setup. Fixes [#27410](https://github.com/cypress-io/cypress/issues/27410) and [#29544](https://github.com/cypress-io/cypress/issues/29544).
+- Fixed an issue where interacting with an element inside a horizontally-scrollable container could scroll the element to the container's right edge, placing it underneath a right-floating `position: sticky` or `position: fixed` element and causing the action to fail or land on the wrong element. Elements are now scrolled to their top, leftmost point as documented. Fixes [#33884](https://github.com/cypress-io/cypress/issues/33884). Fixed in [#34108](https://github.com/cypress-io/cypress/pull/34108).
 
 ## 15.18.0
 

packages/driver/cypress/e2e/commands/actions/check.cy.ts

@@ -221,7 +221,7 @@ describe('src/cy/commands/actions/check', () => {
       cy.get(':checkbox:first').check({ scrollBehavior: 'bottom' })
 
       cy.get(':checkbox:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
       })
     })
 
@@ -246,7 +246,7 @@ describe('src/cy/commands/actions/check', () => {
       cy.get(':checkbox:first').check()
 
       cy.get(':checkbox:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
       })
     })
 
@@ -258,7 +258,7 @@ describe('src/cy/commands/actions/check', () => {
       cy.get(':checkbox:first').check()
 
       cy.get(':checkbox:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center', inline: 'center' })
       })
     })
 
@@ -270,7 +270,7 @@ describe('src/cy/commands/actions/check', () => {
       cy.get(':checkbox:first').check()
 
       cy.get(':checkbox:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest', inline: 'nearest' })
       })
     })
 
@@ -296,7 +296,7 @@ describe('src/cy/commands/actions/check', () => {
       cy.get(':checkbox:first').check()
 
       cy.get(':checkbox:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start', inline: 'start' })
       })
     })
 

packages/driver/cypress/e2e/commands/actions/clear.cy.ts

@@ -107,7 +107,7 @@ describe('src/cy/commands/actions/type - #clear', () => {
     cy.get('input:first').clear({ scrollBehavior: 'bottom' })
 
     cy.get('input:first').then((el) => {
-      expect(el[0].scrollIntoView).calledWith({ block: 'end' })
+      expect(el[0].scrollIntoView).calledWith({ block: 'end', inline: 'end' })
     })
   })
 
@@ -143,7 +143,7 @@ describe('src/cy/commands/actions/type - #clear', () => {
     cy.get('input:first').clear()
 
     cy.get('input:first').then((el) => {
-      expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start' })
+      expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start', inline: 'start' })
     })
   })
 

packages/driver/cypress/e2e/commands/actions/click.cy.ts

@@ -1259,7 +1259,7 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('input:first').click({ scrollBehavior: 'bottom' })
 
         cy.get('input:first').then((el) => {
-          expect(el[0].scrollIntoView).calledWith({ block: 'end' })
+          expect(el[0].scrollIntoView).calledWith({ block: 'end', inline: 'end' })
         })
       })
 
@@ -1283,7 +1283,7 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('input:first').click()
 
         cy.get('input:first').then((el) => {
-          expect(el[0].scrollIntoView).calledWith({ block: 'end' })
+          expect(el[0].scrollIntoView).calledWith({ block: 'end', inline: 'end' })
         })
       })
 
@@ -1295,7 +1295,7 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('input:first').click()
 
         cy.get('input:first').then((el) => {
-          expect(el[0].scrollIntoView).calledWith({ block: 'center' })
+          expect(el[0].scrollIntoView).calledWith({ block: 'center', inline: 'center' })
         })
       })
 
@@ -1307,7 +1307,7 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('input:first').click()
 
         cy.get('input:first').then((el) => {
-          expect(el[0].scrollIntoView).calledWith({ block: 'nearest' })
+          expect(el[0].scrollIntoView).calledWith({ block: 'nearest', inline: 'nearest' })
         })
       })
 
@@ -1331,7 +1331,63 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('input:first').click()
 
         cy.get('input:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start', inline: 'start' })
+        })
+      })
+
+      it('horizontally scrolls element to the leftmost point, away from a right-floating sticky element', () => {
+        cy.viewport(800, 400)
+
+        const $body = cy.$$('body')
+
+        $body.children().remove()
+
+        const $container = $('<div></div>')
+        .css({
+          width: '512px',
+          height: '128px',
+          overflowX: 'scroll',
+        })
+        .appendTo($body)
+
+        const $row = $('<div></div>')
+        .css({
+          width: '2048px',
+          height: '128px',
+          display: 'flex',
+        })
+        .appendTo($container)
+
+        // spacer pushing the target to the right of the container's viewport
+        $('<div></div>').css({ width: '512px', height: '128px' }).appendTo($row)
+
+        const $target = $('<div></div>')
+        .attr('id', 'target')
+        .css({ width: '128px', height: '128px', background: 'green' })
+        .appendTo($row)
+
+        $('<div></div>').css({ width: '512px', height: '128px' }).appendTo($row)
+
+        // a sticky element floating on the right edge of the scrollable container
+        $('<div></div>')
+        .attr('id', 'right-sticky')
+        .css({
+          position: 'sticky',
+          right: '0',
+          width: '256px',
+          height: '128px',
+          background: 'yellow',
+        })
+        .appendTo($row)
+
+        const clicked = cy.stub()
+
+        $target.on('click', clicked)
+
+        // with `inline: 'nearest'` the target would be scrolled under the
+        // right-sticky element and the click would never reach it
+        cy.get('#target').click().then(() => {
+          expect(clicked).to.be.calledOnce
         })
       })
 

packages/driver/cypress/e2e/commands/actions/selectFile.cy.ts

@@ -763,7 +763,7 @@ is being covered by another element:
         cy.get('#scroll').selectFile({ contents: '@foo' }, { scrollBehavior: 'bottom' })
 
         cy.get('#scroll').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
         })
       })
     })

packages/driver/cypress/e2e/commands/actions/trigger.cy.ts

@@ -608,7 +608,7 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover', { scrollBehavior: 'bottom' })
 
         cy.get('button:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
         })
       })
 
@@ -633,7 +633,7 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover')
 
         cy.get('button:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
         })
       })
 
@@ -645,7 +645,7 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover')
 
         cy.get('button:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center', inline: 'center' })
         })
       })
 
@@ -657,7 +657,7 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover')
 
         cy.get('button:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest', inline: 'nearest' })
         })
       })
 
@@ -683,7 +683,7 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover')
 
         cy.get('button:first').then((el) => {
-          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start' })
+          expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start', inline: 'start' })
         })
       })
 

packages/driver/cypress/e2e/commands/actions/type.cy.ts

@@ -378,7 +378,7 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo', { scrollBehavior: 'bottom' })
 
       cy.get(':text:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
       })
     })
 
@@ -402,7 +402,7 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo')
 
       cy.get(':text:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'end', inline: 'end' })
       })
     })
 
@@ -414,7 +414,7 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo')
 
       cy.get(':text:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'center', inline: 'center' })
       })
     })
 
@@ -426,7 +426,7 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo')
 
       cy.get(':text:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'nearest', inline: 'nearest' })
       })
     })
 
@@ -450,7 +450,7 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo')
 
       cy.get(':text:first').then((el) => {
-        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start' })
+        expect(el[0].scrollIntoView).to.be.calledWith({ block: 'start', inline: 'start' })
       })
     })
 

packages/driver/src/cy/actionability.ts

@@ -535,7 +535,8 @@ const verify = function (cy, $el, config, options, callbacks: VerifyCallbacks) {
           const removeScrollBehaviorFix = addScrollBehaviorFix($el)
 
           debug('scrollIntoView:', $el[0])
-          $el.get(0).scrollIntoView({ block: scrollBehavior })
+          // Mirror the scroll behavior onto both axes.
+          $el.get(0).scrollIntoView({ block: scrollBehavior, inline: scrollBehavior })
 
           removeScrollBehaviorFix()