Here is the multiple file upload version:
Cypress.Commands.add('uploadMultiFiles',(args) => {
const { dataJson, dirName, inputTag, mineType} = args
const arr = []
dataJson.files.forEach((file, i) => {
cy.fixture(`${ dirName + file }`).as(`file${i}`)
})
cy.get(`${inputTag}`).then(function (el) {
for(const prop in this) {
if (prop.includes("file")) {
arr.push(this[prop])
}
}
const list = new DataTransfer()
dataJson.files.forEach((item, i) => {
// convert the logo base64 string to a blob
const blob = Cypress.Blob.base64StringToBlob(arr[i], mineType)
const file = new FileCopy([blob], `${item}`, { type: mineType }, `${ dirName + item }`)
const pathName = dirName.slice(1)
file.webkitRelativePath = `${ pathName + item}`
console.log(file)
list.items.add(file)
})
const myFileList = list.files
el[0].files = myFileList
el[0].dispatchEvent(new Event('change', { bubbles: true }))
})
})
The usage:
First, prepare a data.json file inside the fixtures folder, example:
data.json
{
"files":[
"1_TEST-JOHN-01.jpeg",
"2_TEST-JOHN-01.jpeg",
"3_TEST-JOHN-01.jpeg",
"4_TEST-JOHN-01.jpeg",
"5_TEST-JOHN-01.jpeg",
"6_TEST-JOHN-01.jpeg",
"7_TEST-JOHN-01.jpeg",
"8_TEST-JOHN-01.jpeg",
"9_TEST-JOHN-01.jpeg",
"10_TEST-JOHN-01.jpeg"
]
}
Second, import the json data into your spec.js
import data from '../fixtures/data.json'
Third, Write a class to extend the File web API object with the functions to set and get webkitRelativePath value
class FileCopy extends File {
constructor(bits, filename, options) {
super(bits, filename, options)
let webkitRelativePath
Object.defineProperties(this, {
webkitRelativePath : {
enumerable : true,
set : function(value){
webkitRelativePath = value;
},
get : function(){
return webkitRelativePath;
}
},
});
}
}
Finally, call the cmd in the spec.js
cy.uploadMultiFiles(
{
dataJson:data, // the data.json you imported.
dirName:"/your/dirname/",
inputTag:"input#upload",
mineType:"image/jpeg"
}
)
