How to upload files on a web page (potential change in DevTools protocol)

[fez226]

Hello @kensoh i hope you are fine.

i have a doubt with the:
upload element (CSS selector only) as filename to upload

you have an example of how to used?

i have a webpage and i need to upload some files: i click on the Browse Button and the windows open pop up, see the image below... i have the route and file name

[fez226]

i already tried with this one Vision code for writing on the input box of "File Name", but only write C and not continue with the ":\xxxx"

vision type('C:\Users\xxxx\Desktop\file1.cfr')

there is a way to write a path??

update: i figure out, its because my keyboard is in spanish, but for some reason stop at the end of the path and no continue i dont know why

[fez226]

Hello i ready find the solution, with the inspect mode i found the xpath of the input file right next one of the element of the "browse" button

so you need to put it like CSS selector like #element
(the file have to save it in the same path of the tagui file with the script)

upload #cfrInputFile as file1.cfr

[kensoh]

Thanks @fez226 for raising and sharing your solution! Yes your last comment on upload #cfrInputFile as file1.cfr is correct. Visual automation also works but have to use \\\\ to escape the backslash to become \\.

The upload step is restricted to CSS selector for consistency reasons as the default PhantomJS mode for upload does not support XPath. Reopening this issue for the time being, to evaluate whether it makes sense to enable XPath for Chrome or Chrome headless mode.

[fez226]

@kensoh Im confused, the upload step doesnt work on chrome headless mode? because i need it to work.. but i havent try it yet. I tried on Chrome and works fine, but i need it on headless mode

[kensoh]

It should work for headless similar to visible Chrome. But for CSS selectors only. Am considering breaking the consistency with PhantomJS and enable XPaths to also work.

[fez226]

Hello @kensoh the step upload works but when i try to click //*[@id="uploadCFRFile"] does nothing i dont know why, can you see the html code and help me?

sorry the web page its not public, if i stop the cmd and click it manually it works so i dont understand

update: actually no next step works after the upload step, i tried to check the radio button on top and doesn't work either

click //*[@id="CFRProcess_Expired" and @value="No"]
upload #cfrInputFile as file1.cfr
click //*[@id="CFRProcess_Expired" and @value="Yes"]

the first click CFRProcess_Expired works fine... but the second one with value Yes doesnt work

[fez226]

i tried with sikuli but doesnt find the file name image of the windows pop up on screen?

the windows pop ups on headless mode?

[kensoh]

For your 1st post above, do you mean after using upload step other steps cannot work? It might be the website needs user to actually upload and trigger some JS code before continuing. But will be hard to troubleshoot as the webpage is publicly accessible.

For your 2nd post above, for Windows, set display magnification to recommended %, if it does not work then 100%. The magnification factor can affect how Sikuli sees the screen. Also, you can try using visual automation on other UI elements to see if visual automation works ok on your laptop.

In headless mode, Sikuli will not be able to interact because it needs a screen to perform visual automation. So it only works with a real screen, or virtual servers, or Linux with XVBF (which I heard is hard to setup).

[kensoh]

Looked through enabling XPath for Chrome upload step. It would require DOM.performSearch and
DOM.getSearchResults, which requires enabling DOM agent. Decided not to introduce that for now as it may introduce unexpected issues to other steps when DOM agent is explicitly enabled.

[tagui] INPUT  - 
[8] {"id":8,"method":"DOM.performSearch","params":{"query":"//*[@id=\"uploaded_file\"]"}}
[tagui] OUTPUT - 
[8] {"error":{"code":-32000,"message":"DOM agent is not enabled"},"id":8}

Users can use visual automation method to upload files or use the upload step with CSS selector.

[fez226]

Dear @kensoh thank u for your replay i will see it with my partner to understand the 1st replay, yes after using upload step other steps doesnt work.

and thank u for the second reply, with CSS Selector works fine so its doesnt matter xPath

so the final answer is: upload the files with Sikuli on foreground chrome?

another questio, i really dont understand this part:

Also, you can try using visual automation on other UI elements to see if visual automation works ok on your laptop.

[fez226]

@kensoh maybe with this one solution?

http://phantomjs.org/api/webpage/method/upload-file.html

[kensoh]

Yes that's right, it looks like for your use case and website the best approach is using Sikuli on foreground Chrome. Oh for that part I was suggesting to test visual automation on some simple test case to verify that Sikuli works on your laptop.

The PhantomJS one is for default PhantomJS mode, for Chrome I wrote the commands to control Chrome to upload. I'll check more on this, I suspect it could be something changed on Chrome DevTools protocol which cause steps after upload step not to work.

[fez226]

Thank u @kensoh, i will appreciate if you can help me with the Chrome DevTools Protocol, if the next steps after the upload step works i will close the issue !

i try it some days ago and Sikuli does works on my laptop, but i think in this solution but doesnt work on headless mode: do the upload step and later click on the image of the upload button

[kensoh]

Made a PR and committed to master with following comment. It should work now, thanks @fez226 !

There is likely a change in Chrome Devtools protocol which returns back DOM.attributeModified event messages after DOM.setFileInputFiles method is used in update step. This causes subsequent steps after upload step not to work. This patch works by filtering and discarding the DOM.attributeModified event messages so that subsequent communication messages with Chrome will continue to work.

Prior to packaged release, the patch is available from cutting edge version here -

https://github.com/kelaberetiv/TagUI#set-up

[fez226]

thank u @kensoh i will try it, i never replace the existing files, i dont have the master.zip i download the second option below

now i have to download the master.zip and replace my files with this one new?

[fez226]

i replace the file tagui_chrome.php with the new one but doesnt work

the step next to upload do nothing (and i tried on foreground mode)

[fez226]

hello @kensoh i tried on another web page (link below) and the steps after the upload step doesnt work, see the image below: the first two step (blue) works and the same steps after the upload (red) doesnt work.

https://files.fm/?utm_source=adwords&utm_medium=textad&utm_campaign=first-page-world&utm_term=ads-world&utm_content=dynamic&gclid=Cj0KCQjw1pblBRDSARIsACfUG13Yoeojg950NbjMYjBTkSSAvkGtuMIGHA2PjvxbfEQhJOjjkIrOCYsaAogHEALw_wcB

wait 15
click //*[@id="login_button"]
wait 2
click //*[@id="sign-in-header_close"]
wait 2
upload #uploadifive-file_upload > input[type="file"]:nth-child(3) as uploadbutton.PNG
wait 10
click //*[@id="login_button"]
wait 2
click //*[@id="sign-in-header_close"]
wait 10

[kensoh]

Got it @fez226 thanks for sharing this additional test case. I was testing with below and it works.

http://demo.imacros.net/Automate/FileUploadDemo
upload #uploaded_file as abc.txt
type S1 as filename has been set above
wait

Made another PR and committed to master with following comment -

There is likely a change in Chrome Devtools protocol which returns back DOM.attributeModified event messages after DOM.setFileInputFiles method is used in update step. This causes subsequent steps after upload step not to work. Patch 1 works by filtering and discarding the DOM.attributeModified event messages so that subsequent communication messages with Chrome will continue to work. Patch 2 works by filtering and discarding DOM. events completely. And also send a DOM.disable call to disable further sending of DOM. event messages.

Technical notes for future reference -

The scope of the DOM. event messages that are returned from Chrome is more than just the method in the first patch. Have extended the filtering to include all DOM. event messages and also trigger a DOM.disable to prevent unnecessary messages (processing time and bandwidth) as they won't be consumed by TagUI. If in the future it is found that there is side effect not yet known, will have to keep it enabled and simply discard the messages.

Prior to packaged release, the patch is available from cutting edge version here -

https://github.com/kelaberetiv/TagUI#set-up

[fez226]

Hello @kensoh i download the TaguiMaster.zip and replace this 3 files

and i tried again with my original web page and finally works!!

i thank u some much for the help, officially the issue is closed

[kensoh]

No probs @fez226 , appreciate that you raise this! Root cause is potentially due to a change in Chrome DevTools. This is not a common use case and it can be left un-noticed if you do not feedback.

[kensoh]

Adding some technical notes for future reference. Was trying to see if XPath can be enabled for upload step for Chrome instead of just CSS selector.

According to the DevTools protocol documentation for DOM domain, the following series of DevTools protocol exchange would yield a nodeId through XPath search which could be used to set the filename on the upload web element.

chrome_step('DOM.enable');
chrome_step('DOM.performSearch', {query: '//*[@name="uploaded_file"]'});
chrome_step('DOM.getSearchResults',{searchId: '1000018876.5', fromIndex: 0, toIndex: 1});
chrome_step('DOM.setFileInputFiles',{files: ['123.txt'], nodeId: 0});

However, it was found that the nodeId 0 is returned and that leads to an error not found when trying to interact with the upload element. It could be the DOM.performSearch method is still experimental (as labelled in above documentation). In any case, that does not seem technically possible now, attached communication logs (done in TagUI live mode) for future reference. DOM.enable is required otherwise Chrome will return a 'DOM agent is not enabled' message when DOM.performSearch is called.

[tagui] INPUT  - 
[96] {"id":96,"method":"DOM.enable"}
[tagui] OUTPUT - 
[96] {"id":96,"result":{}}

[tagui] INPUT  - 
[97] {"id":97,"method":"DOM.performSearch","params":{"query":"//*[@name=\"uploaded_file\"]"}}
[tagui] OUTPUT - 
[97] {"id":97,"result":{"searchId":"1000018876.5","resultCount":1}}

[tagui] INPUT  - 
[98] {"id":98,"method":"DOM.getSearchResults","params":{"searchId":"1000018876.5","fromIndex":0,"toIndex":1}}
[tagui] OUTPUT - 
[98] {"id":98,"result":{"nodeIds":[0]}}

[tagui] INPUT  - 
[99] {"id":99,"method":"DOM.setFileInputFiles","params":{"files":["123.txt"],"nodeId":0}}
[tagui] OUTPUT - 
[99] {"error":{"code":-32000,"message":"Could not find node with given id"},"id":99}