使用 Cypress 简化文件上传测试
作者：互联网
测试文件上传功能对于确保 Web 应用程序的顺利运行至关重要。<input type=file>每当我们上传内容时，元素就会出现在网站上。即使我们看不到它，我也确信它就在那里。
许多页面更愿意提供稍微好一点的用户界面，允许用户轻松拖放文件或单击设计精美的按钮。这可能看起来像这样：
在这种情况下，<input> 元素经常被隐藏。有趣的是，该<input>元素可以在 DOM 中的奇怪位置找到，通常位于 dropzone 区域之外。这是由于 JavaScript 对文件插入的处理造成的。想象一下我们的文件从拖放区中取出并传递到<input>要处理的元素中。
此应用程序中的拖放区如下图所示。该<input>元素具有display: none样式，因此对用户隐藏。
我们可以使用 Cypress 这个强大的端到端测试框架来自动化和简化文件上传测试。在这篇博文中，我们将通过实际示例了解如何使用 Cypress 有效测试文件上传。
第 1 部分：使用 selectFile() 测试文件上传
从 9.3.0 版本开始，Cypress 有一个.selectFile()可以处理所有文件上传的命令。我们没有单击文件上传按钮，而是选择<input>元素并调用.selectFile()它的函数。
A。从磁盘上的文件
如果提供了路径，.selectFile()将查找相对于项目根目录的文件并将其完全按照磁盘上的位置附加。
cy.get('input[type=file]').selectFile('path/to/file.jpg')get ( '输入[类型=文件]' ). selectFile ( '路径/到/文件.jpg' )
b. 从夹具文件
我们可以轻松地在表单元素中选择夹具文件。
//选择一个夹具文件 cy. get ( '输入[类型=文件]' ). 选择文件( '文件.jpg' )
C。选择多个文件
如果文件输入不包含该属性，以下选择多个文件的示例将失败multiple。
cy.get('input[type=file]').selectFile([get ( '输入[类型=文件]' ). selectFile ([
'文件1.jpg' ,
'文件2.jpg' ,
'文件3.jpg' ,
])
d. 将文件拖放到元素上
使用drag-drop操作，我们可以使用命令模拟将文件拖放到元素上.selectFile()。
cy.get('input[type=file]').selectFile('file.json', {get ( '输入[类型=文件]' ). selectFile ( 'file.json' ,{
action : '拖放'
})
e. 在隐藏输入上
在许多情况下，底层文件输入在视图中隐藏，并通过用户单击按钮来启用。在这种情况下，我们必须指示 Cypress 忽略其操作能力检查并选择文件，即使用户无法直接激活文件输入。
//调用 jQuery 函数使输入可见
cy. get ( '输入[类型=文件]' )
。调用（'显示'）
。AttachFile ( '文件.json' );
//强制：true
cy. get ( '输入[类型=文件]' ). selectFile ( 'file.json' ,{ force : true })
第 2 部分：使用 cypress-file-upload 插件测试文件上传
对于旧版本的 Cypress，我们可以使用该cypress-file-upload插件。
A。安装cypress-file-upload库
npm install --save-dev cypress-file-upload
b. 导入cypress-file-upload。将以下行添加到我们的 Cypress 支持文件中（例如，cypress/support/index.js）：
导入 “赛普拉斯文件上传”；
C。在我们的测试代码中，我们可以使用cy.get().attachFile()提供的命令来cypress-file-upload选择文件并将其附加到文件输入元素。这是一个例子：
it ( '应该使用cypress -file-upload 插件上传文件' , () => {
cy.get ( ' input[type="file"]' ) .attachFile ( 'example.jpg' )
cy.get ( ' form' ). submit ();
cy.get ( '.success-message' ). should ( 'be.visible' );
}) ;
结论
我们可以利用 Cypress 及其文件上传功能来简化网络应用程序中文件上传功能的测试。无论我们需要使用cypress-file-upload插件，还是利用selectFile()方法，Cypress 都提供了我们进行高效可靠的文件上传测试所需的工具。