Question

使用赛普拉斯，我无法单击拖放区来上传文件。感觉有些东西阻止了点击事件的发生。我点击的元素有误吗？

它是手动工作的。（但我不知道实际上是哪个特定元素获得了点击）我已经尝试过{ force: true }-赛普拉斯在这里成功单击，但没有任何反应。

我已经尝试过父级和子级元素。我已经尝试过Cypress.$命令绕过cy包装器。

// spec code
it.only('has clickable area for upload', () => {
    cy.visit('#bulkPolicyOnboarding')
      .get('#BulkPolicyOnboardingStartup')
      .find('.file-upload')
      .find('input[type=file]')
      .click({ force: true })
  })

// component code
<template>
    <section id="widget-grid" v-show="IsShown === true">
        <div>
            <div class="row">
                <article class="col-md-12">
                    <div class="jarviswidget jarviswidget-color-darken" data-widget-sortable="false" data-widget-togglebutton="true" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="true" data-widget-deletebutton="false">
                        <header>
                            <h2>Add Document</h2>
                        </header>

                        <div>
                            <div class="widget-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <file-upload v-model="file"></file-upload>
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-offset-10 col-md-2">
                                        <a class="btn btn-labeled btn-info" v-on:click="UploadFileToServer"><span class="btn-label"><i class="fa fa-plus"></i></span>Upload File</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>
</template>

// nested component (the one I'm trying to click?)
<template>
  <div class="file-upload">
    <input type="file" style="display: none;" @change="FileChanged" />
    <div
      class="uploader"
      @click="OpenFile"
      @dragover="DragOver"
      @dragenter="DragEnter"
      @dragleave="DragLeave"
      @drop="DropFile"
    >
      <span class="instructions">click to select, or drag and drop a file</span>
      <label
        class="selected-file"
        style="font-size: 1em;"
        v-html="selectedFile"
      ></label>
      <span class="x" v-show="HasFile()" @click="RemoveFile">&#10006;</span>
    </div>
  </div>
</template>

我希望单击时（如在手动测试中一样）会触发该事件，并且会弹出窗口以供选择文件-但在Cypress中单击不会发生任何事情。

更新：根据Recep Karadas的说法，我尝试了.uploader选择器，但结果相同：

我可以使用Cypress触发Vue组件中包含的元素上载文件吗？

0 个答案: