TestCafe cannot scroll page when body has scrollbar

[pelhage]

Are you requesting a feature or reporting a bug?

Bug

What is the current behavior?

1. A Selected element out of the viewport is not able to be manipulated
   • Related: In Chrome not able to click submit button which is not in view port. throws error “The element that matches the specified selector is not visible.” · Issue #1353
2. .visible is returning true for an element that is out of the viewport, but when attempting to manipulate this element, we receive an error saying The element that matches the specified selector is not visible.
   • Related: Visibility Checking · Issue #1186

What is the expected behavior?

1. Elements that are out of viewport should still be selectable through the API
2. .visible elements should not produce errors stating that they are not visible

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

Set computer monitor resolution to a smaller resolution so that the “Confirm Password” input is out of view port

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

Tested page URL: https://app.staging.joinforge.com/signup/business

Test code

import { Selector } from 'testcafe'

fixture `Sign Up User`
  .page `https://app.staging.joinforge.com/signup/business`

test('Sign Up Form Texting ', async t => {
  const firstNameInput = Selector('fieldset').withText('First Name').find('input')
  const lastNameInput = Selector('fieldset').withText('Last Name').find('input')
  const phoneInput = Selector('fieldset').withText('Phone').find('input')
  const passwordInput = Selector('fieldset').withText('Choose a Password').find('input')
  // This is below the fold and not being considered "visible"
  const confirmPasswordInput = Selector('fieldset').withText('Confirm Password').find('input')
  
  await t
    .typeText(firstNameInput, 'First Name')
    .typeText(lastNameInput, 'Last Name')
    .typeText(phoneInput, '5555555555')
    .typeText(passwordInput, 'Password123')
  
  if (await confirmPasswordInput.visible) {
    console.log('This must mean the element is `visible`')
    await t.typeText(confirmPasswordInput, 'FakePassword')
  }
})

Specify your

• operating system: Mac OS X 10.12.6
• testcafe version: 0.18.3
• node.js version: v6.9.4

[helen-dikareva]

Thank you for your detailed description and sample.
The mechanism of checking our Selector.visible works as described here:
el.visible is false in the following cases:

• the display style is none;
• the visibility style is hidden;
• an element has width or height that is equal to zero.
   
  So, we think that your confirmPasswordInput element (or others depend on the screen resolution) is visible, because we take into account the fact that TestCafe can scroll a page to place this element in the visible area. We've already thought about improving the mechanism of checking the visibility (you correctly mentioned the related issue). If you wish to share your ideas regarding this, feel free to contact us and share them.
   
  We've found an error with our scrolling mechanism. Because of this error, the typeText action could be performed with the visible element. We'll fix it in the context of this issue - please keep track of our progress.

[pelhage]

No problem @helen-dikareva

Is the scrolling mechanism error the same error as described in the other issue I mentioned in the original post?:

• In Chrome not able to click submit button which is not in view port. throws error “The element that matches the specified selector is not visible.” · Issue #1353

Addressed by PR: Fix hasScroll for body with absolute positioning (closes #1353)

A bug like this seems like a pretty big framework-breaking bug that would be affecting everyone else, no? But there seems to be little activity or issues surrounding it. Or are there existing workarounds?

[helen-dikareva]

Is the scrolling mechanism error the same error as described in the other issue I mentioned in the original post?
 

Unfortunately this is a new problem. It related with your markup and we never faced with something like this scenario before.
Your page looks like documentElement has scroll bar, but actually the body element has it.
We need some additional time to investigate the problem in our scrolling mechanism and fix it for general case ASAP. Then, we will be able to explain all corresponding questions.

[pelhage]

Thanks for the clarification @helen-dikareva :) I looked into my markup as well and see the issue you mentioned. I'm glad its an issue on my end rather than with testcafe :)

[helen-dikareva]

fixed if PR

[lock]

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.