Search code examples
javascriptfile-uploadcypress

Attempted to wrap alert which is already wrapped when using stub the second time in the same file

enter image description here I am trying to automate file upload using cypress and followed the blog below to install dependencies and calling the function from my tests. https://blog.qasource.com/software-development-and-qa-tips/how-do-i-upload-a-file-in-cypress.io

I have created the following fn in 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})
    //   .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

Then, in my test logintest.spec.js, I am calling like below but getting the attached error message. I don't think my code is clicking on the '+' sign as I don't see the dialog window open at all. enter image description here

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()// switching to the window to interact, reusing previously created fn.



        uploadfile.uploadexcel()

   
})

    
            
})

Getting error saying "Attempted to wrap alert which is already wrapped". I see restore command is used but not sure how to use with the code I have.

Solution

  • You should just be able to eliminate the cy.wrap().

    uploadexcel() {

  cy.get('#excel')
    .should('be.visible')
    .click({force:true})

  const csvfile = 'TestData_csv.xlsx';
  
  return cy.get('#fsp-fileUpload')   // return last command
    .attachFile(csvfile)    
    .trigger('input')
    // .trigger('change')   // or this trigger
}

    Strictly speaking, the return isn't necessary, but may be useful if you want to add a .then() inside the test like this

    uploadfile.uploadexcel().then(() => {
  // do something after upload completes
})

    so just return the last command to eliminate the nesting in uploadexcel()