react-styleguidist-visual icon indicating copy to clipboard operation
react-styleguidist-visual copied to clipboard

Testing for both desktop and mobile

Open varya opened this issue 6 years ago • 3 comments

It seems that documentation is missing info about how to test for different dimensions. Particularly, I am interested in how to take screenshots for both desktop and mobile. Any suggestions?

varya avatar Nov 05 '18 18:11 varya

Sorry about lack of documentation. The option is called viewports, and you can specify it in your config file like this:

{
  viewports: {
    desktop: {
      width: 1024,
      height: 600
    },
    mobile: {
      width: 480,
      height: 600,
      deviceScaleFactor: 2
    }
  }
}

See for example https://github.com/Microsoft/YamUI/blob/e5cf2542bd3b25681ce62edd7f5d5e115b1724d2/config/styleguide-visual/config.js#L7-L13

Could you open a PR that documents this option in the README for others?

unindented avatar Nov 05 '18 18:11 unindented

Thank you for so quick reply!

varya avatar Nov 05 '18 18:11 varya

@unindented I am getting error "Taking screenshots for viewport desktop Navigation Timeout Exceeded: 30000ms exceeded" while taking the VVT. How I can set time out config?

Thanks

mohit4221 avatar Jan 17 '19 13:01 mohit4221