赛普拉斯 - 使用带有 {scrollBehavior: 'center'} 的 select() 方法

Question

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

Answer 1

One way round the problem is to set the viewport very large at the start of the test, so that everything is in view already. The default of 1000x600 is not very realistic IMO.

For example, to match the monitor

cy.viewport(3000,2000)

Also .scrollIntoView() is dependent of the element having a parent with a scrollable region. It can also be blocked by flexbox CSS settings.

Answer 2

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.