Solved: Re: Unable to select UI element on Google Trends p...

Anonymous · ‎04-02-2021

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 · ‎04-02-2021

First you need to switch to web automation. Your code shows UI automation.

In your browser right click on the element > inspect

In PAD edit the selector and deselect everything which seems too much, making the selector as short but also as unique as possible.

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

View solution in original post

burque505 · ‎04-04-2021

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

View solution in original post

fraenK · ‎04-02-2021

The automatic selector building of PAD is not really intelligent, so you have to manually analyze the code and modify it. Deselect everything except the button using class and ordinal:

button[Class="widget-actions-item export"]:eq(0)

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

DamoBird365 · ‎04-02-2021

Hi @Anonymous

@fraenK is quick on the keys! I was just doing the same.

I used the scroll wheel and held down the ctrl button and came back with a similar result for Windows UI Element (not browser) and removed all the rubbish that is detected to come up with the following.

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Cheers,
Damien

P.S. take a look at my new blog here

Anonymous · ‎04-02-2021

Hi @fraenK and @DamoBird365 , thank you for your quick reply. How do I view all the source code that I selected and to select only the element? I'm a newbie so thank you!!

burque505 · ‎04-02-2021

@Anonymous, execute JS on the page. Not many hoops to jump through. Here's what I have:

In case that JS is too hard to read, it's this:

function ExecuteScript() { document.querySelector("button[title='CSV']").click(); }

SelectorsHub (look for it on the Chrome web store) is useful for me to grab selectors of all kinds.

fraenK · ‎04-02-2021

First you need to switch to web automation. Your code shows UI automation.

In your browser right click on the element > inspect

In PAD edit the selector and deselect everything which seems too much, making the selector as short but also as unique as possible.

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

fraenK · ‎04-02-2021

There are multiple buttons with the same title. Lets not make it more complicated with JS, PAD's web selector work fine when modified.

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

Anonymous · ‎04-02-2021

Hi @burque505 , thank you so much for your help. I tried to follow the steps but am getting this error which seems odd since it launches Chrome and loads the URL fine. And I'm not seeing the CSV being downloaded.

Failed to assume control of Chrome (Internal error or communication failure).

fraenK · ‎04-02-2021

Did you install the PAD browser extension for Chrome? Btw. don't use JS where it isn't necessary, mixing scripts makes the automation much harder to maintain and to migrate.

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

burque505 · ‎04-02-2021

Okay, there's only one of these:

Personally I don't find it any more difficult to grab a selector with SelectorsHub and paste it into the PAD action than to modify the web selector.

There's usually more than one way to skin a cat and it doesn't hurt to know more than one.

burque505 · ‎04-02-2021

@Anonymous, I often (actually way too often) get that error 😥 when I forget to close down Chrome while debugging a script. Could that be it? You might try making sure all Chromes are killed before you run that again.

fraenK · ‎04-02-2021

It adds additional complexity and dependencies plus everybody who maintains it needs to be able to read and test JS. PAD can do this out of the box.

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

Anonymous · ‎04-02-2021

Yes, I have the Chrome extension installed.

Ohh, so odd. I restarted my Chrome browser again and now it lets me select the element. Ok, this is much better. Click download link on web page doesn't work on Chrome, it says. What's Automation Browser?? Going to try with Edge or FF.

burque505 · ‎04-02-2021

@Anonymous, that's interesting. I'd be interested to know how FF or Edge work for you. (For me, Firefox tries to open it in Excel.) P.S. As far as I know, "Automation Browser" is the same engine (Trident or MSHTML) that Internet Explorer is based on, and I tend to avoid both Automation Browser and IE.

Here's a little animation of my script working in Chrome.

Anonymous · ‎04-02-2021

Won't install Edge extension....

Message = The system cannot find the file specified
Error = System.ComponentModel.Win32Exception
Full text = System.ComponentModel.Win32Exception (0x80004005): The system cannot find the file specified
at System.Diagnostics.Process.StartWithShellExecuteEx(ProcessStartInfo startInfo)
at System.Diagnostics.Process.Start(ProcessStartInfo startInfo)
at Robin.Shared.Runtime.WebUtilities.WebExtensionInstaller.InstallEdgeExtension()
at GalaSoft.MvvmLight.CommandWpf.RelayCommand.Execute(Object parameter)
at MS.Internal.Commands.CommandHelpers.CriticalExecuteCommandSource(ICommandSource commandSource, Boolean userInitiated)
at System.Windows.Controls.MenuItem.InvokeClickAfterRender(Object arg)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)

hhmm, Downloading files with Firefox is not supported. Consider using the Automation Browser.

OK, this worked. Thank you so much, @fraenK !!

Anonymous · ‎04-02-2021

Hi @burque505 , where is the Selector Hub?

fraenK · ‎04-02-2021

You need to use "Click link on web page" not "Click on download link"

https://docs.microsoft.com/en-us/power-automate/desktop-flows/actions-reference/webautomation#clickb...

--
Was this helpful? Then give it a thumbs up and/or select it as the solution!

burque505 · ‎04-02-2021

Sorry, @Anonymous , I should have been more explicit. SelectorsHub is an extension to Chrome itself (and for other browsers). For Chrome you can find it at this Chrome webstore link. For Edge, try searching here. Firefox, here.