在我的vue / cli 4 / Bootstrap 4.3应用程序中,我使用vue-upload-component组件进行文件上传 而且可以。我想添加赛普拉斯来测试文件上传,我 将https://github.com/abramenal/cypress-file-upload/tree/v3.5.3添加到了我的项目中,但失败了 通过此测试。 我在Vue文件中:
<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)
,并在我的浏览器中将其呈现为:
<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>
我做柏树测试文件:
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' });
});
但是在控制台中出现错误:
THEN函数(){}
TypeError:cy.get(...)。upload不是函数
我看到下一个cy var的输出:
也在上面的测试代码中取消注释两行:
cy.find('#file')
.should('have.value', 'Invalid Text')
我没有应有的错误,我不明白为什么?
如何进行文件上传测试?
"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",
谢谢!
答案 0 :(得分:4)
您正在显示"^4.0.6"
作为您的cypress-file-upload
版本。 latest version和version 3.5.3之间是有区别的。
自版本4.0.0起,公开的命令已从upload()
更改为attachFile()
在最新版本中也有一条注释,说它目前不稳定。也许您应该恢复到3.5.3并保持代码不变。