6

Description: The bug has been introduced preventing the customer to click on an element that he was would be supposed to click

How? Steps explanation: Here is what happens on our payment page application after implementing the Dialog HTML tag in our modal:

  • The user clicks the submit button
  • The first popup appears containing a iframe
  • After a second the second popup appears containing a second iframe behind the first popup.

Browsers that we used: chrome and firefox.

screenshot-of-the-bug

Expected behavior in testcafe: Testcafe shouldn’t be able to click this “checkout” button like a real user Actual behavior in testcafe: Green test against the bug Testcafe allowing the click on the button on popup in background. Because it interacts with the button even if overlapped by another element Dialog HTML tag in our modal component

After the test getting this warning message from testcafe:

When something overlaps the action target, TestCafe performs the action with the topmost element at the original target's location.
The following element with a greater z-order replaced the original action target: <dialog class="payment_1PLVocjJ" open="" tabindex="-1">...</dialog>.
Review your code to prevent this behavior.

We’ve used visible and exist functions to prevent this behavior in our tests but didn’t work because following factors do not influence the element’s visibility status in testcafe:

  • The element’s z-index
  • The element’s opacity
  • The element’s position on the page

Question:

How can I prevent or catch this bug by using which function?

Thanks in advance!

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Emine Cevik
  • 61
  • 1

1 Answers1

0

Yes, you are right. TestCafe has visibility criteria:

  • The value of the element’s display property is none
  • The value of the element’s visibility property is hidden or collapsed
  • The element has width or height of 0.

Other criteria do not affect visibility:

  • The element’s z-index
  • The element’s opacity
  • The element’s position on the page

However, if Element1 is covered with Element2, a click on Element1, will be executed on Element2. I mean that this click doesn't affect Element1. It's the reason why you don't need to care about it.

To check this behavior you can listen to the click event on this button and see that it doesn't rise.

If you just want to check the clickability of an element you need to use other ways. For example, you can use create a Function-Based Selector and check elements, for example, with the property z-index. Or you can add a temporal global variable and a listener for the click event on this button via ClientFunction. Then change this temporal global variable in the added event and then check this variable with ClientFunction after clicking.

Alexey Popov
  • 1,033
  • 1
  • 4
  • 12