Cypress: Fast, easy, and reliable testing for anything that runs in a browser

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.

[ Parent | on HN ]

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! ;-)

[ Parent | on HN ]