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

di5ko · 2025-02-03T12:20:26Z

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

Implement test with .scrollIntoView and .click actions
Run test multiple times
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

The text was updated successfully, but these errors were encountered:

di5ko added the TYPE: bug The described behavior is considered as wrong (bug). label Feb 3, 2025

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

di5ko commented Feb 3, 2025 •

edited

Loading

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

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

Comments

di5ko commented Feb 3, 2025 • edited Loading

What is your Scenario?

What is the Current behavior?

What is the Expected behavior?

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

What is your TestCafe test code?

Your complete configuration file

Your complete test report

Screenshots

Steps to Reproduce

TestCafe version

Node.js version

Command-line arguments

Browser name(s) and version(s)

Platform(s) and version(s)

Other

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

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

di5ko commented Feb 3, 2025 •

edited

Loading