[wtr-general] How to handle behavior while pop up loads, is sleep is the only solution?

Discussion:

NaviHan

2018-09-25 04:41:14 UTC

Its been some days I found this issue untill I understood today the cause
of failure.

The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared

The issue is between step b and step c there is a time when the pop up is
sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.

Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.

For the time being Im working around this issue with sleeps. But is there a
neater way?

The pop up is defined as

button(:continue_as_guest, :class => ['button', 'close-dialog-button'])

The code that does the job is

def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end

After sleep, which works fine

def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end

Note:- I have also tried to wait_while(&:present?) still the issue stays
the same

def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end
--
--
Before posting, please read https://github.com/watir/watir_meta/wiki/Guidelines-for-Posting-to-Watir-General-Google-Group.
In short: search before you ask, be nice.

watir-***@googlegroups.com
http://groups.google.com/group/watir-general
watir-general+***@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "Watir General" group.
To unsubscribe from this group and stop receiving emails from it, send an email to watir-general+***@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Titus Fortner

2018-09-25 15:30:48 UTC

Permalink

This kind of dynamic code is difficult.

Firstly, `wait_until(&:present?).click` is currently redundant. The wait
will happen automatically if you just do: `click`

Essentially the driver is processing the element as displayed before the
desired action is attached to that element. Ideally, the front end devs
add classes that indicate the status of the transitions that can be polled
specifically before acting.

If this is being done through a specific JS framework (like jQuery or
Angular), you can do a generic wait for that framework's activity to be
complete (see watir_angular gem or PageObject's JavascriptFrameworkFacade
for JQuery)

The final and hackiest approach I have used in the past is to implement an
`#ensure_click` method where you specify the condition that has to be met
for the click to be successful, and re-click if it is not. But this is
inherently tricky because of all the race conditions possible.

Post by NaviHan
Its been some days I found this issue untill I understood today the cause
of failure.
The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared
The issue is between step b and step c there is a time when the pop up is
sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.
Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.
For the time being Im working around this issue with sleeps. But is there
a neater way?
The pop up is defined as
button(:continue_as_guest, :class => ['button', 'close-dialog-button'])
The code that does the job is
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end
After sleep, which works fine
def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end
Note:- I have also tried to wait_while(&:present?) still the issue stays
the same
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end

--
--
Before posting, please read https://github.com/watir/watir_meta/wiki/Guidelines-for-Posting-to-Watir-General-Google-Group.
In short: search before you ask, be nice.

watir-***@googlegroups.com
http://groups.google.com/group/watir-general
watir-general+***@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "Watir General" group.
To unsubscribe from this group and stop receiving emails from it, send an email to watir-general+***@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Justin Ko

2018-09-25 15:37:53 UTC

Permalink

(Sorry, if some of this repeats Titus's response. I was half way through
this when he replied.)

If I'm envisioning the sliding correctly, I believe what happens is:
1. The button starts sliding on to the page (at which point it'll be
considered present)
2. The coordinates of the button are retrieved, however this will be some
point along the slide path (rather than the final destination)
3. The click is sent to the coordinates, which since the button has since
moved, will not click the button
4. The button reaches it's final destination

Ideally, you would find something that indicates that the animation has
completed. I was recently told that jQuery has some property to check for
its animations. You could see if there is something similar in your
application. Waiting on this would likely be the most robust approach.

The quickest solution, would be to directly fire the click event, without
worrying about click coordinates. This would make the script less like a
user, but might be acceptable.

def continue_as_guest
continue_as_guest_element.fire_event(:onclick)
end

If you want to maintain the more user-like behaviour, you could wait for
the button to reach it's final destination before doing the click. If final
destination is known, you could do:

def continue_as_guest
btn = continue_as_guest_element
btn.wait_until do |btn|
center = btn.center
center.x == 464 && center.y == 173 # using your expected coordinates
end
btn.click
end

If you don't know the exact destination, you could do some polling:

def continue_as_guest
btn = continue_as_guest_element
initial_center = btn.center
btn.wait_until do |btn|
sleep(1) # assuming the animation moves fast enough
new_center = btn.center
initial_center.x == new_center.x && new_center.y == new_center.y
end
btn.click
end

Justin

Post by Titus Fortner
This kind of dynamic code is difficult.
Firstly, `wait_until(&:present?).click` is currently redundant. The wait
will happen automatically if you just do: `click`
Essentially the driver is processing the element as displayed before the
desired action is attached to that element. Ideally, the front end devs
add classes that indicate the status of the transitions that can be polled
specifically before acting.
If this is being done through a specific JS framework (like jQuery or
Angular), you can do a generic wait for that framework's activity to be
complete (see watir_angular gem or PageObject's JavascriptFrameworkFacade
for JQuery)
The final and hackiest approach I have used in the past is to implement an
`#ensure_click` method where you specify the condition that has to be met
for the click to be successful, and re-click if it is not. But this is
inherently tricky because of all the race conditions possible.

Titus Fortner

2018-09-25 15:52:46 UTC

Permalink

Post by Justin Ko
3. The click is sent to the coordinates, which since the button has since

moved, will not click the button

If this happened, there should be a stale element exception, which Watir
would continue to relocate until it worked, which is why I suspect it is JS
element/action binding related, which means the fire event theoretically
wouldn't do anything differently.

Dynamically waiting for an element to stop moving is kind of cool... Hadn't
considered that approach before.

Post by Justin Ko
(Sorry, if some of this repeats Titus's response. I was half way through
this when he replied.)
1. The button starts sliding on to the page (at which point it'll be
considered present)
2. The coordinates of the button are retrieved, however this will be some
point along the slide path (rather than the final destination)
3. The click is sent to the coordinates, which since the button has since
moved, will not click the button
4. The button reaches it's final destination
Ideally, you would find something that indicates that the animation has
completed. I was recently told that jQuery has some property to check for
its animations. You could see if there is something similar in your
application. Waiting on this would likely be the most robust approach.
The quickest solution, would be to directly fire the click event, without
worrying about click coordinates. This would make the script less like a
user, but might be acceptable.
def continue_as_guest
continue_as_guest_element.fire_event(:onclick)
end
If you want to maintain the more user-like behaviour, you could wait for
the button to reach it's final destination before doing the click. If final
def continue_as_guest
btn = continue_as_guest_element
btn.wait_until do |btn|
center = btn.center
center.x == 464 && center.y == 173 # using your expected coordinates
end
btn.click
end
def continue_as_guest
btn = continue_as_guest_element
initial_center = btn.center
btn.wait_until do |btn|
sleep(1) # assuming the animation moves fast enough
new_center = btn.center
initial_center.x == new_center.x && new_center.y == new_center.y
end
btn.click
end
Justin

Post by Titus Fortner
This kind of dynamic code is difficult.
Firstly, `wait_until(&:present?).click` is currently redundant. The wait
will happen automatically if you just do: `click`
Essentially the driver is processing the element as displayed before the
desired action is attached to that element. Ideally, the front end devs
add classes that indicate the status of the transitions that can be polled
specifically before acting.
If this is being done through a specific JS framework (like jQuery or
Angular), you can do a generic wait for that framework's activity to be
complete (see watir_angular gem or PageObject's JavascriptFrameworkFacade
for JQuery)
The final and hackiest approach I have used in the past is to implement
an `#ensure_click` method where you specify the condition that has to be
met for the click to be successful, and re-click if it is not. But this is
inherently tricky because of all the race conditions possible.

Post by NaviHan
Its been some days I found this issue untill I understood today the
cause of failure.
The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared
The issue is between step b and step c there is a time when the pop up
is sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.
Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.
For the time being Im working around this issue with sleeps. But is
there a neater way?
The pop up is defined as
button(:continue_as_guest, :class => ['button', 'close-dialog-button'])
The code that does the job is
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end
After sleep, which works fine
def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end
Note:- I have also tried to wait_while(&:present?) still the issue stays
the same
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end

NaviHan

2018-09-25 16:04:27 UTC

Permalink

Hi Titus & Justin

My theory of actually clicking the button before the pop is fully loaded
could be wrong, because even if its not fully loaded the click on "continue
as guest" should dismiss the popup.

Please see the video here

https://drive.google.com/file/d/1ycWdST29FptgOS5GYDfRuAPUVBfeQt3h/view?usp=sharing

But what made me think that the button is actually clicked is the
screenshot taken at the point of failure, which has a highlighter around
the "continue as guest" button which indicated the button is clicked.

Loading Image...

Both are contradictory.

What do you think?

Justin Ko

2018-09-25 17:56:59 UTC

Permalink

It looks like the button itself isn't sliding. The div that contains it is
actually increasing in height. So my previous suggestions about waiting for
the button to stop moving doesn't work.

I'm still not quite clear on how the click is getting intercepted. However,
waiting for the section to full expand beyond the button seems to work (at
least based on what I guessed was the equivalent Production site):

def continue_as_guest
btn = continue_as_guest_element
scroll_container = browser.div(id: 'slide-dialog-container')
btn.wait_until { btn.present? && browser.execute_script('return
arguments[0].clientHeight;', scroll_container) >= btn.center.y }
btn.click
end

Justin

Post by NaviHan
Hi Titus & Justin
My theory of actually clicking the button before the pop is fully loaded
could be wrong, because even if its not fully loaded the click on "continue
as guest" should dismiss the popup.
Please see the video here
https://drive.google.com/file/d/1ycWdST29FptgOS5GYDfRuAPUVBfeQt3h/view?usp=sharing
But what made me think that the button is actually clicked is the
screenshot taken at the point of failure, which has a highlighter around
the "continue as guest" button which indicated the button is clicked.
https://i.imgur.com/TdhYPz4.png
Both are contradictory.
What do you think?

Titus Fortner

2018-09-25 18:31:32 UTC

Permalink

Yeah, it's clicking, but I suspect JS event isn't ready to act yet.

Note the style transition attributes there. Try waiting for the element
style to not include "overflow" after the element becomes present. You can
also try waiting for the size of the slide dialog container to equal some
value, but that's more hacky. :)

Titus Fortner

2018-09-25 18:33:06 UTC

Permalink

Also, Watir has a `Element#height` method, so you shouldn't need to resort
to JS to get that value.

Post by Titus Fortner
Yeah, it's clicking, but I suspect JS event isn't ready to act yet.
Note the style transition attributes there. Try waiting for the element
style to not include "overflow" after the element becomes present. You can
also try waiting for the size of the slide dialog container to equal some
value, but that's more hacky. :)

Post by NaviHan
Its been some days I found this issue untill I understood today the
cause of failure.
The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared
The issue is between step b and step c there is a time when the pop up
is sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.
Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.
For the time being Im working around this issue with sleeps. But is
there a neater way?
The pop up is defined as
button(:continue_as_guest, :class => ['button', 'close-dialog-button'])
The code that does the job is
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end
After sleep, which works fine
def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end
Note:- I have also tried to wait_while(&:present?) still the issue stays
the same
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end

Justin Ko

2018-09-25 18:42:02 UTC

Permalink

Element#height didn't work for me. It was returning height of the div
including the part cut-off by the overflow. The clientHeight gave the
height excluding the cut-off portion.

Justin

Post by Titus Fortner
Also, Watir has a `Element#height` method, so you shouldn't need to resort
to JS to get that value.

Post by NaviHan
Its been some days I found this issue untill I understood today the
cause of failure.
The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared
The issue is between step b and step c there is a time when the pop up
is sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.
Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.
For the time being Im working around this issue with sleeps. But is
there a neater way?
The pop up is defined as
button(:continue_as_guest, :class => ['button', 'close-dialog-button'])
The code that does the job is
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end
After sleep, which works fine
def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end
Note:- I have also tried to wait_while(&:present?) still the issue
stays the same
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end

Justin Ko

2018-09-26 05:53:16 UTC

Permalink

Trying this on a faster machine and against some other pages, I'm noticed
flaws in my previous testing. Some of the properties, ex Element#height,
start as if the sliding container was visible. When the animation starts,
they get reset. For example, I saw the height go from 346, down to 1 and
back up to 346. Similar when checking the overflow style. You need to make
sure the element is present before you start inspecting the properties.

Checking the overflow as Titus mentioned seems to be the most robust, at
least for this specific implementation:

def continue_as_guest
browser.div(id: 'slide-dialog-container').wait_until do |s|
s.present? &&
s.style('overflow') == 'visible'
end
continue_as_guest_element.click
end

Justin

Post by Justin Ko
Element#height didn't work for me. It was returning height of the div
including the part cut-off by the overflow. The clientHeight gave the
height excluding the cut-off portion.
Justin

Post by Titus Fortner
Also, Watir has a `Element#height` method, so you shouldn't need to
resort to JS to get that value.

Post by NaviHan
Hi Titus & Justin
My theory of actually clicking the button before the pop is fully
loaded could be wrong, because even if its not fully loaded the click on
"continue as guest" should dismiss the popup.
Please see the video here
https://drive.google.com/file/d/1ycWdST29FptgOS5GYDfRuAPUVBfeQt3h/view?usp=sharing
But what made me think that the button is actually clicked is the
screenshot taken at the point of failure, which has a highlighter around
the "continue as guest" button which indicated the button is clicked.
https://i.imgur.com/TdhYPz4.png
Both are contradictory.
What do you think?

Post by NaviHan
Its been some days I found this issue untill I understood today the
cause of failure.
The behavior is
a. The user enters the email on check out page
b. A pop up skids in from the top of the page
c. The user clicks a "continue as guest "button on the pop up
d. The pop up skids back in and disappears
e. Verify the pop up disappeared
The issue is between step b and step c there is a time when the pop up
is sliding into the page until its loaded completely. During this time the
script clicks the dismiss button. Because the pop hasent completed loading
the click doesn't make it disappear.
Similarly becasue the pop up takes time to slide back and disapper the
check at step e fails.
For the time being Im working around this issue with sleeps. But is
there a neater way?
The pop up is defined as
button(:continue_as_guest, :class => ['button', 'close-dialog-button'])
The code that does the job is
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).click
end
After sleep, which works fine
def continue_as_guest
sleep 5
continue_as_guest_element.wait_until(&:present?).click
sleep 5
end
Note:- I have also tried to wait_while(&:present?) still the issue
stays the same
def continue_as_guest
continue_as_guest_element.wait_until(&:present?).tap(&:click).wait_while(&:present?)
end

NaviHan

2018-09-26 08:31:21 UTC

Permalink

Hi Justin/Titus

Trying to understand the overflow attribute in style sheet

When the pop up is not present the oveflow property is there unser style as
shown here
Loading Image...

When the popup is fully loaded its the same.

Loading Image...

So what does this mean, s.style('overflow') == 'visible', and where can we
verify that

Justin Ko

2018-09-26 11:28:26 UTC

Permalink

Navi,

In the video of the problem, you can actually see the overflow style change
while the section is sliding.

You can also see it change using the following Watir code:

browser.link(text: 'Sign in here').click
slide_dialog = browser.div(id: 'slide-dialog-container')

150.times { puts slide_dialog.style('overflow') }
#=> "visible"
#=> ...
#=> "visible"
#=> "hidden"
#=> ...
#=> "hidden"
#=> "visible"
#=> ...
#=> "visible"

Note that when there is no animation, the overflow isn't set. As a result,
you get the default "visible" even when the section is hidden (ie at the
start of the above output). This is why I paired the #present? check. If
you want to save a bit of performance, you really want to check that the
sliding dialog is present and then wait on the style.

Justin

Post by NaviHan
Hi Justin/Titus
Trying to understand the overflow attribute in style sheet
When the pop up is not present the oveflow property is there unser style
as shown here
https://i.imgur.com/X1MxiHD.png
When the popup is fully loaded its the same.
https://i.imgur.com/xu5E3mp.png
So what does this mean, s.style('overflow') == 'visible', and where can
we verify that

NaviHan

2018-10-02 06:38:32 UTC

Permalink

Hi Justin

This works fine and I have ran the script multiple times and it passed.
This is configured to run on Jenkins Boxes. Waiting for overnight results.
As a related question.

We use the below code for the pop up to load completely. I have a
verification to be done after the pop up has completely disappeared.

I know we need to do wait_while but how do we combine s.present? && s.style(
'overflow') == 'visible' to evaluate to false ?

Cheers

Justin Ko

2018-10-02 17:22:48 UTC

Permalink

Hi Navi,

I would expect the closing situation to be much simpler. You should be able
to just check that the element is no longer present:

slide_dialog = browser.div(id: 'slide-dialog-container')
slide_dialog.wait_while(&:present?)

The overflow was only important in the expanding case as it meant that
elements could be moving around the page. For closing/collapsing, once the
popup is gone there should be nothing changing on the page.

Justin

Post by NaviHan
Hi Justin
This works fine and I have ran the script multiple times and it passed.
This is configured to run on Jenkins Boxes. Waiting for overnight results.
As a related question.
We use the below code for the pop up to load completely. I have a
verification to be done after the pop up has completely disappeared.
I know we need to do wait_while but how do we combine s.present? && s.
style('overflow') == 'visible' to evaluate to false ?
Cheers