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?

Nivedha Senthil · Accepted Answer · 2020-07-09 04:53:52Z

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

answered Jul 9, 2020 at 4:53

Nivedha Senthil

9678 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mcore8x Over a year ago

Tried your line of code getting this concat error now. [FAIL] Error: File field[@id = concat('eventCSVFileInput', "")] and [object Object] not found

Nivedha Senthil Over a year ago

Seems you are using a different selector, fileField({id:'eventCSVFileInput'},{ selectHiddenElements: true }) this uses only id.. make sure you are on latest version of taiko

Mcore8x Over a year ago

Was using 1.0.0 now Updated to taiko 1.0.13,Chromium:85.0.4168.0. Tried following attach("/Users/username/Downloads/report.csv",fileField({id:'eventCSVFileInput'},{ selectHiddenElements: true }) Error seems to different now

Thrown: { [SyntaxError: Unexpected token, expected "," (2:1) ] loc: Position { line: 2, column: 1 }, pos: 137 } ... Thrown: { [SyntaxError: Unexpected token, expected "," (3:1) ] loc: Position { line: 3, column: 1 }, pos: 139 } ...

Mcore8x Over a year ago

Tried this, for some reason id is not detected fileField({'id':'csvFileInput'}).exists() false [PASS] Does not exists

Nivedha Senthil Over a year ago

Error with attach seems to be happening because of missing ) at the end, await attach("/Users/username/Downloads/report.csv",fileField({id:'eventCSVFileInput'},{ selectHiddenElements: true }))

|

buddemat · Accepted Answer · 2021-08-06 19:48:31Z

0

Try this

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

edited Aug 6, 2021 at 19:48

buddemat

5,33016 gold badges37 silver badges61 bronze badges

answered Aug 6, 2021 at 18:01

Gulshan Kamboj

1

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related