CODEWITHSUNDEEP
angularcypress
humayunrana786
humayunrana786

Reputation: 997

cypress-file-upload zip file in angular solution not working

I am trying to upload a file in angular solution using cypress. Using this plugin (https://www.npmjs.com/package/cypress-file-upload)

enter image description here

Here the code I used

const filepath = 'test-20210816-071154.zip'

cy.get(".mat-focus-indicator.mat-tooltip-trigger.add-button.positive-button.small-icon-button.mat-icon-button").attachFile(filepath)

That test case is passing but file upload is not working! Whereas same code I use to upload here enter image description here

it is working.

cy.get("#fileUpload").attachFile(filepath)

So my question - does cypress-file-upload plugin really work for angular solution? if so, how can it be?

using this code cy.get('input[data-placeholder="type diagram name"]).attachFile(filepath, { subjectType: 'drag-n-drop' }).trigger('change', {force:true}) it focuses on field not on import icon enter image description here

I finally get exact input direction, which is input[type="file"] and is in hidden assured by developer

cy.get('input[type="file"]').attachFile(filepath,{ mimeType: 'application/zip' }); used that - not uploading rather "invalid JSON file" message showing. What I can do now?

Upvotes: 2

Views: 1108

Answers (1)

Eddy Gilmour
Eddy Gilmour

Reputation: 3140

attachFile() should be used on an <input> (2nd example does).

But in the Angular app you attached to a <button>.

Need to go a div or two up the tree (hard to tell exactly from info given)

cy.get('button.add-button')
  .parent()
  .prev()
  .find('input')
  .attachFile(filepath)

That's a guess, if not ok post more html showing the <input> left of the button on the screen.

Example using Angular

Note { subjectType: 'drag-n-drop' } is required here (may or may not for your app).


it('uploads a file in an Angular app', () => {

  cy.viewport(1200,1000)
  cy.visit('https://kzrfaisal.github.io/#/afu')

  // Upload button is initially disabled
  cy.get('button').contains('Upload')
    .should('not.be.enabled')

  // Attach the file
  cy.get('input[name="files[]"]').eq(0)
    .attachFile('Asmara, Eritrea.jpg', { subjectType: 'drag-n-drop' })
    .trigger('change', {force:true})

  // Upload button is active
  cy.get('button').contains('Upload')
    .should('be.enabled')
    .click()

  cy.contains('Successfully Uploaded !')
    .should('be.visible')
})

Addtional note from Humayun Rana

By the way - the following code works-

const filepath = 'xxx.zip'
cy.get('input[type="file"]').attachFile(filepath,{ mimeType: 'application/zip' });

if using xpath -

cy.xpath('xpath to input').attachFile(filepath,{ mimeType: 'application/zip' });

Upvotes: 3

Related Questions