How to use onWsConnection method in Cypress

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

Accessing new windows via Cypress is intentionally not supported.

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

1. Write a test to check that when performing the action in your app, the window.open event is called by using cy.spy() to listen for a window.open event.

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'open')
  }
})

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called')

2. In a new test, use cy.visit() to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

cy.visit('http://localhost:3000/new-window')

// Do the actions you want to test in the new window

Fully working test example can be found here.

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.

As far as I know, this would be the "Cypress" way to access data stored in a json file.

ref: https://docs.cypress.io/api/commands/fixture.html#Accessing-Fixture-Data

cy.fixture('user').then((user)  => {
    var name = user.name
    var pass = user.password
})

Where 'user' is /fixtures/user.json

{
    "name": "username",
    "password": "password1234"
}

So right now according to the documentation of Cypress you can use stubs to change the behaviour of prompts like this

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'prompt').returns('my custom message')
  }
})

cy.window().its('prompt').should('be.called')
cy.get('any_selector').should('have.value', 'my custom message')

Check this for further info

If you don't want to use clipboardy package you can also use this:

cy.window().then((win) => {
    win.navigator.clipboard.readText().then((text) => {
      expect(text).to.eq('your copied text');
    });
  });

in your case, it turns to something like

   cy.get('td').find('div').find('span').find('button').find('i').eq(0).click().then(()=>{
    cy.window().then((win) => {
      win.navigator.clipboard.readText().then((text) => {
        console.log("Helloooo:"+text);
      });
    });
   })

The jQuery .index() method is useful here

Search for a given element from among the matched elements

cy.contains('table thead th', 'Contact')
  .then($th => $th.index())
  .then(contactIndex => {
    cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
  })

You could use the Navigation Timing API:

In your test you will need to assert something like:

expect(performance.navigation.type).to.equal(performance.navigation.TYPE_RELOAD);

I got the solution. There are 3 other iframes in the page and each iframe is inside a container. I intended to perform action on element insode the 2nd iframe and by default my code was trying to work on element in 1st iframe.

Cyress did not give the error about multiple iframes being found found. So it threw me off with the 0x0 pixel error. Following worked for me:

  cy.get('parentContainer').within(()=>{
        cy.get('iframeselector',{timeout: 150000})
        .its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).find('p').should('be.visible').clear().type('abc')
})