Taiko UI automation angular - Unable to use fileField to upload a csv file

Question

Experimenting with Taiko for UI automation. Trying to upload a csv file but giving the id of the csv file selector is not working. A red rectangle outline blinks on top of the file upload link file firing {attach("/Users/username/Downloads/report.csv",$('*[id="some"]'))} but shows following error message in console.

Error: Node is not a file input element, run `.trace` for more info.

HTML

I've tried following fieldfield examples from https://docs.taiko.dev/#filefield

attach('report.csv', to(fileField('Upload CSV file (Optional)')))
fileField('Upload CSV file (Optional)').exists()
fileField({'id':'event-csv-upload'}).exists()
fileField({id:'event-csv-upload'},below('Upload CSV file (Optional)')).exists()
fileField(below('Upload CSV file (Optional)')).exists()

none of this works and finally tried following

attach("/Users/username/Downloads/report.csv",$('*[id="event-csv-upload"]'))
and
attach("/Users/username/Downloads/report.csv",fileField({id:'event-csv-upload'}))

source:https://github.com/getgauge/taiko/issues/309

Still not able to upload file using Taiko.

Why this file upload element is difficult to locate in angular code?

Is it too early to try Taiko now for angular web projects?

Do you recommend any other UI automation framework that work well with any angular versions?

Answer 1

attach expects a File input field as a selector to perform action on, in your case that element seems to be a hidden element linked to a button, attaching to that hidden element should work. Try,

await attach("/Users/username/Downloads/report.csv",fileField({id:'eventCSVFileInput'},{ selectHiddenElements: true }))