Will discuss in this article how you can handle uploading different file types using plugin called cypress-file-upload
which support many extension/encoding and can upload multiple files through UI and API also, this plugin can be find in cypress Plugins as shown below
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-10_10-34-20.png)
let's start to install the plugin, go to terminal and pass the command as follows
npm install --save-dev cypress-file-upload
After installation complete, let's check dependency in package.json
file and it's version number
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-10_12-22-31.png)
Now, we need to import this node package in commands.js
as follow
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-10_10-56-37.png)
Then use .attachFile()
method to write your test like,
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-09_10-45-02.png)
As you see, we have here many options to use for this function, so let's go in details to understand how we can use them
==> fixture
can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:
- {string}
filePath
- file path (with extension) - {string}
fileName
- the name of the file to be attached, this allows to override the name provided byfilePath
- {Blob}
fileContent
- the binary content of the file to be attached - {string}
mimeType
- file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime - {string}
encoding
- normallycy.fixture
resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
==> processingOpts
contains following properties:
- {string}
subjectType
- target (aka subject) element kind:'drag-n-drop'
component or plain HTML'input'
element. Defaults to'input'
- {boolean}
force
- same as forcy.trigger
, it enforces the event triggers on HTML subject element. Usually this is necessary when you use hidden HTML controls for your file upload. Defaults tofalse
- {boolean}
allowEmpty
- when true, do not throw an error iffileContent
is zero length. Defaults tofalse
Finally, after passing the right options for your case, check the test running, will be like this
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-08_13-14-24-2.png)
Now, it's your turn, do some practice with different test scenarios by yourself using this website 'https://the-internet.herokuapp.com/upload'
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-10_12-20-16.png)
![](https://cfn-tech-blog-prod.tradeling.com/2021/02/2021-02-10_12-14-20.png)
To check code, you can visit or clone this repo https://github.com/MohmedEmad/demo-cypress
There is few open bugs, you can check if you face any of them or create new one
https://github.com/abramenal/cypress-file-upload/issues
References:
- https://github.com/abramenal/cypress-file-upload/
- https://github.com/abramenal/cypress-file-upload/blob/main/lib/file/constants.js#L1
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types