Screenshot happening before page finishes login.

2,581 views
Skip to first unread message

Amit Prakash

unread,
Aug 4, 2016, 2:39:09 PM8/4/16
to headle...@chromium.org
Dear Chromium headless team,
First of all, awesome project. Thank you so much for working on it. I have it a spin recently,
and I'm seeing that often I get a screenshot when parts of pages are not loaded (I'm using headless_shell --screenshot <url>).

We have a fairly heavy angular app that I'm trying to take a screenshot for. Sometimes, I just get the bank screen. Sometimes I get the backdrop screen but no login prompt. I tried inserting a delay of 100 seconds before Capture Screenshot was called. But that did not help. I see all the console logs printing after the wait statement.

Any helpful pointers would be greatly appreciated.
-regards,
Amit

--



Sami Kyostila

unread,
Aug 5, 2016, 5:42:09 AM8/5/16
to Amit Prakash, headle...@chromium.org
The screenshot code in headless shell waits for the page load event to fire, but this not be sufficient for more complicated apps that construct their UI dynamically.

One option is to trigger the screenshot based on some signal from Angular ($viewContentLoaded sounds promising but I don't know for sure). For example you could log a console message on that event and use the DevTools Log domain to look for that message and trigger the screenshot when you see it.

By the way, how did you insert the 100 second delay? If the browser UI thread is blocked during that delay, it may prevent pages from loading.

- Sami

--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.
To post to this group, send email to headle...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/headless-dev/CAMXyk4_vZJs4h_DGr2JtdYEvMG4oLYUz6oGcKQ1uT626tVo%3DWA%40mail.gmail.com.

Amit Prakash

unread,
Aug 5, 2016, 1:33:27 PM8/5/16
to Sami Kyostila, headle...@chromium.org
Thanks so much for the quick reply.

The 100s delay I mentioned, I had added in the c++ code in headless_shell.cc, right before  CaptureScreenshot() was called.
But looks like the JS execution also got delayed by 100s in that case.

On Fri, Aug 5, 2016 at 2:41 AM, Sami Kyostila <skyo...@chromium.org> wrote:
The screenshot code in headless shell waits for the page load event to fire, but this not be sufficient for more complicated apps that construct their UI dynamically.

One option is to trigger the screenshot based on some signal from Angular ($viewContentLoaded sounds promising but I don't know for sure). For example you could log a console message on that event and use the DevTools Log domain to look for that message and trigger the screenshot when you see it.

By the way, how did you insert the 100 second delay? If the browser UI thread is blocked during that delay, it may prevent pages from loading.

- Sami

to 4. elokuuta 2016 klo 19.39 Amit Prakash <am...@thoughtspot.com> kirjoitti:
Dear Chromium headless team,
First of all, awesome project. Thank you so much for working on it. I have it a spin recently,
and I'm seeing that often I get a screenshot when parts of pages are not loaded (I'm using headless_shell --screenshot <url>).

We have a fairly heavy angular app that I'm trying to take a screenshot for. Sometimes, I just get the bank screen. Sometimes I get the backdrop screen but no login prompt. I tried inserting a delay of 100 seconds before Capture Screenshot was called. But that did not help. I see all the console logs printing after the wait statement.

Any helpful pointers would be greatly appreciated.
-regards,
Amit

--



--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev+unsubscribe@chromium.org.



--



Amin Moshgabadi

unread,
Aug 5, 2016, 1:41:59 PM8/5/16
to Amit Prakash, Sami Kyostila, headless-dev
Amit,

I had the same issue and here is a workaround:

Have c++ evaluate a global javascript variable called isPageReady on a loop (like the sample app does for readystate). In your Angular code set that variable when everything has been loaded, then the next time the method is called in c++ it'll see that pageisready and can continue. 


-Amin
 

Alex Clarke

unread,
Aug 5, 2016, 2:39:57 PM8/5/16
to Amin Moshgabadi, Amit Prakash, Sami Kyostila, headless-dev
You could also try 

devtools_client
      ->GetEmulation()
      ->GetExperimental()
      ->SetVirtualTimePolicy(
          headless::emulation::SetVirtualTimePolicyParams::Builder()
              .SetPolicy(VirtualTimePolicy::PAUSE_IF_NETWORK_FETCHES_PENDING)
              .SetBudget(10000)  // 10 virtual seconds
              .Build());

And wait for Emulation.virtualTimeBudgetExpired event.   We don't yet have a headless/ browser test for that I'll add one.

Alex Clarke

unread,
Aug 8, 2016, 5:43:08 PM8/8/16
to Amin Moshgabadi, Amit Prakash, Sami Kyostila, headless-dev
I ended up adding a --virtual-time-budget=xxx command line switch to headless_shell, where xxx = the number of virtual milliseconds to wait before rendering.  The idea being the virtual timebase will not advance until all network fetches have completed and then if there's no more immediate work to do, the system will allow virtual time to fast forward to the next eligible delayed task and run that, and so on until the virtual time budget has elapsed. Typically websites need a few (virtual) seconds to get the proper final layout, so running with something like --virtual-time-budget=10000 should do the trick.   This might help your situation, actually if it doesn't that would be quite interesting.

Matthew Mueller

unread,
Jun 26, 2017, 8:43:59 AM6/26/17
to headless-dev, amo...@gmail.com, am...@thoughtspot.com, skyo...@chromium.org
Hey Alex,

I'm looking to implement virtual time in my application, but I'm having a hard time fully understanding it. From reading some other sources, it seems like a way to deterministically render a page. 

Does this mean that if I set the right virtual time budget, it should render the entire page the same every time (barring no missing resources or failed network requests)? 

Additionally, does real-time correlate with virtual time? In other words, can I measure the time it takes to load, say "google.com" and then use that as the virtual time policy? Or are these apples and oranges?
- Sami

To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.



--



--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.

To post to this group, send email to headle...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.

To post to this group, send email to headle...@chromium.org.

Alex Clarke

unread,
Jun 26, 2017, 9:25:42 AM6/26/17
to Matthew Mueller, headless-dev, Amin Moshgabadi, Amit Prakash, Sami Kyostila
On 26 June 2017 at 13:43, Matthew Mueller <mattm...@gmail.com> wrote:
Hey Alex,

I'm looking to implement virtual time in my application, but I'm having a hard time fully understanding it. From reading some other sources, it seems like a way to deterministically render a page. 

It's a step towards making things deterministic, but there are many sources of non-determinism.  If you use virtual time and --deterministic-fetch then the order in which network fetches are reported to blink will be consistent, assuming the same content. It will also have a consistent number of virtual seconds of execution for things like dom timers.


Does this mean that if I set the right virtual time budget, it should render the entire page the same every time (barring no missing resources or failed network requests)? 

For simple websites yes.  For anything with dynamic content, (e.g. ads) probably no.  Also things like Date.Time and Performance.now are not currently mocked by virtual time, although we may change that.


Additionally, does real-time correlate with virtual time? In other words, can I measure the time it takes to load, say "google.com" and then use that as the virtual time policy? Or are these apples and oranges?

Virtual time is allowed to get ahead of real time (up to the budget limit), so if you give a page 5-10 virtual seconds that's usually enough for most content to have finished loading and be in a consistent-ish state.  Of course there's some content that won't work with.

 
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev+unsubscribe@chromium.org.

To post to this group, send email to headle...@chromium.org.
Reply all
Reply to author
Forward
0 new messages