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

[klhex]

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:

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.

[zabil]

Could be related to https://github.com/getgauge/taiko/issues/1777

[NivedhaSenthil]

Yes this a regression because of #1759 where actions are updated to check if element is actionable...I feel we should be providing an option to choose check on actions and element wrappers should be fetching all the available elements and not filter them. Since exists() and visible() methods in the element wrapper both are same currently as the filtering for visible elements is done by default.

IMO we could update attach api like

    await attach(
        'uploads/pirate.jpg',
        fileField(
          { id: 'monthly-net-income-upload' }
        ),
       {checks:[]}// do only checks provided by user.. do nothing if empty
      );

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

thoughts ?

[zabil]

Is it possible for the attach API to always work without the filtering? In most of the cases the attach field will be hidden. I think it should just work as before without the extra parameter.

[NivedhaSenthil]

May be we could remove the check for visibility for attach action, even earlier we had an extra argument passed to the selector {selectHiddenElements:true} I feel selector shouldn't be doing the filtering of non visible elements by default and it should be the responsibility of actions to check before preforming the action. And the option that I had suggested could be applied to any action like click('Click me', {force:true}) for users to override checks like isCovered and perform action irrespective.

[zabil]

May be we could remove the check for visibility for attach action, even earlier we had an extra argument passed to the selector {selectHiddenElements:true}

Yes, I agree but mostly that field is hidden.

I feel selector shouldn't be doing the filtering of non visible elements by default and it should be the responsibility of actions to check before performing the action.

Yes, I think this makes sense. However click('Click me', {force:true}) is not as readable as {selectHiddenElements:true} where it documents the state of the element. Maybe a simpler version click('Click me', {hidden:true}) ? It doesn't mean the selector is filtering just says that the element is hidden but the click will perform anyway. It will also be good to display this option the default click is used for example.

click('Click me' )
Error: The element is hidden or covered. To click on a hidden element please pass the option "{ hidden: true }"

[NivedhaSenthil]

So would we be having separate action for each checks like {covered:true, visible:true, disabled: true} etc ?

[zabil]

Ah now I see, there are other states.

That would be a bit too much. Maybe think of it another way? Click on the element and warn if the element is covered/visible/disabled instead of throwing an error and not clicking?

[NivedhaSenthil]

This may cause the actual error to be hidden as a warning and make an irrelevant step to fail which will not be captured in reports and user will have to manually go through logs to debug

[zabil]

This may cause the actual error to be hidden as a warning

I meant perform the click action by default even if the element is covered/hidden/disabled which is the equivalent of saying turn on click('Click me', {force:true}) by default. If they want the click to fail use click('Click me', {force:false})

[NivedhaSenthil]

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.

[NivedhaSenthil]

Is it fine if we remove the current option selectHiddennElements ? or should we deprecate and fix it for now ?

[NivedhaSenthil]

Just realized if we have to deprecate action wont be able to do the checks even if the option is not specified as they are at different levels(selector and action)

[amitsarkar007]

Any updates on this issue please?

[NivedhaSenthil]

There is a PR raised #1819 for a fix..will have to work on review comment to make a release soon

[NivedhaSenthil]

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}
      );

[klhex]

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.

[NivedhaSenthil]

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

[gulshankamboj]

Thank you, this helped me too!