Cypress新手求助：登录测试出现TypeError: window.parent.$ is not a function错误及配置问题

Hey there! Let's work through your Cypress login test issues one by one.

Understanding the TypeError: window.parent.$ is not a function Error #

This error pops up because your application code is trying to access window.parent.$—which assumes the parent window (in this case, the Cypress test runner window) has jQuery loaded and exposed as $. But Cypress doesn't expose jQuery on the parent window by default, so when your app tries to call this, it throws an error.

The Cypress.on('uncaught:exception', ...) fix stops the test from failing, but it doesn't fix the root problem. That uncaught exception likely breaks parts of your app's JavaScript (like dropdown menu logic that depends on that jQuery call), which is why you're seeing issues with those interactions.

Fixing the Root Cause of the jQuery Error #

Here are a few targeted solutions depending on your access to the application code:

1. Modify the Application Code (If Possible) #

If you control the app's code, update the line that calls window.parent.$ to add a safety check, so it only runs if the parent window actually has jQuery:

// Before
window.parent.$('.some-element').doSomething();

// After
if (window.parent && typeof window.parent.$ === 'function') {
  window.parent.$('.some-element').doSomething();
}
// Or fallback to the app's own jQuery if parent doesn't have it
else {
  $('.some-element').doSomething();
}

2. Mock the Parent Window's jQuery in Cypress #

If you can't change the app code, you can mock the $ property on the parent window from your test to prevent the error:

it('Log in to SUT', function () { 
  // Visit the page first
  cy.visit('/your-login-page-url');

  // Mock the parent window's $ before interacting with elements
  cy.window().then(win => {
    // Create a mock jQuery function that matches what your app expects
    const mockJQuery = () => ({
      // Add any methods your app calls on window.parent.$, e.g.:
      find: () => ({ click: () => {} }),
      val: () => ''
    });

    // Attach the mock to the parent window
    Object.defineProperty(win.parent, '$', {
      value: mockJQuery,
      writable: true
    });
  });

  // Proceed with your login steps
  cy.get('#username').type('xxxx'); 
  cy.get('#password').type('xxxx'); 
  cy.get('#btnLogin').click(); 
})

3. Check for Iframe Context #

Your app might be designed to run inside an iframe where the parent window has jQuery, but Cypress loads your app in its own iframe without that setup. Double-check if the login page is supposed to be embedded elsewhere, and adjust your test to mimic that context if needed.

Fixing the "No Tests Found" Issue with modifyObstructiveCode: false #

Adding that config shouldn't make your tests disappear—here's what to check:

• Validate your cypress.json syntax: Make sure it's valid JSON (no missing commas, mismatched braces). It should look like this:

  {
    "modifyObstructiveCode": false
  }
  

• Confirm test file location: Ensure your test is in the default cypress/integration folder, or that you've set the correct integrationFolder path in cypress.json.
• Restart the Cypress Runner: Sometimes config changes require a full restart of the Cypress app to take effect.
• Check for typos: Make sure the config key is spelled correctly (modifyObstructiveCode—capitalization matters!).

Extra Debugging Tips #

• Open the Cypress DevTools (click the "Open DevTools" button in the top-right of the test runner) to see the full error stack trace. This will tell you exactly which line in your app's code is calling window.parent.$, making it easier to fix.
• Verify that your app's own jQuery is loading correctly before login:

  cy.visit('/login')
  cy.window().should('have.property', '$') // Checks if the app's window has jQuery
  

内容的提问来源于stack exchange，提问作者Ozzy