如何在Cypress端到端测试中Mock Chrome扩展内部函数？

Great question! The key thing to realize here is that your Cypress test code runs in a separate Node.js context, while your Chrome extension's code runs in the browser's sandbox (either the page context, content script context, or background script context). That's why your pseudocode GithubPullRequestListPageHandler.isMatch = () => true won't work directly—you're modifying a copy of the class in the test context, not the one actually running in the browser.

Here's how you can properly mock that method:

1. Understand Your Extension's Context #

First, figure out where GithubPullRequestListPageHandler lives:

• Page context: If the extension injects code directly into the page's global scope (uncommon for modern extensions, but possible).
• Content script context: Most likely—Chrome content scripts run in an isolated context separate from the main page, but can access the DOM.
• Background script context: Less likely if this handler is tied to page behavior, but worth checking.

2. Mocking for Content Script Context (Most Common) #

Since content scripts are isolated from the main page, you can't directly access their variables from Cypress. Instead, add a test-only hook to your extension code:

Step 1: Add a Test Hook in Your Extension #

In your extension's GithubPullRequestListPageHandler file, add code to expose a mock function only when Cypress is running:

// Inside your extension's page-handler.js file
import { GithubPullRequestListPageHandler } from './path/to/handler';

// Expose mock function to the window (only in test environments)
if (window.Cypress) {
  window.mockPullRequestListIsMatch = () => {
    GithubPullRequestListPageHandler.isMatch = () => true;
  };
}

Step 2: Call the Mock from Cypress #

Update your test to trigger this mock after the page loads:

import { GithubPage } from './../../../../page-objects/github/github.pageobject';

const githubPage = new GithubPage();

describe('GithubPullRequestListPageHandler', () => {
  beforeEach(() => {
    cy.intercept('path/to/api', { statusCode: 204 }).as('check');
    githubPage.visit();
  });

  describe('when visited', () => {
    it('should trigger the API request', () => {
      // Access the browser window and call our test hook
      cy.window().then((win) => {
        win.mockPullRequestListIsMatch();
      });

      // Wait for the intercepted request to complete
      cy.wait('@check').should('have.property', 'response.statusCode', 204);
    });
  });
})

3. Mocking for Page Context #

If your extension's code runs directly in the page's global scope (e.g., injected via a <script> tag), you can modify the class directly via cy.window():

it('should trigger the API request', () => {
  cy.window().then((win) => {
    // Modify the global class's method
    win.GithubPullRequestListPageHandler.isMatch = () => true;
  });

  cy.wait('@check').should('have.property', 'response.statusCode', 204);
});

4. Critical Notes #

• Timing: Make sure you run the mock before the extension's code checks isMatch. If the check happens on page load, use the onBeforeLoad option in cy.visit() to set up the mock early:

  githubPage.visit({
    onBeforeLoad: (win) => {
      if (win.mockPullRequestListIsMatch) {
        win.mockPullRequestListIsMatch();
      }
    }
  });
  

• Isolation: Chrome's content script isolation means you can't access content script variables from the main page or Cypress directly—hence the need for the test hook in your extension code.

内容的提问来源于stack exchange，提问作者Yuval Ben Arie