3 ms·

I solved my UI tests by scripting a ton of screenshots for my documentation using Puppeteer, going through each thing the user can do and proving they can do it

I solved my UI tests by scripting a ton of screenshots for my documentation using Puppeteer, going through each thing the user can do and proving they can do it at multiple device resolutions. It was a lot of work but now it is quite simple - await owner.click('Create plan') await owner.screenshot('Fill out form') One thing I did wrong that I have to revisit is I don't confirm the screenshots hold any data I'm expecting. It would have been much easier to add the asserts when I was writing them but I was manually inspecting everything very closely to address responsive issues so it didn't seem important until the responsive issues were sorted.

lostintangent 7y ago
I’d love to hear more about this! Do you have automation that runs as part of your CI builds, and dynamically captures the screenshots for your documentation using Puppeteer? If so, that is so cool :) Have you had much trouble with the automation scripts breaking as a result of app churn?
- benologist 7y ago
  So far I still manually trigger a regeneration but it's only a matter of time till it just runs automatically on any update. The main problem has been with Puppeteer, there is a chance it will just randomly crash at any point and it feels like there are a million little race conditions where you need to wait or keep retrying to access an element after it says a page has loaded so I have a lot of ugly code in my puppeteer-helper like: while (true) { try { element = await active.$('#element') } catch (error) { } if (!element) { sleep(100) continue } break } Another issue only pertained to getting the simulated device screenshots, switching the viewport configuration reloads the page which for me makes any state like "yes, you just deleted x" be an "x does not exist" error so at the moment I get around that by doing each device independently which takes a fair bit longer where slow APIs are involved. This is one of the 'recipes' - https://github.com/userdashboard/userdashboard.github.io/blob/gh-pages/administrators/stripe-subscriptions/applying-coupons-to-subscriptions.js https://github.com/userdashboard/userdashboard.github.io/blo... with some glue for Puppeteer v1 so a bit WIP still - https://github.com/userdashboard/userdashboard.github.io/blob/gh-pages/screenshots.js https://github.com/userdashboard/userdashboard.github.io/blo... The end result I think is really cool: https://userdashboard.github.io/administrators/stripe-subscriptions/revoking-subscription-coupon https://userdashboard.github.io/administrators/stripe-subscr... In the final incarnation people using my software will be able to point the screenshot generator at their own website and regenerate all the screenshots so they can reuse the documentation.

lostintangent 7y ago

I’d love to hear more about this! Do you have automation that runs as part of your CI builds, and dynamically captures the screenshots for your documentation using Puppeteer? If so, that is so cool :) Have you had much trouble with the automation scripts breaking as a result of app churn?

benologist 7y ago
So far I still manually trigger a regeneration but it's only a matter of time till it just runs automatically on any update. The main problem has been with Puppeteer, there is a chance it will just randomly crash at any point and it feels like there are a million little race conditions where you need to wait or keep retrying to access an element after it says a page has loaded so I have a lot of ugly code in my puppeteer-helper like: while (true) { try { element = await active.$('#element') } catch (error) { } if (!element) { sleep(100) continue } break } Another issue only pertained to getting the simulated device screenshots, switching the viewport configuration reloads the page which for me makes any state like "yes, you just deleted x" be an "x does not exist" error so at the moment I get around that by doing each device independently which takes a fair bit longer where slow APIs are involved. This is one of the 'recipes' - https://github.com/userdashboard/userdashboard.github.io/blob/gh-pages/administrators/stripe-subscriptions/applying-coupons-to-subscriptions.js https://github.com/userdashboard/userdashboard.github.io/blo... with some glue for Puppeteer v1 so a bit WIP still - https://github.com/userdashboard/userdashboard.github.io/blob/gh-pages/screenshots.js https://github.com/userdashboard/userdashboard.github.io/blo... The end result I think is really cool: https://userdashboard.github.io/administrators/stripe-subscriptions/revoking-subscription-coupon https://userdashboard.github.io/administrators/stripe-subscr... In the final incarnation people using my software will be able to point the screenshot generator at their own website and regenerate all the screenshots so they can reuse the documentation.