Testcafe: Unable to click an element as it does not scroll above the webpage footer

[srijitdas8]

Are you requesting a feature or reporting a bug?

Bug

What is the current behavior?

The webpage under test has a footer and the button to be clicked scrolls and comes behind the footer. Due to this, testcafe is unable to click on the button and the script fails.
Workaround used: Tried to use a client function with “ScrollBy” function. This works inconsistently. Works in one environment but does not work on another test environment

What is the expected behavior?

The button scrolls up automatically into the browser viewport above the webpages footer and testcafe is able to click the button

How would you reproduce the current behavior (if this is a bug)?

Since I am unable to share our application under test in our test environment. testcafe script with an sample website with similar footer and similar issue is provided below.

Provide the test code and the tested page URL (if applicable)

Attached testcafe script has the details
Tested page URL:

Test code

===================================
Testcafe sample code:

import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Automation Testing Started...`

.page `https://www.fwd.com.sg`;


  const browserscroll = ClientFunction(function() {
    //  window.scrollBy(0, 100);
    window.scrollBy(0,1000)

      //document.scrollIntoView(true)
  })

test('Test', async t => {

  await t.maximizeWindow();
  await browserscroll();
  //await t.wait(5000);
    await t.click("body > nav:nth-child(2) > div.nav-container.top-nav.container-fluid > div.navbar-collapse.collapse > div > button");
    await t.click("#productListModalWrapper > div > div > div > ul > li:nth-child(2) > div.frame-container > svg");
    await t.click("#quickquestions > form > div:nth-child(1) > div:nth-child(2) > div > div.input-group__input > i");
    await t.click("#app > div.menu__content.menu__content--select.menu__content--auto.menuable__content__active > div > ul > li:nth-child(1) > a > div");
    await t.click("#TI_GetQuotepage_Next_1");
    await t.click("#TI_GetQuotepage_Promo_Skip");
    await t.click("#TI_QuoteSummarypage_Premium_Buy_Bottom");
    await t.click("#TI_BuyEnhacements_Continue_Yes"); // FAILS TO CLICK THIS BUTTON AS IT APPEARS BEHIND THE FOOTER
    await t.click("#coverage-list > ul > li:nth-child(4) > section > div.coverage__checkbox > div > div.input-group__input > div");
    await t.click("#TI_BuyEnhacements_Next_Submit");
    await t.typeText("#holder-form > div:nth-child(7) > div.flex.spinner-input.xs12.sm7 > input", "100060");
    await t.click("#traveller-details > div > div.consent > div.consent__checkbox > div > div.input-group__input > div");

})

===================================

Specify your

• operating system: Windows 10 pro
• testcafe version: 0.19.2 and 0.20.0
• node.js version: 8.11.2
  *Browser version: 67.0.3396.99 (Official Build) (64-bit)
  *NPM: 5.6.0

[AndreyBelym]

Hi @srijitdas8, I've reproduced the problem.

[srijitdas8]

Hi Guys....Any luck with the issue. Appreciate your help...Thanks

[AndreyBelym]

Hi @srijitdas8, I'm working on this.

[AlexKamaev]

Hi @srijitdas8
We've optimized the scrolling mechanism in context of https://github.com/DevExpress/testcafe/issues/2450 . It should also fix the current issue. Could you please check the issue with the latest (0.21.1) testcafe version?

[edenadler]

Hi @AlexKamaev and @AndreyBelym, since upgrading from version 0.20.5 to 0.21.1 I suddenly started experiencing the same issue as #2450. This seems to be a new issue as of the newer versions, because on version 0.20.5 this was not a problem. In 0.20.5, it would scroll to avoid the fixed element, but I don't see that same scrolling behavior happening in 0.21.1.

[AlexKamaev]

Hi @edenadler
Would you please share your test page and test file? Could you also clarify in which browser you can reproduce the issue?

[edenadler]

Hi @AlexKamaev. I'm not able to share the test page and file, but I found a solution to the problem. The problem was that it is only scrolling horizontally but not vertically. I can submit a pull request for it. Since #2450 is already closed, let me know what ID I should submit it with.

[AlexKamaev]

I'm happy to hear that you solved the issue. If you think that it was connected to #2450, you can submit your PR with its ID. I'll take a look at your PR and review it; otherwise, you are free to open a separate issue and post it there.

[edenadler]

@AlexKamaev PR submitted https://github.com/DevExpress/testcafe/pull/2812

[AlexKamaev]

Thanks, I'll take a look

[AlexKamaev]

I've reviewed the PR and found that you toggle scrollDirection on every step of the cycle. However, the idea of the algorithm is to move horizontally from the left to the right and try to detect that the element is visible. If the element is not visible on the whole horizontal line, then the algorithm increases the vertical margin and so on.
If you cannot share a real page of your project, could you please provide us with a simple example based on your real page to demonstrate the issue?

[AlexKamaev]

I'm closing this since there was no activity here for a long time. Feel free to reopen the issue if it's still actual.

[juliusgonawan]

any update for this issue? i don't think it's solve. I face the same issue

[AlexKamaev]

@juliusgonawan Could you please clarify what TestCafe version you are using? If you can reproduce the issue with the latest version, could you share your test project and code?

[eaorak]

We are also experiencing a similar issue. Tests started failing after we introduced a sticky footer.

When I run tests in UI mode and scroll manually when it reaches to the end of screen size, tests are working fine. But without the manual scrolling and in headless mode, it doesn't scroll after filling first elements appear on the screen and tests start failing.

Version: 0.23.1

[VasilyStrelyaev]

@eaorak, could you please provide an example of a webpage and test code I could use to reproduce this behavior.

I've tried testing a random website with a sticky footer with TestCafe v0.23.2. When I run my test in the UI mode, TestCafe seems to scroll to an element behind the footer automatically, I didn't have to scroll manually within a client function.

As to the headless mode, I haven't found good content that would allow me to ensure that TestCafe scrolls down correctly and clicks the correct element.

So, it would be of great help if you send a reproducible example.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[eaorak]

@VasilyStrelyaev because it's a private web app we're building for a client, unfortunately, I won't be able to share a public website. But it's a React application and we're using React Bootstrap components to create the sticky footer as with other components.

For now, we've overcome the issue by increasing the viewport size with

t.resizeWindow(1200, 3000)

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[jeremycy]

I am having similar issue here - clientFunction scrollby does not work for me, but I can get by from doing either resizeWindow or call hover with offset but should not be the permanent solution though.

[tbcoyle]

We are also experiencing a similar issue and have included an example file with a test below:

example.txt

test('Unable to click element subsumed by fixed footer', async (t) => {
    await t
        .resizeWindow(1500, 1000)
        .click('#food-select')
        .click('#food-select option:nth-child(2)')
        .click('#vehicle-select')
        .click('#vehicle-select option:nth-child(2)');
});

Specify your

• operating system: Windows 10
• testcafe version: 1.1.0
• node.js version: 10.11.0
• browser version: 75.0.3770.80 (Official Build) (64-bit)

Happy to provide additional information if helpful.

[AlexKamaev]

@tbcoyle
I was not able to reproduce the issue in your example in Chrome, but I managed to reproduce it in Firefox. I'll reopen the issue for further research.
I greatly appreciate your providing the sample.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[tbcoyle]

@AlexKamaev

Thank you for investigating. It is odd that the issue seems to be reproducible only in Firefox, as I am using Chrome. Perhaps there is an issue with my example file.

Please see below another example on a live site (note - I am running with "skipJsErrors": true):

import {Selector as $} from 'testcafe';

fixture`Testcafe 2601`
    .page`https://www.kcrw.com`;

test('Case A - Click fails - target element is within window but fully subsumed by fixed footer', async (t) => {
    const TARGET_INDEX = 4; // svg.icon-more is WITHIN window for 4th index

    await t
        .resizeWindow(1500, 800)
        .click('a.logo-link')
        .click('#nav-playlist')
        .click($('div.track.clearfix:not(.episode_Break)').nth(TARGET_INDEX).find('svg.icon-more'));

    await t
        .wait(2000)
        .expect(await $('div.track.clearfix.expanded').count)
        .eql(1, 'Successfully clicked the more-info arrow and expanded row');
});

test('Case B - Click succeeds - target element is below window and scroll occurs successfully', async (t) => {
    const TARGET_INDEX = 5; // svg.icon-more is BELOW window for 5th index

    await t
        .resizeWindow(1500, 800)
        .click('a.logo-link')
        .click('#nav-playlist')
        .click($('div.track.clearfix:not(.episode_Break)').nth(TARGET_INDEX).find('svg.icon-more'));

    await t
        .wait(2000)
        .expect(await $('div.track.clearfix.expanded').count)
        .eql(1, 'Successfully clicked the more-info arrow and expanded row');
});

Here is what I see for Case A:

1. Testcafe navigates to page
2. Testcafe "Waiting for element to appear..." message shows up on the shadow ui bar
3. Testcafe waits for specified timeout period
4. Testcafe clicks the position on the fixed footer corresponding to the target element's position on the page

The issue in this example is that Testcafe should have scrolled before clicking in step 4. With Case B, you can see that Testcafe does indeed scroll before clicking, which is the intended behavior. The difference between Case A and Case B is simply that in Case A the target element is contained within the current window (but hidden beneath the fixed footer), whereas in Case B the target element is below the window.

Given the above, I would suspect that the mechanics of scrolling is working properly - the issue may be with deciding under what conditions a scroll should occur.

I did a little more investigating and found that the issue appears to have been introduced between Testcafe v0.22.0 and v0.23.0. I am seeing the test for Case A passing in v0.22.0 and failing in v0.23.0.

Please let me know if I can provide any additional information - we are motivated to be helpful as we are stuck in v0.22.0 for now.

[AlexKamaev]

@tbcoyle
Thank you for another example. I was able to reproduce the issue in Chrome. I hope to fix it in the near future.
 

[AlexKamaev]

@tbcoyle
I researched both your examples and found that they have different causes. So I created a separated ticked for this one https://github.com/DevExpress/testcafe/issues/2601#issuecomment-502809500
Please refer to it https://github.com/DevExpress/testcafe/issues/3924

[Krappt]

@AlexKamaev I am surprised! I have the same problem in Chrome, Firefox and Opera. It only works in Edge and Safari. Page doesn't scroll to element and tests are always failed.

This is a basic function. How can this not work?

[AlexKamaev]

@Krappt
If your scenario is the same as @tbcoyle has, this means that page markup has some specifics, which break our calculations. I'm working on this right now, so I hope to provide a fix soon.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.