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

Question

我试图在 jQuery.filer 上使用 cypress-file-upload 包测试 Web 平台的文件上传功能，但遇到了意外行为。请参阅随附的代码片段以供引用:
.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');

Cypress 版本:6.2.1
操作系统:Pop 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');