Have anybody uploaded files in cypress? Please, share your expierence...
Cypress file uploading error with cypress-file-upload
Hello,
In my vue/cli 4 / Bootstrap 4.3 app I use vue-upload-component component for files uploading and it works ok. I want to add cypress for testing file uploading and I added https://github.com/abramenal/cypress-file-upload/tree/v3.5.3 into my project, but failed with this testing. I have in vue file:
<file-upload
ref="upload"
v-model="imageFiles"
post-action="/post.method"
put-action="/put.method"
@input-file="inputFile"
@input-filter="inputFilter"
:multiple="false"
class="btn btn-outline-secondary btn-sm m-2 file-input-class"
data-cy="file-input"
>
<i :class="'action_link '+getHeaderIcon('upload')"></i>Upload image
</file-upload>
...
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)
and in my browser it is rendered into :
<span class="btn btn-outline-secondary btn-sm m-2 file-input-class file-uploads file-uploads-html5" data-cy="file-input">
<i class="action_link fa fa-upload"></i>
Upload image
<label for="file"></label>
<input type="file" name="file" id="file">
</span>
I cypress test file I do :
import 'cypress-file-upload'
describe('Admin category fileupload functionality', () => {
...
const fileName = '/sample_images/sample.png';
cy.contains('Image Preview/Upload')
cy.fixture(fileName).then(fileContent => {
// cy.find('#file')
// .should('have.value', 'Invalid Text')
console.log('++Inside Tests cy::')
console.log(cy)
cy.get('#file').upload({ fileContent, fileName, mimeType: 'image/png' });
});
But in the console I got error:
THEN function(){}
TypeError: cy.get(...).upload is not a function
I see next ouput of cy var : https://imgur.com/a/O71JEFA
Also in testing code above to uncomment 2 lines :
cy.find('#file')
.should('have.value', 'Invalid Text')
I do not have should errors, as I expected, asnd I do not understand why ?
How to make file uploading testing?
"axios": "^0.19.0",
"cypress-file-upload": "^4.0.6",
"file-saver": "^2.0.2",
"vue": "^2.6.10",
"vue-upload-component": "^2.8.20",
Thanks!
Please or to participate in this conversation.