Resilient UI Tests
Front End Testing
Testing pyramid still a thing?
Testing Strategy
Jean Bauer
Resilient UI Tests
Frontend Developer
at WAES
The problem
<form class="form">
<label class="lbl" for="email">E-mail</label>
<input type="text" id="email" class="form-control" />
<form>How would you test if the input label is showing on the screen?
Some answers
- search for the "lbl" class name
- search for label on screen
- get the element by the "for" attribute
<form class="form">
<label class="lbl" for="email">E-mail</label>
<input type="text" id="email" class="form-control" />
<form>Some problems
- search for the "lbl" class name
What if there is a new element using lbl as class too?
- search for label on screen
What if there is a new label tag?
- get the element by the "for" attribute
What if the code changes to not use label anymore
(so no for anymore)
We are testing the implementation details.
🌱
This is where resilient tests comes in
UI
<form class="form">
<label class="lbl" for="email">E-mail</label>
<input type="text" id="email" class="form-control" />
<form>Test
const emailLabel = screen.getByLabelText(/e-mail/i)
expect(emailLabel).toBeInTheDocument()
"But what if someone change from <label> to <p>?"
Someone could ask
The test is still
going to work
✅
Before
After
I don't want this difference to break my unit and integration tests
UI tests
to the rescue
Yay, we have the whole pyramid of tests now
Is the pyramid still a thing for 2020?
Meet the Trophy
This is the end.
Thanks.