How to use _getBoxCenter method in Cypress

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})

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')
    })
})

You can have Cypress retry the expectation by changing .then() to .should().

I would also change the order you obtain the elements, since .should() retries the preceding command only.

it('should center the spider by left border', () => {
  cy.get('.wall').then(($wall) => {
    cy.get('.spider')
      .should(($spider) => { // repeat .get(spider) until except succeeds, or times out
        ...
        expect(spiderLeft).to.equal(spiderLeftAbs);
      });
  });
});

Also works with triggerable transitions, I tested with a hover transition (using cypress-real-events).

<style type="text/css">
  .target {
    font-size: 14px;
    transition: font-size 1s 1s;
  }
  .target:hover {
    font-size: 36px;
  }
</style>

BTW you may need to use some +/- on the pixels.

To be able to use cy.server() & cy.route() with fetch requests, you need to do as stated here: https://stackoverflow.com/a/49088084/9947826

You can pass a callback function to a should() in case you need some more sophisticated behaviour. In the below code I am extracting the href attributes, and expecting the list of attributes to contain a specific url:

const url = '/something'
cy.get('div.infoTextCarousel')
 .find('a')
 .should($a => {
     let hrefs = $a.map((i, el) => {
      return Cypress.$(el).attr('href')})

      expect(hrefs.get()).to.contain(url)
  })

Hope this helps.

Your commands file would have a command like this. Note that this will log the cy.wraps and you may want to pass log: false to suppress that if you choose. You can also add another agrument and have an if block for text to use data-testid with .contains()

Cypress.Commands.add(
  'byTestId',
  { prevSubject: 'optional' },
  (subject, id) => {
    if (subject) {
      return cy.wrap(subject).find(`[data-testid="${id}"]`)
    }
    return cy.get(`[data-testid="${id}"]`)
  },
)

This would be an application of the command.

cy.byTestId('first-id')
  // maybe some assertions here for visibility check
  .byTestId('id-inside-first-element')
  // maybe some assertions here for visibility check
  .byTestId('id-within-this-second-element')

    cy.get('your_button').then(($button) => {
        if(cy.get($button).should('not.be.disabled')){
            //your logical code for button ACTIVE
        }
        else{
            //your logical code for button NOT ACTIVE
        }
    })

The first part is fine, but because of the cy.wrap you need to use should or then on the cy.get('@oldunreadmessage')

cy.get('.unrd').then(($span) => {
    const newunread = $span.text();
    cy.get('@oldunreadmessage').should('have.text', newunread);
})

or

cy.get('.unrd').then(($span) => {
    const newunread = $span.text();
    cy.get('@oldunreadmessage').then((oldunread) => {
        expect(newunread)...
    }
})

Update: This isn't solid. I've just done some refactoring and it seems that even this solution is flawed. It is possible for the redirect to happen in between cypress visiting the page and triggering the cy.wait so the test ends up waiting for something that has already happened. The below might still work for you depending on when your redirect is triggered, but if it's triggered on initialisation, it appears this will not work.

Not really loving this solution as the redirect still happens (I haven't found a way to cancel it), but it at least tests that the redirect happens, and allows me to check the query:

cy.intercept({ pathname: `/sessions/new` }).as(`loginRedirect`)

cy.visit(`/dashboard/`)

cy.location().then(($location) => {
  cy.wait(`@loginRedirect`).then(($interceptor) => {
    const { query } = urlParse($interceptor.request.url)
    expect(query).to.equal(`?token=true&redirect=${$location.href}`)
  })
})

Note: route2 changed to intercept in v6.