使用 cypress-file-upload 将文件上传到 jQuery.filer 不起作用

Posted 2023-05-07

【中文标题】使用 cypress-file-upload 将文件上传到 jQuery.filer 不起作用

【英文标题】：File upload to jQuery.filer using cypress-file-upload not working

【发布时间】：2021-04-22 17:34:13

【问题描述】：

我尝试使用 jQuery.filer 上的 cypress-file-upload 包测试 Web 平台的文件上传功能，但遇到了意外行为。请参阅附件代码 sn-ps 以供参考： .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 $fileMaxSizeMB.',
            filesSizeAll: 'Files that you choose are too large! Please upload files up to $fileMaxSizeMB.',
            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 操作系统：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>

【问题讨论】：

cy.get('.jFiler-input') 似乎没有针对 DOM 中的任何内容。您的意思是使用 ID cy.get('#filer-input')？

您好，感谢您的回复！实际上渲染的元素是这样出来的（根据检查元素）：<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 个前面的空格（用于缩进），2 个结束空格（用于换行），> 在前面（用于块引用）都不起作用。

【参考方案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');

【讨论】：

使用 cy.siblings 成功了！非常感谢！