Cypress - Always focus element to a given offset from top of screen

Question

When I run tests in Cypress, it always scrolls down to the element, so it is in the very top of the screen. But I'm writing tests for a WordPress system, where the fixed bar always is in the top of the screen taking up 75px (ish). So I can never see what's going on, when my test run.

Are there a way, where I can define all elements, for all tests, to so when they're in focus, that they are 200px from the top? Like a global constant?

Code

cy.get( 'tr[data-slug="cmb2"]' ).should( 'have.class', 'active' );

See the problem here:

---

Solution attempt 1: Set it in the .env configuration-file

It would be smart if I could set it in the cypress.json-file. I read the docs on Cypress Configuration, but couldn't find it in there.

---

Solution attempt 2: Hiding the admin-bar with CSS

I could also try and add a stylesheet to always load, when running Cypress-tests in the backend. But is this a normal way to get around it?

And even if I did this, I wouldn't know how to do this.

---

Solution attempt 3: Use scrollIntoView

I tried adding scrollIntoView with some options:

cy.get( 'tr[data-slug="cmb2"]' ).scrollIntoView({ offset: { top: 150, left: 0 } }).should( 'have.class', 'active' );

But I'm still unable to see the title of my div, when hovering it. I also tried the solution suggested here that looks a bit like it.

---

Solution attempt 4: Add scrollBehavior to my .env-file

I add that to my .env-file:

{
   "env": {
      "name": "staging",
      ...
   },
   "viewportWidth": 1100,
   "viewportHeight": 1800,
   "watchForFileChanges": false,
   "chromeWebSecurity": true,
   "scrollBehavior": "bottom"   <---- My attempt!
}

But no cigar:

---

Related questions

• Cypress scrolling behaviour on get and relative positionning

Answer 1

I'm not sure about your Wordpress site, but the following worked for the Material-UI site referenced in Cypress scrolling behaviour on get and relative positionning

.scrollIntoView() offset should be negative

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})
}) 

use native scrollIntoView

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  cy.contains('Elvis Presley')
    .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom
})

make header transparent

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.get('header').invoke('css', 'opacity', '0')
  cy.contains('Elvis Presley').scrollIntoView()
})

using .scrollTo()

This command applies to the scroll container, not the element you target, so the positioning may not come out correctly every time.

function getScrollParent(node) {
  if (node == null) return null;

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley')
    .then($el => {
      const scrollParent = getScrollParent($el[0])
      cy.wrap(scrollParent).scrollTo('center')
    })
})

Answer 2

Actually, there is a bug on this already reported here. Cypress peeps fixed this here. It needs to be merged though.