Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add 'waitUntil' option to puppeteer of storyshots #3156

Merged
merged 4 commits into from
Mar 13, 2018

Conversation

markelog
Copy link
Contributor

@markelog markelog commented Mar 6, 2018

If some elements use additional xhr requests (like async image loading).
Puppeteer might not imprint the end state of the page. Puppeteer has
built-in method to resolve this -
https://github.com/GoogleChrome/puppeteer/blob/v1.1.1/docs/api.md#pagegotourl-options

This option is fairly general so it should be okay to use for other cases
as well.

However, 'beforeScreenshot' could be used instead, but proposed approach seems
more definite and reliable

As additional further improvement, these goto options might be exposed to
consumber as well

If some elements use additional xhr requests (like async image loading).
Puppeteer might not imprint the end state of the page. Puppeteer has
built-in method to resolve this -
https://github.com/GoogleChrome/puppeteer/blob/c857aef5893042ac2f8b587283683396ae9c333b/docs/api.md#pagegotourl-options

This option is fairly general so it should be okay to use for other cases
as well.

However, 'beforeScreenshot' could be used instead, but proposed approach seems
more definite and reliable

As additional further improvement, these `goto` options might be exposed to
consumber as well
@codecov
Copy link

codecov bot commented Mar 6, 2018

Codecov Report

Merging #3156 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #3156   +/-   ##
=======================================
  Coverage   35.98%   35.98%           
=======================================
  Files         437      437           
  Lines        9474     9474           
  Branches      899      885   -14     
=======================================
  Hits         3409     3409           
+ Misses       5506     5493   -13     
- Partials      559      572   +13
Impacted Files Coverage Δ
addons/storyshots/src/test-body-image-snapshot.js 13.79% <ø> (ø) ⬆️
lib/core/src/client/manager/preview.js 0% <0%> (ø) ⬆️
addons/knobs/src/angular/helpers.js 76.97% <0%> (ø) ⬆️
addons/actions/src/lib/types/nan/index.js 82.35% <0%> (ø) ⬆️
addons/jest/src/components/PanelTitle.js 0% <0%> (ø) ⬆️
addons/jest/src/components/Result.js 0% <0%> (ø) ⬆️
app/angular/src/server/ts_config.js 38.09% <0%> (ø) ⬆️
lib/codemod/src/transforms/move-buildin-addons.js 46.87% <0%> (ø) ⬆️
...-native/src/preview/components/OnDeviceUI/index.js 0% <0%> (ø) ⬆️
.../ui/src/modules/ui/components/addon_panel/index.js 34.78% <0%> (ø) ⬆️
... and 65 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4808845...a658719. Read the comment docs.

@Hypnosphi
Copy link
Member

Will it work on examples that do some kind of polling?

@ndelangen
Copy link
Member

If a user decides to poll every 500ms in a story...

networkidle0 - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.

That is probaly super uncommon... If a story is about a component that changes over time.. My advice is to create a story for a few moment in time, not to do the actual polling in storybook.

What do you think @Hypnosphi ?

@Hypnosphi
Copy link
Member

Hypnosphi commented Mar 8, 2018

Ok, at TeamCity we have some stories that poll data from actual server, but we use a period larger that 500ms, so it's OK

But we may start using websockets for that at some point. Would WS connection count as "network connection"?

UPD: Anyway, screenshot testing isn't applicable to such stories

@markelog
Copy link
Contributor Author

markelog commented Mar 12, 2018

Will it work on examples that do some kind of polling?

Good question.

I think even with old-school comet technics and the new ones like ws it should work in the same way (should be tested, to verify of course).

In the case, when ws, on user agent side, isn't always receiving new data and if there is no ongoing ping pong frames (https://html.spec.whatwg.org/multipage/web-sockets.html#ping-and-pong-frames) proposed logic should work.

Since of course while test run in in progress, you probably would want, at some point, to stop receiving new data during the screenshot time. And in both ws and comet technics (known to me), you can adjust the heart-beat rate

Copy link
Member

@Hypnosphi Hypnosphi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants