CODEWITHSUNDEEP
scrollcypress
A stupid Laugh
A stupid Laugh

Reputation: 33

Cypress Scrolling to get an element

I'm currently discovering the automation tool Cypress, and I have a problem with the most basic functionality.

What I want to do in my this is access this URL: https://www.unicef.fr/se-connecter/
Click on the password input, then type a password.

But whenever my code is about to type, the screen scrolls down and I get an error message saying that the password input cannot be found.

Here is the code I'm using :

cy.visit('https://www.unicef.fr/se-connecter/');
cy.get('#js-account-login-input-id').type("01223442342");

Any ideas how I can stop that auto scroll or is there something I'm doing wrong?

Upvotes: 3

Views: 2476

Answers (2)

Fody
Fody

Reputation: 31904

Essentially, you need to add an option to the type command

cy.get('#js-account-login-input-id')
  .type("01223442342", {scrollBehavior: 'center'})

I'm seeing two things blocking access to the input

  • a cookie popup with modal background is first covering the input dialog
  • the .type() command is placing the input at the top of the screen, but that places it underneath the menu where it is hidden

This is the full test, I added cy.viewport() just to make the display better.

cy.viewport(1500,1000)
cy.visit('https://www.unicef.fr/se-connecter/')

cy.contains('button', "C'est OK pour moi").click()       // accept cookies

cy.get('#js-account-login-input-id')
  .type("01223442342", {scrollBehavior: 'center'})

One more note, if the cookie popup sometimes does not appear (maybe it's dependent on your region), you will need to treat it conditionally - that is, only click if it appear in 4 seconds.

For this, add the cypress-if package to the project.

Then add .if() command before the cookie button click().

cy.contains('button', "C'est OK pour moi")
  .if()                                        // does cookie button show?
  .click()                                     // accept cookies

Upvotes: 4

jjhelguero
jjhelguero

Reputation: 2571

I pulled up the site and the password field does not match your id selector. I found js-account-login-input-password inside.

You can select the password box by other means in the case you choose to avoid using id.

cy.get('input[type=password]')

Upvotes: 0

Related Questions