TestCafe Banner makes elements appear invisible

Banner makes elements appear invisible

Test cafe banner is covering up elements and as a result, those elements are “not visible”. This can be verified by a test where an element is covered up by the banner and needs to be visible to succeed, here’s an example:

.click(myElementCoveredByBanner)

which then gives the error: “The element that matches the specified selector is not visible.”

Observing the test, I have noticed that the element is scrolled to and visible on the screen, however, the test-cafe banner covers the element completely. By running the test again, wait for the timeout and then by manually scrolling such that the banner partially does not cover the element, fixes the problem.

What is the Current behavior?

The banner when layered over an element makes it “not visible”

What is the Expected behavior?

There either should not be a banner, or the banner should not be making elements “not visible”.

Code that is breaking:

   1) The element that matches the specified selector is not visible.

export async function drilDown() {
 await scrollToBottom()
await t
   .expect(benefitsIconMobileOnly.exists).ok()
    .click(benefitsIconMobileOnly)

• testcafe version: 1.2.1
• node.js version: 8.12.0
• browser name and version: Chrome 75
• platform and version: macOS 10.13.6

[aleks-pro]

Hello @AllSidesCreative,

The issue you are facing looks similar to this one. We have fixed it recently. Can you check that the problematic behavior is reproducible on the testcafe@1.3.0-alpha.1 version? If so, please provide us with a link to your Web application or a simple project in which we can reproduce the issue. Also, the code of your test would be very helpful for us.

[github-actions[bot]]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don’t have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.