Firefox Cross Origin Error Causing False-Positives / Unusual Errors

[emilyrohrbough]

Current behavior

In Cypress <12, test would fail with the following error:

You attempted to make a chai-jQuery assertion on an object that is neither a DOM object or a jQuery object.

In Cypress 12+

TypeError: $el.css is not a function error.

This error occurs ONLY in Firefox.

Findings

Issue: Chrome is working as expect by showing the correct error, where Firefox is showing this weird TypeError instead of the expected Cypress command error.

Findings: I have gone down quite the rabbit hole with this issue & I have narrowed down what is likely causing this issue to present itself.

• slimming down to one test - I am see the correct pass/fail of the element existence when slimming cy.get('.template-grid-item-title').should('be.visible') to cy.get('.template-grid-item-title') (I reduced this because get will verify existence for the use).
• after re-adding the first test.
  • I am seeing a firefox cross-origin script error surfacing in the second test from the first test’s fetch requests bleeding over (known issue but can’t find it 😕 )
  • this is causing two problems
    • causing the beforeEach hook to never execute the session command to restore the session
    • causing the cy.get('.template-grid-item-title') command to incorrectly “pass” when it doesn't exist
    • OR causing cy.get('.template-grid-item-title').should('be.visible') to report the weird TypeError: $el.css is not a function error because the subject never successfully queried and is undefined.
• After adding cy.wait(7000) (arbitrary timeout) to the first test, I am no longer seeing the cross origin script error and see no issues with querying the page in the second test
• When I remove the beforeEach hook and move calling cy.session() into the test body of each test, I am getting a false-positive passing test when no cypress commands actually executing at all 😰

Seem like this is an issue combination with test isolation + hanging xhr requests bleeding into the next test + Cypress doing something funky when it sees that error and providing false-positives when running in Firefox.

Desired behavior

Cypress correctly fails when cross-script error occurs in Cypress instead of false-reporting and/or skipping hooks in the queue.

Test code to reproduce

context('example', function () {
  beforeEach(function () {
    // details stored internally. - @emilyrohrbough
    login(xxxx, xxxx);
  });

 it('Test 1', function () {
    cy.visit('https://secure.vidyard.com');
  });

  it('Test 2', function () {
    cy.visit('https://secure.vidyard.com');
    cy.get('.template-grid-item-title')
    .should('be.visible');
    // .should('exist');
  });
});

const login = (email, password) => {
  cy.session([email, password], () => {
    cy.visit('https://auth.vidyard.com');
    cy.get('#username').type(email);
    cy.get('#next-login').click();
    cy.get('[data-testid="password-input"]').type(password);
    cy.get('#sign-in').click();
    cy.url().should('include', '/library');
  }, {
    validate() {
      cy.document().its('cookie').should('contain', '_ga')
    }
  });
};

Cypress Version

12.9.0

Node version

16.16.0

Operating System

MacOS 12.5.1

Debug Logs

No response

Other

No response