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?

Solution

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