How do you set up UI components for testing?

Tally Barak (@tally) spoke at TestBash UK 2023 about components testing. They showed us how components testing differs from end-to-end testing along with tips on making tests stable, fast, and reliable plus more!

A woman presenting to a crowd of people

So we invite you to watch this talk and use this Club thread to:

  • Share what you’d like to apply or have already applied at work
  • Open a discussion about what you’ve learned
  • Share your appreciation for Tally
  • Ask a question

:film_projector: Watch “To Test a Component - Testing UI Components in 2023”

How about you? How do you build a testing strategy that includes components testing? What have you tried? What’s worked well and what could’ve gone better?

2 Likes

Haven’t watched video yet, but I have been under the impression, that if the components are built like UI widgets, and assuming the components can function in isolation standalone (hence the term component in my mind), then you could create dummy test pages to load & instantiate individual components (the way you intend for them to function in the final UI page/screen) to be UI tested like a UI-based unit test.

Validation can then be against the component UI or via checking browser state (javascript variables, DOM attribute state, cookies, local storage), but driving the component is via UI automation.

And if components need to interact with other components, then you can load up a test page with multiple components (but not the complete final UI page/screen, or not all components loaded) for integration tests of multiple component units.

I’m assuming tools like Cypress make this easier if not need to be cross browser, but otherwise Selenium and Playwright should suffice as well with this approach.

I never did get to test out this assumption of mine though.