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}");
Updates:
Martin Fowler sets the general theme with ComponentTest (2013)
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.
Feb 15 2017: I made a proof of concept for a SpringFramework app on GitHub. See its COMPONENT_TESTING discussion.
Jun 2017: A video demonstration showing the layered approach in practice - unit tests, service/REST endpoint tests, and UI component tests with Selenium driving the component in isolation with the lowest tier mocked out. This is of my Build Radiator showcase. See COMPONENT_TESTING discussion.
Oct 2018: add third pic and notes
Apr 2019: Swing Component testing demo project of mine. Java’s fat UI tech “Swing” and MarathonMan testing framework for it started by colleagues in my ThoughtWorks days and maintained by other today.
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.
May 2022: Playwright (Microsoft) released its experimental Component Testing (CT) support. See video.
Jun 1, 2022: Cypress v10.0.0 release introduced Cypress Component Testing - mounting and testing individual UI components in isolation, separate from end-to-end tests.
Mid 2022: Storybook, which was already the industry standard for “detaching” UIs from the stack, released Interaction Testing.
Jun 17, 2025: An update by me: UI Component Testing Revisited