cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

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

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!!

 

t5p_0-1617374433681.png

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
fraenK
Memorable Member
Memorable Member

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.

View solution in original post

burque505
Helper V
Helper V

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.

working.png

working2.png

 

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

50 REPLIES 50
fraenK
Memorable Member
Memorable Member

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) 
DamoBird365
Microsoft
Microsoft

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.

 

DamoBird365_0-1617377581063.png

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
Not applicable

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!!

 

t5p_0-1617379090447.png

 

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

js_trends.png

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
Memorable Member
Memorable Member

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.

fraenK
Memorable Member
Memorable Member

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

Anonymous
Not applicable

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

 

t5p_0-1617382828640.png

 

fraenK
Memorable Member
Memorable Member

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.

Okay, there's only one of these:

js_trends2.png

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.

@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
Memorable Member
Memorable Member

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.

Anonymous
Not applicable

Yes, I have the Chrome extension installed.  

t5p_1-1617384726819.png

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.

 

t5p_2-1617384996404.png

 

 

@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.

gt.gif

Anonymous
Not applicable

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 !!

t5p_3-1617386326996.png

 

Anonymous
Not applicable

Hi @burque505 , where is the Selector Hub?  

fraenK
Memorable Member
Memorable Member

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...

 

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. 

Anonymous
Not applicable

@fraenK Thank you for your help.  I'm going to build a workflow with a for each loop.  Thanks!!

Anonymous
Not applicable

Got it, @burque505 .  Thank you for your help!!

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events happening this month - don't miss out!

 WHAT’S NEXT AT MICROSOFT IGNITE 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Register for a Free Workshop.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Top Solution Authors
Users online (2,806)