dferber90 / jsdom-screenshot Goto Github PK

Anything on the roadmap for adding Typescript definitions to this library? If not, I can add something to DefinitelyTyped.

Hello,
I was trying to add some snapshot tests in my design system repo, and I stumbled upon a problem:
I have to load some internal assets (fonts and icons) that are hosted in a second "assets" repository, accessible via URL, but I can't seem to find a way to load them before my tests run.

This is the snapshot of a button with an icon on the right side.

• the font is wrong
• the icon is missing

Any suggestions?

Thanks a lot

First of all, great tool. Thanks for creating it. I tried using it but could only get screenshot without any styling. Is there a way a component can be rendered and screenshot with CSS? All examples that I found was rendering the first and then screenshot will capture a selector. However in a complicated app which has multiple components, tests are written inside the components to render only that component. Unfortunately, when you take a screenshot, the screenshots do not inherit the CSS which the parent component may be importing. Any ideas around here?

Hey @cancerberoSgx,

would you mind giving some feedback of what you're using this package for?

I've used it to experiment with Visual Regression Testing, but ultimately ended up using percy.io instead. They take care of differences in screenshots due to e.g. different font rendering on different machines. I kinda want to "warn" you that it can be a bit of a time-sink and inform that it's usually better to use a service for Visual Regression Testing instead.

Cheers

I was having an issue where my test suddenly started timing out -- I finally debugged it by launching chromium with generateImage({ launch: { ... } }). I noticed in the network tab that the request for a font file was pending, and would never resolve (either with the resource or as a 404).

This was solved by adding my asset directory to the options (serve: ['public']). But, it was quite difficult to figure out that this was the issue. Ideally, puppeteer would just treat it as a normal 404 and not load the asset -- then I would see in my screenshots that my fonts aren't loading.

I see that opts.waitUntilNetworkIdle is false by default.. So I'm not sure why puppeteer was stuck on this asset. I've tried goofing around in createServer to handle this but I didn't have much luck.

Problem

The screenshot puppeteer takes is dependant of the "Use LCD font smoothing when available" setting of Mac OSX.

Consequences:

• when the setting is changed on the operating system, the tests fail
• when the setting is enabled and the tests were generated with LCD font smoothing, but are now run on a non-LCD monitor (not sure what is different exactly), the tests suddenly fail

See here for an example of a failing visual regression test caused by this:

Solution

There is a chrome-flag called lcd-text-aa at chrome://flags/#lcd-text-aa which we can always disable. Then the screenshots will never use LCD text anti-aliasing. The tests now no longer depend on the monitor or Mac OSX "Use LCD font smoothing when available" setting.

Technical

puppeteer.launch(options) accepts options.args and we can pass --disable-lcd-text to disable the lcd text antialiasing.

Getting the following error after following the guide: https://gist.github.com/dferber90/6fe76cde582b8746191478fac34c8b7d

Test suite failed to run

    Cannot find module 'ws' from '../../node_modules/jsdom-screenshot/node_modules/puppeteer/lib/WebSocketTransport.js'

    Require stack:
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/node_modules/puppeteer/lib/WebSocketTransport.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/node_modules/puppeteer/lib/Launcher.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/node_modules/puppeteer/lib/Puppeteer.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/node_modules/puppeteer/lib/api.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/node_modules/puppeteer/index.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/generateImage.js
      /Users/omaranshasi/Code/cygnus-stack/node_modules/jsdom-screenshot/index.js
      src/components/__tests__/testUtils.jsx
      src/components/rooms/creation/bulk/__tests__/BulkImportPage.spec.jsx

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (../../node_modules/jsdom-screenshot/node_modules/puppeteer/lib/WebSocketTransport.js:16:19)

Any ideas how to solve it?
Thanks

My test calls generateImage(); without issue, but I have no idea where the screenshot went. This is probably documented within the screenshot options, but the link to that in the readme 404s. Regardless, it might be worth stating directly in the readme of this project as I'm sure it's something any first-time user would want to know.

This package specifies puppeteer ^1.12.2 as a dependency, which is a version that is pinned to Chrome 73. As this is a dependency of the package, there's no way to specify a different Chrome version.

Changing puppeteer to be a peer dependency would allow users of the package to specify their own version of puppeteer and be in control of the version of Chrome that gets used.

I'd like to be able to call await page.evaluate(() => { debugger }) so I can get a better idea of problems within the chromium devtools. But, I see that the puppeteer browser and page are created within the closure of generateImage(), and are not returned. Do you know of any way to tap into puppeteer's instances, maybe through some jsdom export?

If not, I have an idea of how to make this an option within this library without any breaking changes ~ let me know what you think and I'd be happy to make a PR.

Hi, i have a React component that uses web components (imported from a third-party library).
I noticed that jsdom-screenshot does not render the UI rendered by those web components, and only renders the UI of other HTML elements.
Is there a way to get the screenshots to render the web components as well?

When I install this I am getting error. My node version is v8.2.1

/Users/om/Documents/projects/odoo/ekogrid/npms/node_modules/jsdom-screenshot/debug.js:17
    ...options
    ^^^

SyntaxError: Unexpected token ...

With some certain page content, the server under the hood to take a screenshot from never serves the webpage and the generateImage never returns.
I try to access the server's url like http://localhost:60957/ and it hangs too until I hit Ctrl-C on my unit tests command, then suddenly the pages loads once correctly.
I will try to gather more information and submit some fixes if possible. I'm interested in some pointer if people have clues what could be causing this.