Parallax image

[ḥari]

Hello team
I have parallax image in a web page while i am scrolling the page till some point that image will be scrolling in the background of that page. Is it possible to verify that image is visible on screen while am scrolling the page??

[eykxas]

Hi, do you have an example ? Each object has a property "VisibleOnScreen". You can check that property whenever you want. Maybe this could solve your problem.

Sometimes, the VisibleOnScreen is always false, in this case you have to find an other trick to do this check. (for example, you can check the value of ScreenTop or something like that).

[rraghvani]

See Run JavaScript on Web Pages, you might be able to use pageObj.contentDocument.Script.eval() to get the styling sheet, and checking the image properties.

[ḥari]

@eykxas i have verified in object browser visible onscreen property for all the panel it's showing false only. What else I can do?

[eykxas]

If I understand properly : your image is fixed when you start scrolling, then the image start scrolling too when you reach a certain point in your webpage, and you want to check the image in both case (fixed, then moving) is that right ?

[ḥari]

Yeah, they have added hero image using css style in background image as url (ie) parallax image,while am start scrolling the page that image is scrolling in background of that page till some point.
I want to verify while scrolling that image is visible and at the end of the page that image is not visible.
I have tried visible method if it's not visible on that page end also it's getting true only and in object browser I checked that property as visibleonscreen is false

[eykxas]

Try to get the image object or the container that move with the image. And check the "ScreenTop" value.

If the ScreenTop value is below a certain value (maybe -200 px or something) you know that the image is no longer visible. It's not ideal but I don't know what else to do.

[ḥari]

@eykxas thank you if it's visible the screentop value is 300 something if it's not visible it's -556 if it's not ideal I will try viewport concept or something else. Thank you

[rraghvani]

If you are using Chrome, then press F12 to launch the DevTools. You can view all the Elements that appear on the page, as well as seeing the values changing while scrolling the page. From here, choose the appropriate property to be used in TestComplete to test for.

[ḥari]

I am using both chrome and edge. I am not looking for element values am looking for that element is visible on screen or not while am scrolling, but in object browser that visible property is always true and visibleonscreen property is always false that's my problem