Click a link in IE through VBA - html

I am trying to click a link but it is different from others links I have made it. I don't have a field called "id" or something.
Here is the HTML. I need it to click "pibmunic super" button/link. The FIREPATH XPath shows .//*[#id='informacoes_estatisticas']/ul/li[20]/span
<div id="informacoes_estatisticas">
<h3 class="titulo">Informações Estatísticas</h3>
<ul class="links">
<li class="item Censo Agropecuário_2006">
<li class="censo2010 super">
<li class="educa super">
<li class="empresas super">
<li class="vida super">
<li class="item Estimativa da População 2014_">
<li class="prodext2013 super">
<li class="financas super">
<li class="frota super">
<li class="item Fundações Privadas e Associações sem Fins Lucrativos no Brasil 2010_">
<li class="item Índice de Desenvolvimento Humano Municipal - IDHM_">
<li class="instfin super">
<li class="item Mapa de Pobreza e Desigualdade - Municípios Brasileiros_2003">
<li class="morbid super">
<li class="prodpec2013 super">
<li class="item Pesquisa Nacional de Saneamento Básico_2008">
<li class="item Produção Agrícola Municipal - Cereais, Leguminosas e Oleaginosas_2007">
<li class="lavperm2013 super">
<li class="lavtemp2013 super">
<li class="pibmunic super">
<span class="super">Produto Interno Bruto dos Municípios</span>
<ul class="pibmunic sub">
</li>
<li class="partpol super">
<li class="assismed super">
<li class="snig_censo2010 super">
</ul>
</div>
I am trying to write my code as something like this
Set m = html.getElementById("something")
Set a = m.getElementsByTagName("something")(something)
a.Click
I am not sure this is right, I have tried lots of combinations and it does not work. I don't know exactly which "getelementsby" I should use or what to give the command inside ().
Hope you can help me !! thanks

All of your classes seem to be unique. If that's the case you should change all the class attributes to id attributes ex:
class="something"
to
id="something"
Once you do that getElementById("something") will work. getElementsByTagName() returns an array of elements with a specific tag. ex:
getElementsByTagName("li")
retrieves all the li elements under a node.
If the newest VBA supports querySelectorAll() that will allow you to use CSS selectors to find elements. ex:
querySelectorAll(".something")
This will find all elements with the class something. However, since there can be multiple elements with the same class, you will get an array as a result. You can either loop over these elements to process them, narrow your selector, or get the first index of the returned array.
If VBA still does not support querySeletorAll() and you will need to combine getElementsByTagName() with a loop over the matching tags to find elements with the something class. ex:
For Each el in getElementById("container").getElementsByTagName("li")
For Each cl in el.className.Split(' ')
If cl = "something" Then
el.onclick()
End If
Next
Next
I would recommend assigning Id's or if at all possible use JavaScript or jQuery. They are more specialized at handling at these tasks (more abstraction). jQuery would be as simple as:
$(".something").trigger("click");

Related

How to force the first option in SORT BY to show the selected mark?

<a class="mobileSortBy-toggle_new"
data-collapsible="mobileSortBy-panel-{{type}}"
data-collapsible-disabled-breakpoint="medium"
data-collapsible-disabled-state="closed"
data-group-collapsible="main">{{lang 'common.sorter.sort_by'}}</a>
<div class="mobileSortBy-panel" id="mobileSortBy-panel-{{type}}" data-mobile-sort-by>
<h4 class="mobile-panel-heading"><span class="mobile-panel-heading-ellipse">{{lang 'common.sorter.sort_by'}}</span></h4>
<a class="mobile-panel-close" href="#" data-collapsible="mobileSortBy-panel-{{type}}" data-group-collapsible="main"><svg><use xlink:href="#icon-close" aria-hidden="true"></use></svg></a>
<div class="mobileSortBy-panel-body" data-lock-body-scroll>
<ul class="navList navList--mobileSelectList">
<li class="navList-item">{{lang 'common.sorter.relevance'}}</li>
<li class="navList-item">{{lang 'common.sorter.newest'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_asc'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_desc'}}</li>
</ul>
</div>
</div>
SORT BY code for the mobile version. When the user is selecting an option, the code shows the "is-active" in the class, and that places a V mark next to it.
The problem is with the first option. It ignores the If statement and doesn't show the mark.
What can be done to fix it?

how to use one class with many elements?

for some reasons i have somthing like this in my html code
id = 1
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
id = 2
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
can i make just one css file for this code contain something like this :
.every first calss name + what ever id {
background-image: url('/image/facebook.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -277px -446px;
}
You just need to try nth-child of CSS3 property.
ul.yourClass li.firstclasname:nth-child(2){
background:url('/image/facebook.png') -277px -446px no-repeat;
background-size:auto;
}
You can use starts with [attr^=value] attribute selector.
li[class^="firstclasname"] {
background: blue;
}
<ul>
<li class="anyclass"></li>
<li class="firstclasname1"></li>
<li class="scondclasname1"></li>
<li class="thirdclasname1"></li>
<li class="forthclasname1"></li>
<li class="fifthclasname1"></li>
</ul>
<ul>
<li class="anyclass"></li>
<li class="firstclasname2"></li>
<li class="scondclasname2"></li>
<li class="thirdclasname2"></li>
<li class="forthclasname2"></li>
<li class="fifthclasname2"></li>
</ul>
For cases like this I like to use two selectors -- a common one, relevant to all the items, and a specific one to identify a single item.
An example use would be something like this:
<ul class="contact-list">
<li class="item item-1">Contact 1</li>
<li class="item item-2">Contact 2</li>
<li class="item item-3">Contact 3</li>
</ul>
In CSS you can then target the list itself, all the items or one specific item.
Edit
Apologies, I skimmed your question and missed the part about id=1 and id=2. There are a few different options depending on how many IDs there will be and whether or not this will be known.
For a short list of known ID's you could just target the individual items as I mentioned. If there are an unknown number of IDs (or the IDs themselves are unknown) you may consider using the nth-child selector.
This depends entirely on the effect you're trying to achieve, which isn't detailed in your question, but some commonly used (in the context of my example markup above) are as follows:
.contact-list:nth-child(odd) applies to every odd element, i.e. 1st, 3rd, 5th
.contact-list:nth-child(even) applies to every even element, i.e. 2nd, 4th, 6th
.contact-list:nth-child(1) applies only to the first element
.contact-list:nth-child(4n+4) applies to every fourth element
And so on. Most common requirements have been done a thousand times before and can be found with a quick google search along the lines of "CSS every second element".

iMacros - TAG specific element with XPATH

and thank you in advance for taking a minute of your valuable time to solve this puzzle and educate me on the topic.
(please forgive my terminology)
I am using the following code in iMacros for Firefox to select an element on the site, which works fine, as long as the element exists and is in the same order.
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]" EXTRACT=TXT
Which in this case would result in "New York, NY"
From:
<div id="contacts" class="article expanding_group">
<div class="article-header">
<!-- Public Company = Block. Public Name/Title = Restricted. -->
<ul class="list">
<li class="list_item">
<div class="list_item_content contact-detail">
<div class="edit expanded">
<ul>
<li class="name"> New York, NY </li>
<li class=" ellipsis">
http://www.a24films.com
</li>
<li class="info ">
+1 646 568 6015
<span class="attributes">phone</span>
</li>
<li class="info ellipsis">
info#a24films.com
</li>
<li class="address ">601 West 26th Street</li>
<li class="address ">Suite 1740</li>
<li class="address "> New York, NY 10001 </li>
<li class="address ">USA</li>
<li class="address ">
</ul>
</div>
However, if the field is missing, it will skip to the next field which will, in essence, result in data being inserted into the incorrect row.
E.g. if I am expecting columns "name, phone, address", and it is missing phone, it will result in "name, address, blank".
I can see it I want only when list item 1's class="name", so my question is: is there a way to specify that I want the list item number 1 that contains "name" in class?
I have tried a variation of strings to no avail, but I woulf imaging something like this is possible:
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]/name" EXTRACT=TXT
Thank you for your time,
Reinaldo
You can try the following code:
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[#class='name'][1]" EXTRACT=TXT
Try this Xpath:
.//*[#id='contacts']//li[#class='name'][1]
I don't think #Shugar's code will work.

how to simplify template?

how to simplify template in angularjs? Here there are three different variants lie within podgruzki data objects, but depending on different objects IF loaded with different sets of properties. Is it possible to simplify both the template
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'A'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node.a}}">{{node.a}}</span>
</li>
</ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'B'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched() " ng-mousedown="add(this)">
<span ng-attr-title="{{node.b}}">{{node.b}}</span>
</li>
</ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'C'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node.C}}">{{node.C}}</span>
</li>
</ul>
</div>
Let's say you normalize your node and name to be 1 to 1. So if your controller name is "a" or "Foo", then your node will have a property named a or Foo.
Then you will be able to reduce your template to the following:
<div class="suggest" ng-show="showSuggest">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node[$ctrl.Name]}}">{{node[$ctrl.Name]}}</span>
</li>
</ul>
</div>

AngularJS ul, li selection

how to select croissant (the one with class 'selected' ) to $scope.selected variable in angular ?
<ul id='ulsel' placement="top-left" style="max-height: 154px;">
<li value="Apple fritter" class="" tabindex="-1">Apple fritter</li>
<li value="Croissant" tabindex="-1" class="selected">Croissant</li>
<li value="Donut" tabindex="-1" class="">Donut</li>
<li value="Financier" tabindex="-1" class="">Financier</li>
<li value="Jello" tabindex="-1">Jello</li><li value="Madeleine" tabindex="-1">Madeleine</li>
<li value="Pound cake" tabindex="-1">Pound cake</li>
<li value="Pretzel" tabindex="-1">Pretzel</li>
<li value="Sfogliatelle" tabindex="-1">Sfogliatelle</li></ul>
Your markup is very strange, li's having values attributes and using a class as selected rather then a input is an unusually approach. Regardless you can use the below:
$scope.selected = $('#ulsel li.selected').html();
This just gets the text inside the li with the selected class.
I have used the text inside the element rather then the value attribute you have put on, as I'm not sure how supported that's going to be
Agreed with atmd. I'd instead have Angular build the li's with ng-repeat, then you have much more control instead of relying on jQuery to parse.
Here's another way to get the value with jQuery:
$scope.selected = $("#ulsel").find('.selected').attr('value');
Works in Chrome, didn't test further.