Wrong API on file-upload using Cypress.io for E2E testing

Question

I am testing a portal with Cypress.io, which has a file upload functionality.

But my file always failed to upload because the API call is going wrong.

Correct API Call:
**

POST 200 /etl/v1.0.0/datauploaderetl/spaces/etl_jyddc0tx/data-files

**

But when uploading through Cypress, the following is the URL: **

POST 404 /etl/v1.0.0/datauploaderetl/data-files

** As you can clearly see, the API is incorrect. I added the wait here, still, it doesn't work. Following is the piece of code:

cy.fixture(fileName1).then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: fileName1,
            mimeType: fileType
        })
    });
    cy.waitUntil(() => cy.get(":nth-child(98) > .modal > .modal-lg > .modal-content > .modal-body")
        .should('contain.text', 'Status: completed')
    );

Please help!

Answer 1

At Command.js, add below code:

let LOCAL_STORAGE_MEMORY = {};

Cypress.Commands.add("saveLocalStorage", () => {
    Object.keys(localStorage).forEach(key => {
        LOCAL_STORAGE_MEMORY[key] = localStorage[key];
    });
});

Cypress.Commands.add("restoreLocalStorage", () => {
    Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
        localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
    });
});

Then at the test case file, add below beforeEach and afterEach block respectively:

 beforeEach(() => {
        cy.restoreLocalStorage();
    })

    afterEach(() => {
        cy.saveLocalStorage();
    })

This will solve the issue where Cypress clears the "local storage" at the browser.

Answer 2

As per documentation this is the way to upload file :

cy.fixture('filepath').as('filetoupload')
cy.get('input[type=file]').then(function($input) {
  // convert the logo base64 string to a blob
  const blob = Cypress.Blob.base64StringToBlob(this.filetoupload, fileType)
  $input.fileupload('add', { files: blob })
})

or

cy.fixture('filepath').as('filetoupload')

cy.get('input[type=file]').then(function(el) {
  // convert the logo base64 string to a blob
  const blob = Cypress.Blob.base64StringToBlob(this.filetoupload,fileType )

  const file = new File([blob], '<path>', { type: fileType })
  const list = new DataTransfer()

  list.items.add(file)
  const myFileList = list.files

  el[0].files = myFileList
  el[0].dispatchEvent(new Event('change', { bubbles: true }))
})

https://docs.cypress.io/api/utilities/blob.html#Image-Fixture