How to use addElementBoxModelLayers method in Cypress

In order to achieve this just follow the Cypress FAQ:

cy.get('input#ftsAutocomplete').invoke('val').then(pickUpLocation => {
        cy.get('input#dropFtsAutocomplete').should('have.value', pickUpLocation)
    })

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

I'm not sure I'm getting the complete picture, but good skills checking Cypress.dom.isVisible($0).

You can use the exact same expression in your test by using .should() with a callback

cy.get('.price-total')
  .should($priceEl => {     // retries if necessary when expect fails

    expect(Cypress.dom.isVisible($priceEl).to.eq(true)

  })

I'm not sure this is definitive, have seen an Angular app (select control) where the parent was display: none but the child was visible to the user (ref Access element whose parent is hidden)

In this answer, a custom function is used to redefine the criteria for visibility. The trick is to figure out what to check for your app...

// Change this function if other criteria are required.
const isVisible = (elem) => !!( 
  elem.offsetWidth ||                          
  elem.offsetHeight || 
  elem.getClientRects().length 
)

You may just have a delay (e.g animation) before the parent element removes display: none.

Check the parent in the console, see if it eventually has a different display value.

In that case, first check the parent (not the child as Manuel says).

cy.get('td.item-total')
  .should('not.have.css', 'display', 'none')  
  .find('.price-total')
  .should($priceEl => {     
    expect(Cypress.dom.isVisible($priceEl).to.eq(true)
  })

You can shorten it a bit with jQuery operators.

$el.find(...) works since $el is a jQuery object.

Also change .invoke('text') to .text().

cy.get('.bms-scoreboard__game-tile')
  .each(($el) => {

    if ($el.hasClass('bms-scoreboard__game-tile--cancelled')) {

      // can work with jQuery operators here
      const text = $el.find('.bms-scoreboard__game-tile-status--cancelled').text()
      expect(text).equals('Cancelled')
    }

    if ($el.hasClass('bms-scoreboard__game-tile--pre-game')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const gameTime = text.split(" ").pop()
      expect(['AM', 'PM']).to.include(gameTime)
    }

    if ($el.hasClass('bms-scoreboard__game-tile--final')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const finalTitle = text.trim()
      expect(finalTitle).to.be.oneOf(['Final','Final (OT)'])
    }

    if ($el.hasClass('bms-scoreboard__game-tile--ongoing')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const ongoingTitle = text.trim()
      expect(ongoingTitle).equals('Ongoing')
    }
  })

Adding cookie whitelist seems to help:

  Cypress.Cookies.defaults({
                whitelist: 'AuthUser'
            })

But as I understand documentaion, Cypress should clear chacke only after all test scenarios in specific test file - not each test scenario?

Then You can directly use the text to find the locator and click it, something like:

cy.contains('Tool').click()

For the search button, you have the aria-label tag, you can use that directly:

cy.get('input[aria-label*="main-search-box"]').type('text')

Ok, fact is, the current version of the Cypress.io does not support interaction with window events. The way how to cheat it is the cy.stub() method.

This is my solution. The scenario:

1. Click the "Save Button" in GUI.
2. window.prompt() is opened.
3. Write the save name (like "Saved by Thomas") into the prompt.
4. Click "OK" in prompt and save the value.

And the code in Cypress:

    it('Save the value inside Prompt', () => {
            cy.window().then(win => {
                cy.stub(win, 'prompt').returns('The value you write inside prompt')
                cy.get('#save-changes-in-gui-button').click();
                //... Saved value assert
            })
    })

Cypress by default change window.pompt() event by the stub and simulate click "OK". This solution works for me now. Hope, it could help someone else :)

Like this for example:

it('Some test', () => {
    cy.intercept('/').as('myRequest');
    cy.visit('www.example.com');
    cy.wait('@myRequest').then((interception) => {
        cy.log(interception.response.body);
    });
});

To listen for only ads requests use cy.intercept('/ads'). Remember to put intercept before you open the page.

Reference: https://docs.cypress.io/api/commands/intercept

Old question, i had the same problem, but my solution was to simply ensure that there was no import { cy } from 'date-fns/locale'; at the top of your page.