daniel_puterman's comments

There are quite a few visual testing tools, for example WebdriverCSS (https://github.com/webdriverio/webdrivercss), which is an open source visual testing framework built on top of WebdriverIO. Visual testing tools actually differ quite a bit from one another in many ways (automation framework integration, if any, baseline management, comparison engine etc).

Full disclosure - I'm part of Applitools' core team. Since the service we provide is visual testing, we work with a lot of web development teams and automation teams. I've encountered different levels of unit tests and e2e tests and I can't say there's a single methodology to "rule them all". Some test only specific pages, some browse the entire website, some load specific components to a separate page for unit testing, and some don't. Some have their R&D team provide "id" to each element (which is set "forever") so the automation team has a very easy time locating elements, and some have to "make do". So on that matter, I think you should go with whatever gives you the best ROI.

The questions "which elements to check?" and "how many things to validate?" are exactly the questions for which there's a really good and simple answer: use visual testing and validate everything with a single call. Got a signup page with multiple options and inputs? awesome. use visual testing on the page and voila, all the elements and data in the page are validated, no element-specific validation code required. In fact, you can flow through your application, use visual test on every page (or major event), and boom! You got dozens if not hundreds or more elements validated in a single swoop.

Applitools ( https://www.applitools.com ) does an extremely good work in making visual testing trivial, so you can have full blown E2E validation on your website/webapp with almost no validation code actually written. It's worth trying us out. We allow for a free account, and our SDKs are open source.