Re:Cypress: Fast, easy, and reliable testing for anything th...
by Macha on Friday December 11, 2020 @09:07AM
(#25385889)
The one slight gotcha is if you go for the page object pattern the intuition is that each page object holds a reference to the cypress element that formed it so you can do new LoginForm(cy.get('#loginForm')) or similar which is a mistake because of the way cypress chaining works - it will result in only being able to use a single method once on the page object. Instead you need to query fresh again each time.
Which is fine when the page object is a login form, but a bit more comfortable complicated when it's notification 5 or something.
Re:Cypress: Fast, easy, and reliable testing for anything th...
by veidr on Friday December 11, 2020 @12:08PM
(#25387993)
Good point, I'd gotten used to that and forgotten how it is kind of counterintuitive at first. Our base test helper object does this:
get root() {
// It is important here to run cy.get()
// each time this property is accessed.
// Lots of methods of this class chain
// off of `this.root` so it needs to be
// re-evaluated every time.
return cy.get(rootComponentCss);
}
find(selector: string, options?: any) {
return this.root.find(selector, options);
}
...so that component-specific test helper objects (subclasses) can just do something like: get sendMissileAlertButton() {
this.root.find('.x-hawaii-missile-incoming');
}
That way, it looks up the target element every time it is used in a test.And in tests, you can just do:
tester.root.find('select.foo').select('hoge');
tester.sendMissileAlertButton.click();
EDIT: fixed code example, sorry! ;-)
But yes, when we tried to run with the patterns they advertise, the tests became indeed hard to write and read; maybe we did it all wrong but it's at least consistent with the experience expressed by you and others in the thread here.