Next.js项目Cypress测试剪贴板复制按钮报错求助

问题原因 #

测试运行时win.navigator.clipboard对象未定义，导致无法对其writeText方法进行stub操作。这是因为部分测试环境（如Cypress默认浏览器环境）可能未原生暴露剪贴板API，或页面加载时该对象尚未初始化。

解决方案 #

方案1：提前初始化剪贴板对象

在stub前先检查并创建clipboard对象，确保后续stub操作能正常执行：

it("shortened link is copied to clipboard", ()=>{
  cy.visit("/dashboard/links")
  cy.window().then(win => {
    // 确保clipboard对象存在，不存在则初始化
    win.navigator.clipboard = win.navigator.clipboard || { writeText: () => {} };
    // 对writeText方法进行stub并命名为copy
    cy.stub(win.navigator.clipboard, 'writeText').as('copy');
    
    cy.getByDataId("copy-url").click();
    // 验证方法被调用一次，且参数正确（注意修正url拼写，前端代码中是cxorz而非czors）
    cy.get('@copy').should('have.been.calledOnceWith', 'cxorz.vercel.app/google');
  })
})

方案2：在全局前置钩子中统一处理

如果多个测试用例需要用到剪贴板测试，可以在beforeEach中提前初始化：

beforeEach(() => {
  cy.visit("/dashboard/links");
  cy.window().then(win => {
    // 强制初始化clipboard对象
    win.navigator.clipboard = win.navigator.clipboard || {};
    cy.stub(win.navigator.clipboard, 'writeText').as('copy');
  });
});

it("shortened link is copied to clipboard", ()=>{
  cy.getByDataId("copy-url").click();
  cy.get('@copy').should('have.been.calledOnceWith', 'cxorz.vercel.app/google');
})

关键注意事项 #

• 测试用例名称应匹配实际测试逻辑（原名称"shortened link is visible to user"与复制功能测试不符，建议修改）；
• 验证调用参数时需使用calledOnceWith而非calledOnce（calledOnce仅验证调用次数，不接受参数）；
• 注意修正测试代码中url的拼写错误（前端代码中是cxorz.vercel.app，测试中误写为czors.vercel.app）。

内容的提问来源于stack exchange，提问作者Innocent Victor Mark