0

I just migrate my application from angular 12 to angular 15 (and material 15). The cypress also migrated from 8.7.0 to 12.3.0

Since the migration, the existing cypress tests are not constant in execution. I have too kinds of issue:

  • Cannot get element by id or css class. The error is “…is being covered by another element“
  • Synchronisation is not perfect on input chaining. As example :

cy.get('#birthPlace_id') .clear() .type('London') .should('have.class', 'ng-valid');

In this test code execution, the type starts meanwhile the clear instruction is not completely finished. This give a wrong input value with a mix of previous and new typed values.

Here is my configuration: ` defaultCommandTimeout: 60000, execTimeout: 60000, pageLoadTimeout: 60000, requestTimeout: 60000, responseTimeout: 60000, taskTimeout: 60000, videoUploadOnPasses: true, screenshotOnRunFailure: false, videoCompression: false, numTestsKeptInMemory: 0, animationDistanceThreshold: 20, waitForAnimations: false, env: { 'NO_COLOR': '1' }, retries: { runMode: 4, openMode: 0 }, fileServerFolder: '.,', modifyObstructiveCode: false, video: false, chromeWebSecurity: true, component: { devServer: { framework: 'angular', bundler: 'webpack' } }

`

I already tried to:

  • Add “force: true”
  • Add a wait(1000) or another value
  • Use click() method before
  • I increased the timeout in the config file for all

But same comportment randomly it can also work perfectly, but major time not at all.

I would expect that the call to clear(), type(), should() are perfectly synchronised and does not start before the previous one is not finished yet.

My question: is there a better way to do chaining ? Does something change since Cypress 8 to chain instruction on element ?

gds
  • 1
  • 1

1 Answers1

2

In this test code execution, the type starts meanwhile the clear instruction is not completely finished.

You can guard against this by adding an assertion after .clear().

This retries the test flow until the control has been cleared.

cy.get('#birthPlace_id')
  .clear()
  .should('have.value', '')
  .type('London')
  .should('have.value', 'London')
S.Yelda
  • 21
  • 4