Search code examples
testingselectscrollcypresse2e

Cypress - using select() method with {scrollBehavior: 'center'}


Website i am testing uses fixed menu, so i need to use {scrollBehavior: 'center'} setting for click methods, to avoid getting error saying that element i want to interact with is covered by my menu.

Same problem occurs with <select> elements i want to interact with, but it seems that setting {scrollBehavior: 'center'} does not work for select() method. I checked docs and in this mettod options param there is indeed no scrollBehavior setting. Is there any way to solve that problem?

I also tried using something like this, to scroll the page down, so element is no longer covered, but it had no effect.

cy.get('select')
    .scrollIntoView({offset: {top: 600, left: 0}})
    .select(someValue);

Solution

  • It turns out that there global scrollBehaviour setting that can be set in cypress.config.js file:

    module.exports = {
      e2e: {
        baseUrl: 'http://localhost/spoke9/spoke-and-chain-testing/web/',
        scrollBehavior: 'nearest'
      }
    };
    

    Setting it to nearest solved this problem.