Open Nikeshbajra opened 3 years ago
Hi @Nikeshbajra Thanks for submitting the issue!
Can you please describe your setup? Like:
I have a very close issue with an Angular popup and a file upload inside it.
After selecting a file name with this cypress call cy.get('input[name=fichier]').attachFile(filename);
the "Save/Enregistrer" button remains disabled when used in an Angular popup. According to front end code, the "Save/Enregistrer" button is disabled because the form is detected as still invalid, but why?
The same function used on a page and not in a popup works perfectly. @Nikeshbajra are you in a popup?
The "Save" button should be enabled after file selection.
Open the popup with the file selection.
Use cy.get('input[name=fichier]').attachFile(filename);
Then try to programmatically click on the "Save" button of the popup
See the test fail with error
Timed out retrying after 10050ms: cy.click() failed because this element is disabled:
<button type="submit" mg-button="" _nghost-nuc-c529="" ng-reflect-type="submit" ng-reflect-size="SM" disabled="" data-style="mg-btn mg-btn-primary" data-size="SM">...</button>
Fix this problem, or use {force: true} to disable error checking.
Cypress 6.9.1 MacOS 11.3 (also in a Vagrant Debian 10.8à Chrome 90.0.4430.93
My Code: cy.get('input[type="file"]').attachFile(['Images/mart_logo.png'])
I am using the cypress-file-upload plugin I am using selectorshub to select target element. Can you explain a bit more about "which event is required by its implementation to "consume" the file object". I didn't quite understand it
The blue color in the "Browse" button here is due to the hover effect
Cypress Version:
Cypress package version: 7.2.0
Cypress binary version: 7.2.0
Electron version: 12.0.0-beta.14
Bundled Node version:
14.15.1
Google Chrome
Version 90.0.4430.93 (Official Build) (64-bit)
@StephaneColson my problem isn't the save button being disabled, instead it is the image being uploaded but the front-end not recognizing it.
@Nikeshbajra ok but maybe the same issue cause.
I had a similar problem using Angular: the form was not validating even though the file upload control appeared to have been entered correctly. I was able to work around the issue by triggering the 'input' event.
cy.get('#fileUploadElement')
.attachFile('file_name.pdf')
.trigger('input');
I'm not sure if this is something that ought to be supported by cypress-file-upload or if it's just an Angular implementation detail. At any rate, hope that helps.
Thank you @0xbane it solved the problem for me. I couldn't find the solution anywhere else 👍
I face same issue, however i have my type=file element was hidden. so the trigger should be the button. is it possible to attach to the hidden element?
I have uploaded the image using the plugin but angular doesn't seem to change the class from ng-invalid to ng-valid