taiko: FileField error "is not visible" despite 'selectHiddenElements: true' since Taiko v1.1.1

Describe the bug Since Taiko v1.1.1 (incl. v1.1.2) I get an “is not visible” error when trying to upload a file via fileField with option ‘selectHiddenElements: true’. The same code works fine until incl. Taiko v1.1.0. (Maybe a regression caused by https://github.com/getgauge/taiko/pull/1759?)

To Reproduce Steps (or script) to reproduce the behavior:

  1. Create an upload container as per the following HTML code:
<div class="c-upload-container">
    <div class="c-upload-container__field u-mb-none">
        <div class="c-upload" tabindex="0">
            <input id="monthly-net-income-upload" class="c-upload__input" accept="image/jpeg,application/pdf"
                multiple="" type="file" autocomplete="off" tabindex="-1" style="display: none" /><span
                class="c-upload__description"><i class="c-upload__icon" aria-hidden="true"></i><span
                    class="c-upload__description-text">Ziehen Sie die hochzuladenden Dateien in diesen
                    Bereich</span><span class="c-upload__description-supplementary-text">oder klicken Sie auf "Dateien
                    auswählen"</span></span><span class="c-upload__actions"><span
                    class="c-upload__button c-btn"><span>Dateien auswählen</span></span></span><span
                class="c-upload__disabled"><i class="c-upload__disabled-icon" aria-hidden="true"></i><span
                    class="c-upload__disabled-text">Sie haben bereits 5 Dateien hochgeladen oder zum Hochladen
                    ausgewählt. Diese können Sie in der Dateiliste verwalten.</span></span>
        </div>
    </div>
    <fieldset name="monthly-net-income-upload-validation" class="o-fieldset u-mb-none">
        <input hidden="" name="monthly-net-income-upload-validation" value="" />
    </fieldset>
</div>

Visual representation: image

  1. Execute the following Taiko code on it (use your own .jpg file/path):
      await attach(
        'uploads/pirate.jpg',
        fileField(
          { id: 'monthly-net-income-upload' },
          { selectHiddenElements: true }
        )
      );
  1. See error logs below

Logs

Error: FileField[id="monthly-net-income-upload"]is not visible
    at /[...]/node_modules/taiko/lib/actions/pageActionChecks.js:178:11
    at waitAndGetActionableElement (node_modules/taiko/lib/actions/pageActionChecks.js:153:3)
    at attach (node_modules/taiko/lib/actions/attach.js:20:19)
    at Object.module.exports.attach (node_modules/taiko/lib/taiko.js:1085:16)
    at Object.module.exports.<computed> [as attach] (node_modules/taiko/lib/taiko.js:2604:14)

Expected behavior File is uploaded successfully w/o error message.

Versions:

  • Taiko: 1.1.1
  • OS: macOS 11.1 (20C69)
  • Node.js v14.13.1

Additional context Repro case can be provided via mail if necessary.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 18 (16 by maintainers)

Commits related to this issue

Most upvoted comments

Thanks for the update @klhex will be happy to review a PR

Works for me, thanks!

However, Typescript support is still missing for the new option. I’m going to raise a PR soon (probably today or tomorrow) with a low-effort attempt to add TS support. Please check then whether my approach (as a JS/TS beginner) looks about ok.

please try upgrading to latest version(1.2.0), which has a breaking change of removing {selectHiddenElements:true} option, instead of which {force: true} option is added to actions.

Example:

await attach(
        'uploads/pirate.jpg',
        fileField(
          { id: 'monthly-net-income-upload' }
        ),
      {force:true}
      );

I feel users wanting to perform an action on non actionable element would be an edge case rather than a default one. If we are introducing an option force it would be better if it is set to false by default IMHO.