Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.scrollIntoView() and .click() failures: "The action target (<html node>) is located outside the layout viewport." #8371

Open
di5ko opened this issue Feb 3, 2025 · 1 comment
Open

.scrollIntoView() and .click() failures: "The action target (<html node>) is located outside the layout viewport." #8371

di5ko opened this issue Feb 3, 2025 · 1 comment
Labels
STATE: Need clarification An issue lacks information for further research. TYPE: bug The described behavior is considered as wrong (bug).

Comments

@di5ko
Copy link

di5ko commented Feb 3, 2025 •
edited
Loading

What is your Scenario?

I'm experiencing intermittent test failures with .click and .scrollIntoView actions. Many test runs are fine, but once these failures start to get going in a test run, I'm experiencing multiple (in various tests).

The .click actions are clicking a <a> link which is slightly below the viewport.

The .scrollIntoView action is included in a test to scroll down to a specific paragraph in a long text document. This one surprises me the most, since this API method is specifically used to scroll the webpage until the element is in the viewport.

What is the Current behavior?

Tests intermittently failing.

What is the Expected behavior?

Tests always passing. When an element is out of view, I expect the page to automatically scroll to the target element before interacting with it, as stated on https://testcafe.io/documentation/403067/reference/test-api/testcontroller/scrollintoview.

What is the public URL of the test page? (attach your complete example)

Not public.

What is your TestCafe test code?

I also wrote a custom function to scroll a selector into view before clicking it, but also this intermittently fails on the .scrollIntoView action:

export async function scrollToElementAndClick(selector, clickOptions = {}) {
    // Scroll to the element so that it is visible in the viewport
    const boundingBox  = selector.boundingClientRect;
    const scrollX      = Math.round(boundingBox.left);
    const scrollY      = Math.round(boundingBox.bottom - 200);

    await t.scroll(scrollX, scrollY);
    await t.scrollIntoView(selector, { offsetX: 1, offsetY: 1 });

    // Click the element
    await t.click(selector, clickOptions);
}

 1) The action target (<a _ngcontent-hmp-c86="" class="list-item-title" href="#/doc?url=/collections/et/pdf/et019904.pdf">...</a>) is located outside the
      the layout viewport.

      Browser: Chrome 132.0.0.0 / macOS 10.15.7

         164 |    const boundingBox  = selector.boundingClientRect;
         165 |    const scrollX      = Math.round(boundingBox.left);
         166 |    const scrollY      = Math.round(boundingBox.bottom - 200);
         167 |
         168 |    await t.scroll(scrollX, scrollY);
       > 169 |    await t.scrollIntoView(selector, { offsetX: 1, offsetY: 1 });
         170 |
         171 |    // Click the element
         172 |    await t.click(selector, clickOptions);
         173 |}

Your complete configuration file

No response

Your complete test report

✖ T001 - Open the 'European VAT' article and check UI elements (23s)

   1) The action target (<p>...</p>) is located outside the the layout viewport.

      Browser: Chrome 132.0.0.0 / macOS 10.15.7

         65 |        .notOk("the 'Scroll to top' button should not exist", { timeout: 50 })
         66 |        .expect(targetHeading.exists)
         67 |        .ok("a document heading with text '0.2.' should exist")
         68 |        .expect(targetParagraph.exists)
         69 |        .ok("a document paragraph with text '7. According to the preamble to the first Council Directive' should exist")
       > 70 |        .scrollIntoView(targetParagraph);

Screenshots

No response

Steps to Reproduce

  1. Implement test with .scrollIntoView and .click actions
  2. Run test multiple times
  3. Wait for test to fail

TestCafe version

3.7.0

Node.js version

v23.6.1

Command-line arguments

npx testcafe chrome:headless tests/test.js

Browser name(s) and version(s)

Chrome 132.0.0.0

Platform(s) and version(s)

macOS 10.15.7

Other

No response
@di5ko di5ko added the TYPE: bug The described behavior is considered as wrong (bug). label Feb 3, 2025
@testcafe-need-response-bot testcafe-need-response-bot bot added the STATE: Need response An issue that requires a response or attention from the team. label Feb 3, 2025
@aleks-pro aleks-pro added the STATE: Need simple sample A simple sample is required to examine the issue. label Feb 6, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 6, 2025

Thank you for submitting a bug report. We would love to help you investigate the issue. Please share a simple code example that reliably reproduces the bug. For more information, read the following article: How To Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

@github-actions github-actions bot added STATE: Need clarification An issue lacks information for further research. and removed STATE: Need response An issue that requires a response or attention from the team. STATE: Need simple sample A simple sample is required to examine the issue. labels Feb 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
STATE: Need clarification An issue lacks information for further research. TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@di5ko @aleks-pro