Могу ли я запустить загрузку файла из элемента, содержащегося в компоненте Vue, с помощью Cypress?

Question

С Cypress, я не могу щелкнуть в зоне сброса, чтобы загрузить файл.Такое ощущение, что что-то препятствует событию клика.Я нажимаю не на тот элемент?

Работает вручную.(Хотя я не знаю, какой именно элемент получает клик) Я попробовал { force: true } - Cypress показывает успешный клик здесь, но ничего не происходит.

Iпробовал родительские и дочерние элементы.Я пробовал команду 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, но тот же результат: