From db6b00d8cac4b9629fe6c41df1d08e2aac7dffe4 Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Mon, 15 Mar 2021 14:56:58 -0400 Subject: [PATCH 1/3] fix actionability when element has scroll-behavior: smooth (#15453) --- .../commands/actions/click_spec.js | 18 +++++++++++ packages/driver/src/cy/actionability.js | 32 ++++++++++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js index faf344fab1e7..634023a705ab 100644 --- a/packages/driver/cypress/integration/commands/actions/click_spec.js +++ b/packages/driver/cypress/integration/commands/actions/click_spec.js @@ -1607,6 +1607,24 @@ describe('src/cy/commands/actions/click', () => { expect(args[2]).to.eq(animationDistanceThreshold) }) }) + + describe('scroll-behavior', () => { + afterEach(() => { + cy.get('html').invoke('css', 'scrollBehavior', 'inherit') + }) + + // https://github.com/cypress-io/cypress/issues/3200 + it('can scroll to and click elements in html with scroll-behavior: smooth', () => { + cy.get('html').invoke('css', 'scrollBehavior', 'smooth') + cy.get('#table tr:first').click() + }) + + // https://github.com/cypress-io/cypress/issues/3200 + it('can scroll to and click elements in ancestor element with scroll-behavior: smooth', () => { + cy.get('#dom').invoke('css', 'scrollBehavior', 'smooth') + cy.get('#table tr:first').click() + }) + }) }) describe('assertion verification', () => { diff --git a/packages/driver/src/cy/actionability.js b/packages/driver/src/cy/actionability.js index 6123af226787..da4dd01f4c7c 100644 --- a/packages/driver/src/cy/actionability.js +++ b/packages/driver/src/cy/actionability.js @@ -309,6 +309,32 @@ const verify = function (cy, $el, options, callbacks) { } } + // scroll-behavior: smooth delays scrolling and causes the actionability + // check to fail, so the only solution is to remove the behavior and + // make scrolling occur instantly. we do this by adding a style tag + // and then removing it after we finish scrolling + // https://github.com/cypress-io/cypress/issues/3200 + const addScrollBehaviorFix = () => { + let style + + try { + const doc = $el.get(0).ownerDocument + + style = doc.createElement('style') + style.innerHTML = '* { scroll-behavior: inherit !important; }' + // there's guaranteed to be a