0

I created a test that requires me to upload a file. I installed cypress-file-upload dependency into my project. I wrote the following script below. When I run the test it says it passed and that the file was uploaded, but when I check, the file is not uploaded because once a file has been uploaded, a message saying "File has uploaded successfully" should display. This is done with Node and with Angular. This is my first time creating a test of this nature, so any help or leads is appreciated. I followed the documentation, but I am still getting a false positive on my tests. Could the issue be that this particular HTML element is not a form and/or does not use an input?

This is my spec file. The png file is under fixtures in my project folder.

  describe("Upload test", () => {
    const imageFile = "lp.png";
  it("File can upload", () => {
  cy.get(".upload-file)").attachFile(imageFile)
        });
    });

The HTML for my upload file button. The frontend is in Angular.

<div class="button-group ng-star-inserted 
     <button class="btn btn-primary"/>  
/>
csb00
  • 1,091
  • 2
  • 18
  • 36
  • Where are your assertions? I can see the command to upload the file being issued (which would be green) but then no actual tests like `cy.contains('File has been uploaded successfully')` afterwards? – Rory Nov 09 '21 at 21:09
  • @Rory, I added the assertion and now it fails. – csb00 Nov 09 '21 at 21:20
  • Okay, so that's expected behaviour now at least. How is your form triggered to send - is there a button somewhere that needs to be `.click()`ed after your file has been uploaded? – Rory Nov 09 '21 at 21:23
  • @Rory Yeah there is a .click() at the end so that the form is triggered and sent. In order to upload the form, you have to click the "Upload from Computer" button first. – csb00 Nov 09 '21 at 21:29
  • Are you attaching the right file on right element? the reference value passed is `imageFile` whereas you have `image` as defined. – Dhamo Nov 09 '21 at 21:30
  • @Dhamo yes, that was a typo on my end - my apologies! Just edited that. – csb00 Nov 09 '21 at 21:31
  • Can you also update your complete DOM which has input element with class `upload-file`? – Dhamo Nov 09 '21 at 21:34
  • @cbs00 can you post your full test code please – Rory Nov 09 '21 at 21:34
  • @Dhamo That is the thing, it is not an input element. If you look at my code above, it is just a button, that is wrapped around a div. I was wondering if that could be the reason this is happening. – csb00 Nov 09 '21 at 21:37
  • I'd the similar issue and the input box with file type element was hidden, check the DOM carefully. And above DOM does not have any class name that you have in your test. Not sure how you derive it? – Dhamo Nov 09 '21 at 21:40
  • @Rory that is all the code. – csb00 Nov 09 '21 at 21:44
  • @Dhamo I will check it. Thanks – csb00 Nov 09 '21 at 21:47
  • @Dhamo I checked and there is not input hidden. – csb00 Nov 09 '21 at 21:52
  • @csb00 if that is the full test code then there isn’t a click() as you described earlier. – Rory Nov 10 '21 at 11:00
  • Can you add the complete DOM especially the part that has class `upload-file`? – Dhamo Nov 10 '21 at 16:38

0 Answers0