search

abramenal / cypress-file-upload

File upload testing made easy
https://npm.im/cypress-file-upload
MIT License
496 stars 89 forks source link

Can't upload file to custom file input. #266

Closed viengiang closed 3 years ago

viengiang commented 3 years ago

Current behavior:

Thanks for your work, this helps me a lot in e2e-testing. When I tried to upload a file to a custom file input, I don't see anything happen. image

image So I change the CSS and try again image But the result doesn't like my expectations. image

Desired behavior:

My expectations are: When I upload the correct file: image image

When I upload the incorrect file: image

Steps to reproduce: (app code and test code)

Here is my code, can anybody help my, please? Many thanks. cy.get(MY_CONTENT.cssSelector.availableTypes.cmp_product_catalog.cmp_upload_pdf.btn_add_pdf_file) .attachFile(pdf_file_20mb, {force: true});

abramenal commented 3 years ago

Hi @viengiang Thanks for submitting the issue!

That is great. I think what you're missing is the events part. So, as you see, the file is actually gets attached to the input#fileInput element. So the difference you're facing when attaching file manually vs doing it with the plugin is events – in case of plain HTML5 input mode (which is default) only change event is triggered.

I suggest to check out your implementation and see, on which events do you trigger your logic of validating/uploading a file. You might find one of these events used: https://github.com/abramenal/cypress-file-upload/blob/main/src/constants.js#L14 If it is so, I suggest to change your command to cy.get().attachFile(pdf_file_20mb, { subjectType: 'drag-n-drop' })

viengiang commented 3 years ago

Thanks for your sharing @abramenal

After reading the comment, I already tried to find out the event and the "click" event is what I need. So, when I trigger click event first and attach the file after. This actually works.

cy.get(MY_CONTENT.cssSelector.availableTypes.cmp_product_catalog.cmp_upload_pdf.btn_add_pdf_file).trigger('click', {force:true}).attachFile(pdf_file_20mb, { force: true });

Thank you again. Have a great day :)