I have been experimenting with this and the possibilities are very exciting. https://userdashboard.github.io/dashboard-sitemap https://userdashboard.github.io/

I have been experimenting with this and the possibilities are very exciting. https://userdashboard.github.io/dashboard-sitemap https://userdashboard.github.io/dashboard-sitemap These screenshots are generated from the test suite for all my UI tests. I have puppeteer navigate a series of steps and save each screenshot, resizing to mobile resolutions. This is done in Chrome, Puppeteer also supports Firefox. The screenshots are then integrated with my documentation both as sitemaps like above and to demonstrate usage: https://userdashboard.github.io/administrator/reset-codes https://userdashboard.github.io/administrator/reset-codes They are generated from a simple sequence of steps added to my tests, which can run with or without saving/generating the screenshots: req1.screenshots = [ { hover: '#administrator-menu-container' }, { click: '/administrator' }, { click: '/administrator/accounts' }, { click: `/administrator/account?accountid=${user.account.accountid}` }, { click: `/administrator/account-reset-codes?accountid=${user.account.accountid}` } ] The code for parsing those steps into Puppeteer actions is available here: https://github.com/userdashboard/dashboard/blob/master/test-helper-puppeteer.js https://github.com/userdashboard/dashboard/blob/master/test-... In addition to being user-friendly for documentation there is tremendous QA opportunity to being able to observe every page at every resolution. Everything required better code too, you cannot forget to link to a page or have some part of the navigated route not working or have anything going wrong anywhere. I am finalizing localization so in the next week or so the documentation will also be able to switch between any combination of language and device. Note: some of my documentation/screenshots hasn't generated yet