2

我试图使用 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>
4

1 回答 1

1

参考jQuery.filer 插件。

从示例中，呈现的 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');
于 2021-01-20T22:33:51.337 回答