Paul Hammant's Blog: UI Component Testing

Particularly with Selenium-WebDriver but also with fat-client UI automation techniques, we have ended up doing test automation for whole pages/windows. Sometimes even whole sequences of pages, and that is so slow:

Sure the latter ‘e2e’ or full-stack needs to be done, but we are should be keeping that to the last 10% of tests. We should have the bulk of the UI automation testing focus on the smallest rectangle we can reasonably test in each case. We should make test harnesses for those widgets that in themselves do not get deployed to production:

(entirely faked screenshot)

And we should destruction-test those rectangles (components/controls) in their test harnesses and disconnected from as much slow down-stack infrastructure as possible - aiming to hit a throughput of multiple tests a second. No, not clicks, whole tests.

Of course this cannot be black box testing, it is gray box, but it is very much worth the setup costs.

Don’t think this is possible? It is, I promise.

Going even further, we could use a similar technique for having functional tests for the rest of the UI that featured the credit card rectangle without doubling the tests for it:

In this case we could inject the credit card details into the “model” of the UI, in a single Selenium operation. Well we could if the web-framework has a back door for testing as Angular does via its Protractor testing tech. I made ngWebDriver for pure-Java teams that’s a port of the JS functions of Protractor (ngWebDriver):

NgWebDriver ngWebDriver = new NgWebDriver(webDriver);
ngWebDriver.mutate(formElement, "card", "{'num': 5105105105105100, 'expMM': 11, 'expYY': 2021, 'sec': 123}");

Feb 10, 2017: Tom Coleman’s Component-Driven Development blog entry - is the same topic area, and alludes to testing possibilities. Componentdriven.org links back to Tom’s blog entry.

Nov 20, 2019: Nrwl/Nx team blog entry Nx 8.8: Now You Can Write UI Tests with Storybook and Cypress. Before this Storybook’s use of UI automation was for visual testing. not functional correctness. This is the Nx team reusing a project’s deployed Storybook site for Cypress tests, rather than developing their own test harness: brilliant.

Updates: Oct 2018 - add third pic and notes