使用 cypress-file-upload 将文件上传到 jQuery.filer 无效

Question

我试图在 jQuery.filer 上使用 cypress-file-upload 包测试网络平台的文件上传功能，但遇到了意外行为。请参阅随附的代码片段以供参考：
.html

<div>
    <div class="form-group">
        <h5 class="fs-subtitle">National card ID (NRIC) front </h5>
        <input type="file" name="nric_front" id="filer_input" 
          class="form-control nric_front" required>
    </div>
</div>

.js

$('#filer_input').filer({
    showThumbs: true,
    addMore: false,
    allowDuplicates: false,
    extensions: ['pdf', 'jpg', 'png', 'jpeg'],
    fileMaxSize: 10,
    limit: 1,
    changeInput: true,
    removeConfirmation: true,
    captions: {
        feedback: "Choose file to upload",
        removeConfirmation: 'Are you sure you want to remove this file?',
        errors: {
            filesLimit: 'Only 1 file are allowed to be uploaded.',
            filesType: 'Only .pdf, .jpg, .png, .jpeg files are allowed to be uploaded.',
            fileSize: '${name} is too large! Please choose a file up to ${fileMaxSize}MB.',
            filesSizeAll: 'Files that you choose are too large! Please upload files up to ${fileMaxSize}MB.',
            fileName: 'File with the name is already selected.',
            folderUpload: 'You are not allowed to upload folders.'
        }
    }
});

.spec.js

cy.get('.jFiler-input').attachFile('example.jpg');

赛普拉斯版本：6.2.1
操作系统：弹出OS 20.04
浏览器：Chrome 版本 87.0.4280.141（官方构建）（64 位）

当前行为：

预期行为：

感谢任何帮助，谢谢！

备注

HTML 渲染成这样

<div class="jFiler-input">     
    <div class="jFiler-input-caption">     
        <span>Choose file to upload</span>     
    </div>     
    <div class="jFiler-input-button">Choose Files</div>     
</div>

Answer 1

参考 jQuery.filer plugin.

根据示例，呈现的 HTML 是

<div class="jFiler jFiler-theme-default">

  <input type="file" name="files[]" id="demo-fileInput-7" multiple="multiple" 
     style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;">

  <div class="jFiler-input">
    <div class="jFiler-input-caption">
      <span>Choose files To Upload</span>
    </div>
    <div class="jFiler-input-button">Choose Files</div>
  </div>
</div>

所以你需要定位 .jFiler-input

的输入兄弟

cy.get('.jFiler-input')
  .sibling('input')
  .attachFile('example.jpg');

或自上而下

cy.get('div.jFiler input')
  .attachFile('example.jpg');

使用 cypress-file-upload 将文件上传到 jQuery.filer 无效

File upload to jQuery.filer using cypress-file-upload not working

jquery-filer

cypress