My company's web application has dozens of distinct pages that a user might hit. There are site-wide stylesheets, so changing one of them could affect every single page.
There are four or five different login types, each receiving a distinct set of pages.
There are many different possible device sizes, so we use media queries to (try to) make every page responsive and work properly at any size.
But the combination of (login types) x (total number of pages) x (device sizes) is huge, meaning that it's impractical to manually view every one after making a change to a global style that could potentially affect any of them. And indeed, after making such a change, there is often a layout bug--and sometimes a really catastrophic one--because we failed to catch the issue by viewing the affected page(s) on a device size where the layout is messed up.
Is there a tool that could automatically run through a massive number of possible page types, download each one, and validate that the appearance is correct?
This seems tricky, because "correct" is a human judgment about whether the page looks right, or whether everything that's supposed to be visible is actually visible. Also, much of this content depends on API calls initiated by javascript, and layout steps that only happen in javascript, and the layout can depend on what is contained in the data returned from the API call.
Can this be done?