Unable to select UI element on Google Trends page (Chrome, Edge, FireFox)

[Anonymous]

Hi, I am using Launch New Browser (Chrome, Edge, FF) to navigate to this below URL.

https://trends.google.com/trends/explore?date=2020-01-01 2020-12-31,2019-01-01 2019-12-31,2018-01-01 2018-12-31&geo=US,US,US&q=how to cook ramps,how to cook ramps,how to cook ramps

On the page, I am trying to click this down arrow "download" icon so that I can initiate the download of the CSV file.  I tried using Click UI element in window, Click link on web page, Click download link on web page but none of them seems to identify that specific element (highlighting in red box).  In fact, it only puts red box on the whole page as "Document" and won't let me select anything else on the page.  I've tried recorders as well.  

How can I select the UI element on this Google Trends page?

Thank you so much for your help!!

[fraenK]

OMG!

• It clearly shows "Edge" when you paste the code, replace it with Chrome or Firefox, works as well.
• The URL is dynamic, so no need to hardcode it.
• Appmask will be created by "Add a UI element by clicking on the download..." as mentioned. Doesn't crash when pasting, it will just complain about a missing UI element
• It's a button, so "PressButton: Presses a web page button" https://docs.robin-language.org/robin-the-rpa-language/standard-modules/webautomation/ "WebAutomation.Click" works as well.
• "doesn't work" is no error message. Works fine for me right away in Chrome, Firefox and Edge, there is also no reason not to work, except the browser plugins lost connection or you didn't allow multiple downloads.

[burque505]

Okay.

Re URL:

The URL given throughout this thread works, though, for getting to the page. Of course . . .

Re button:

Might I ask if you are using the free version? I am, if that makes a difference.

I've only tried with Edge and Chrome, and all my other flows are working with no browser plugin issues.

Including this one for RPA challenge (input forms) - just for grins, try beating that time without scripting. 😀

All in fun, @fraenK 😀.  Das Leben ist (zu) kurz.

[fraenK]

This seems to be a bug or "limitation" of the browser extension!

It doesn't properly initialize its runtime on that site, maybe due to its CSP?

https://trends.google.com/trends/explore?date=2020-01-01%202020-12-31,2019-01-01%202019-12-31,2018-01-01%202018-12-31&geo=US,US,US&q=how%20to%20cook%20ramps,how%20to%20cook%20ramps,how%20to%20cook%20ramps

So it sometimes can't execute the click command and raises an "undefined" error:

var result = undefined;
try {
  result = wa.runtime.pressButton('button[Class="widget-actions-item export"]:eq(0)', true);
} catch (e) {
};
document.documentElement.setAttribute('result', result);
document.documentElement.setAttribute('complete', 'true');

TypeError: wa.runtime is undefined

Hopefully somebody from Microsoft can have a look into this @Rohith_Raju @TejaswiniG @PetrosF-MSFT

UI automation, at least in Edge, works with the same selector.

[Anonymous]

Thank you both @fraenK  and @burque505 for your help.  Is the conclusion that there is a bug that's preventing from getting a reliable process for this specific use case in PAD?  If Edge is the only browser that can accommodate, I'm fine with that.  And I'd like to try both UI automation approach and JavaScript approach to get the multiTimeline.CSV and geoMap.CSV (geoMap is optional and if possible).  I'm going to re-read your comments and suggestions and will try to follow and implement.  Thank you again for your time and help!!!!

[Anonymous]

I went thru different recommendations but I can only get the workflow with JavaScript action working but with geoMap.csv.  I'm going to start a new Flow file and also reinstall browser extensions.  

[Anonymous]

I cannot get that exact line and pasting it into custom doesn't not seem to work.

[burque505 · Accepted solution]

Hi @Anonymous, I apologize, I meant to post this yesterday but it slipped my mind. This still needs tweaking to keep the JS from outrunning the script (maybe auto-click the downloads buttons, I'll try something like that.

But it does download multiTimeline.csv, geoMap.csv, and relatedQueries.csv (one of them - there are more than one).

EDIT: Flow with autoclick on save buttons. I had to add some waits so it would run from the Flow panel.

JS:

function ExecuteScript() { document.querySelector("div[class='fe-atoms-generic-header-container fe-line-chart-header-container fe-atoms-generic-separator'] button[title='CSV'] i[class='material-icons-extended gray']").click();}

function ExecuteScript() { document.querySelector("div[class='fe-multi-heat-map-generated fe-atoms-generic-container'] button[title='CSV'] i[class='material-icons-extended gray']").click();}

function ExecuteScript() { 
document.querySelector("body > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > md-content:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(5) > trends-widget:nth-child(2) > ng-include:nth-child(1) > widget:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > widget-actions:nth-child(3) > div:nth-child(1) > button:nth-child(1) > i:nth-child(1)").click();
}

[Anonymous]

@burque505 Thank you so much.  I'll definitely try out these.  Lots to learn but excited and really appreciative.  Thank you!!!!

[fraenK]

You need to deselect the <i> element and enter the ordinal value 0 for the button.

OR

To be able to paste a custom selector you need to click on the blue switch to enable it.

To get all other downloads just increase the ordinal value by 1 e.g. through a variable.

Did you go through the training and documentation? This is like very basic stuff.

[Anonymous]

Hi @burque505 

My flow is starting to not able to download the CSV files from this JavaScript.  It works for a while and would start skipping and eventually stop downloading the file.  Google may be updating the page/charts and slowly rolling out...I don't know.  I tried to use Chrome Inspector tool to find/validate but am getting different JavaScript path.  This is what I'm getting, which is different from what you had provided kindly.  I'll continue to investigate and any help/guidance would be greatly appreciated.  Thank you!!

document.querySelector("body > div.trends-wrapper > div:nth-child(2) > div > md-content > div > div > div:nth-child(1) > trends-widget > ng-include > widget > div > div > div > widget-actions > div > button.widget-actions-item.export > i")

function ExecuteScript() { document.querySelector("div[class='fe-atoms-generic-header-container fe-line-chart-header-container fe-atoms-generic-separator'] button[title='CSV'] i[class='material-icons-extended gray']").click();}

https://trends.google.com/trends/explore?date=2021-01-01 2021-12-31,2020-01-01 2020-12-31,2019-01-01 2019-12-31,2018-01-01 2018-12-31&geo=US,US,US&q=button downs,button downs,button downs,button downs

https://trends.google.com/trends/explore?date=2021-01-01 2021-12-31,2020-01-01 2020-12-31,2019-01-01 2019-12-31,2018-01-01 2018-12-31&geo=US,US,US&q=swimsuit coverups,swimsuit coverups,swimsuit coverups,swimsuit coverups

https://trends.google.com/trends/explore?date=2021-01-01 2021-12-31,2020-01-01 2020-12-31,2019-01-01 2019-12-31,2018-01-01 2018-12-31&geo=US,US,US&q=mens jeans,mens jeans,mens jeans,mens jeans

[Anonymous]

Wrote a script to check if it downloaded the file correctly and it's not downloading the file about half the time. PAD executes the JavaScript but nothing happens/no download and will proceed to the next loop.  And PAD won't download the file with this javascript I see for that download down arrow icon located in upper right corner of the first chart.  

document.querySelector("body > div.trends-wrapper > div:nth-child(2) > div > md-content > div > div > div:nth-child(1) > trends-widget > ng-include > widget > div > div > div > widget-actions > div > button.widget-actions-item.export > i")