CODEWITHSUNDEEP
typescriptautomationcypress
PythonNewbie
PythonNewbie

Reputation: 1163

How to drag and drop custom file using Cypress

I'm currently working on doing a drag and drop file where I basically have a file format called BMPROJ which contains a JSON. However, the website works that it needs to drag and drop the file as a BMPROJ file to be able to accept it (A raw json would not work) and inside the BMPROJ it is just a simple json file.

The reason I am writing here is that I have a code that is following together with using cypress-file-upload:

cy.get('.mod-view-3d').attachFile({
    filePath: 'C:/Users/MY-PC/Desktop/BOM/1BC475E2-7578-471A-AD23-K51H1528FH1.BMPROJ',
    encoding: 'utf-8'
}, {
    force: true,
    subjectType: 'drag-n-drop'
});

And what I want to do is to drag and drop the file 1BC475E2-7578-471A-AD23-K51H1528FH1.BMPROJ however the error I do get is:

A fixture file could not be found at any of the following paths:

> cypress\fixtures\C:\Users\MY-PC\Desktop\BOM\1BC475E2-7578-471A-AD23-16ED72F30C1E.BMPROJ
> cypress\fixtures\C:\Users\MY-PC\Desktop\BOM\1BC475E2-7578-471A-AD23-16ED72F30C1E.BMPROJ{{extension}}

Cypress looked for these file extensions at the provided path:

> .json, .js, .coffee, .html, .txt, .csv, .png, .jpg, .jpeg, .gif, .tif, .tiff, .zip

Provide a path to an existing fixture file.

My question is - How am I able to drag and drop the file?

Upvotes: 2

Views: 6585

Answers (2)

Fody
Fody

Reputation: 31954

You could move that file into the /cypress/fixtures folder, for purposes of testing that would be logical - everything test related within the cypress folder.

Or try raw mode of cypress-file-upload, but the file must still be within the project folder (where cypress.json is).

const filePath = '1BC475E2-7578-471A-AD23-16ED72F30C1E.BMPROJ'  // in project root

cy.readFile(filePath, 'binary')
  .then(Cypress.Blob.binaryStringToBlob)
  .then(fileContent => {
    cy.get('[data-cy="file-input"]').attachFile({
      fileContent,
      filePath,
      encoding: 'binary',
      lastModified: new Date().getTime(),
    },
    { 
      subjectType: 'drag-n-drop', 
      force: true
    })
    .trigger('change')  // or 'input', 'dragend', 'drop' may work
  })

Note that cypress-file-upload cannot work with files outside the project root. Krishna's example gist works because his upload file is within the project.

Your file can be named anything, because in raw mode you are explicitly telling cypress-file-upload what encoding you have - it does not need to infer the type from the extension.

Upvotes: 1

Krishna Majgaonkar
Krishna Majgaonkar

Reputation: 1746

For your issue BMPROJ extension is not recognized as valid file extension so Cypress is throwing an error.

Cypress 9.3.0 added new commands called .selectFile(), to select files in an HTML5 input element or simulate dragging a file into the browser. You can try simulating drag and drop.

Please take a reference of this document and modify your command.

cy.get('.mod-view-3d').selectFile({
  contents: Cypress.Buffer.from('file contents'),
  fileName: ${name of your file},
  lastModified: Date.now(),
})

Upvotes: 2

Related Questions