how to know when screen is loaded | OutSystems Reactive
Application Type
Reactive
Service Studio Version
11.12.0 (Build 48966)
Platform Version
11.10.4 (Build 29616)

Hi dear community members,



I'm looking for a validation "event" to make sure a reactive page is fully loaded, so slenium tests can start running.

Reason: I want to make sure an item is not being looked for when it's not loaded yet.


I found the earlier post that is marked a solved: https://www.outsystems.com/forums/discussion/58585/how-to-know-when-screen-is-loaded/

The solution marked there, is about a traditional application.


Before I start trying to figure out complex combination-scenario's, I'd like to ask my question here.


So: Does anyone have a "good practice" for triggering the start of Selenium (webdriver based) UI testing on a page as soon as the page is fully loaded.

Also keep in mind the page lifecycle events in OutSystems Reactive


Happy to hear from you.


kind regards,

Wouter

Solution

Hi Wouter, 

For your use case, you could use a CSS class that is only applied to an element of the screen after all the corresponding data actions/aggregates have been completed.

For example, you can use the IsDataFetched attribute of a key Aggregate/Data Action to apply the class to an element of your screen, which you can have Selenium wait for before performing any additional tests:

Let me know if that helps.

Hi Francisco,


thank you for your answer.

I was affraid that this would be the best way :) 

This is the scenario I was building and your approach seems more effective than what I had in mind, so thank you.

As the "is data fetched" still needs to give the browser time to show the results, I am going to use a combination of what you're proposing + a little waiting time (2-3sec) to make sure.

So no straight forward approach, is what I take away from this.

Will keep you posted.

Hi Francisco,


Your answer fits quite good. Build upon that, in the afterfetch of my data-actions, I trigger an actions which runs a javascript SetTimeout function, so i can put a delay of some time (1-5 sec) as to make time for the render of the page.

Thank you very much!

Hi Wouter,

In a reactive application, you can use "OnReady" event to start your web driver. This event occurs after the Screen or Block DOM is ready, before the transition starts.

 

In page lifecycle events in OutSystems Reactive article also mentioned the same.

Thanks, Aadhavan S

Hi Aadhavan,


thank you for your answer.

To avoid confusion: that even, I know about. That is not what I'm looking for.

After the DOM is ready, data fetching happens and renders happen, thus creating lists, blocks,...

What I'm looking for is a way of telling that all is finished (=  dom ready, data fetched, all renders done), wich is less straight forward ;)

As I want to be able to have Selenium Webdriver click on links, created in list items (i.e. inline edit, opening detail page of a masterpage table line,... ). So the lists/tables all need to be loaded and visible in the browser. Not just the DOM.

I understand my question might have been to general before. I hope it is more concrete now.

I put a screenshot of a representative concept of lists in lists where the most inner child needs to be edited, thus this item needs to be clicked (when all data is loaded and shown)


Thank you for responding and thinking along on my issue ;) 



ScreenshotOfConceptLoadedLists.jpg

Solution

Hi Wouter, 

For your use case, you could use a CSS class that is only applied to an element of the screen after all the corresponding data actions/aggregates have been completed.

For example, you can use the IsDataFetched attribute of a key Aggregate/Data Action to apply the class to an element of your screen, which you can have Selenium wait for before performing any additional tests:

Let me know if that helps.

Hi Francisco,


thank you for your answer.

I was affraid that this would be the best way :) 

This is the scenario I was building and your approach seems more effective than what I had in mind, so thank you.

As the "is data fetched" still needs to give the browser time to show the results, I am going to use a combination of what you're proposing + a little waiting time (2-3sec) to make sure.

So no straight forward approach, is what I take away from this.

Will keep you posted.

Hi Francisco,


Your answer fits quite good. Build upon that, in the afterfetch of my data-actions, I trigger an actions which runs a javascript SetTimeout function, so i can put a delay of some time (1-5 sec) as to make time for the render of the page.

Thank you very much!

Hi,

You may try OnRender event, as the life circle of the screens showed belows, this eventt will trigger after AfterFetch.

Hope this can help you.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.