Cypress自动化测试报错：Attempted to wrap alert which is already wrapped

问题说明 #

我尝试用Cypress实现文件上传自动化，按步骤完成依赖安装后，运行测试遇到两个问题：

1. 报错：Attempted to wrap alert which is already wrapped
2. 文件上传流程中，点击操作未触发对话框弹出

相关代码 #

fileupload.js 类代码 #

class uploadoption {
  clickexcel() {
      return cy.get('#excel').click({force:true})
  }
  googlesheet(){
      return cy.get('#googleSheets').click({force:true})
  }
  
  csv(){
      return cy.get('#csv').click({force:true})
  }
 
  pastetable(){
      return cy.get('#pasteTable').click({force:true})
  }

  uploadexcel() {
    cy.get('#excel').should('be.visible')
      .click({force:true})
  
    cy.get('#fsp-fileUpload').should('be.hidden').invoke('show')
    cy.get('#fsp-fileUpload').click({force:true})
  
    const csvfile = 'TestData_csv.xlsx';
    
    return cy.get('#fsp-fileUpload').attachFile(csvfile)
  }

  alertsignup() {
      return cy.window().then((win) =>  {
          cy.stub(win,'alert').as('alert')
      })
  }

  closealert() {
      return cy.get('.flex').contains('Close').click()
  }
}
export default uploadoption

logintest.spec.js 测试代码 #

import emailSignup from './emailsignup'
import teamSelector from './teamSelector'
import fileupload from './fileupload'

{/* <reference types = "cypress" /> */}
const {commands} = require('../support/commands')

const { Input } = require("@angular/core")
const { wrap } = require("module")
const { isExportSpecifier } = require("typescript")

describe('our first suite', () => {
    const signup = new emailSignup()
    const signindepartment = new teamSelector()
    const uploadfile = new fileupload()

    it('first test', () => {
        cy.visit('/')
        signup.signupforfreelink().click()
        cy.get('.flex').should('contain',"Create your free account")
        cy.get('[for="emailSignup"]').should('contain',"Work email")
        signup.email()
        signup.continuebtn()
        signup.firstandlastname()
        signup.password()
        signup.signInButton()
        signup.alertsignup()
        signup.closealert()
        signindepartment.loginselectors('eng')
        signup.continuebtn()
        signindepartment.customersurvey(2)
        signup.continuebtn()
        uploadfile.clickexcel()
        signup.alertsignup()// 复用之前的函数处理弹窗
        uploadfile.uploadexcel()
    })
})

错误提示 #

Attempted to wrap alert which is already wrapped

解决方案 #

1. 解决alert重复Stub问题 #

错误原因是测试中两次调用signup.alertsignup()，每次调用都会重新Stubwindow.alert，而Cypress不允许重复Stub同一对象方法。

修改方案一：在Stub前先恢复已存在的Stub

修改fileupload.js中的alertsignup方法：

alertsignup() {
    return cy.window().then((win) => {
        // 若alert已被Stub，先恢复原方法
        if (win.alert.restore) {
            win.alert.restore()
        }
        cy.stub(win,'alert').as('alert')
    })
}

修改方案二：避免重复调用Stub

如果后续流程不需要再次监听alert，直接去掉测试中第二次signup.alertsignup()调用即可。

2. 解决文件上传对话框不弹出问题 #

从代码看，uploadexcel方法中重复点击了#excel，和之前的uploadfile.clickexcel()操作冲突，导致流程异常。

修改uploadexcel方法，移除重复的点击操作：

uploadexcel() {
    // 已通过uploadfile.clickexcel()触发过点击，此处无需重复操作
    cy.get('#fsp-fileUpload').should('be.hidden').invoke('show')
    cy.get('#fsp-fileUpload').click({force:true})
  
    const csvfile = 'TestData_csv.xlsx';
    
    return cy.get('#fsp-fileUpload').attachFile(csvfile)
}

同时注意：

• 确保#fsp-fileUpload是<input type="file">标签，Cypress的attachFile仅对该类型元素生效
• 确认TestData_csv.xlsx放在Cypress的fixtures目录下，或指定正确的文件路径

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