Room for QHarr and David

Here is the HTML CODE !!
<tr ng-repeat="row in tableData.rows" class="ng-scope">


<td ng-repeat="col in tableData.format" ng-if="col.field !== 'ReasonCodeDescription'" ng-class="{'hidden-xs': isStyling(col, 'hidden-xs')}" class="ng-scope">

Sep 20, 2018

QHarr

ok

David

so this is the text " bot.FindElementsByXPath("//*[contains(text(),'DR ADJ - CHGBACK')]")" i found !!

QHarr

ok

David

So I want click the element = span ng-bind-html="row[col.field]" class="ng-binding">

Usually i use, Parent element and nextsibling element to that element of the node and then click

Based on the Guru 99 webpage !! I tried this code !!
bot.FindElementsByXPath("//*[contains(text(),'DR ADJ - CHGBACK')]//parent::td[1]//preceding::td[1]").Click

QHarr

7:51 PM

I am still trying to locate fa fa-file-text-o

Ah got it

David

Ok !!

QHarr

You can use a CSS selector with querySelectorAll and index into the returned nodeList

David

????

Sorry !!

I am not an expect in technical terms !!

QHarr

Ok.... tell me which ones you do understand first... or what you think you recognise... <sorry teacher mode engaged>

Or perhaps I'll be more specific

What is CSS broadly?

non-technical....layman's term

David

How to use CSS selector, to find a text

QHarr

8:00 PM

CSS is for styling webpages.

A website owes a lot to CSS determining how things look, and are placed in relation to each other...

A CSS selector is a way of targeting elements by part of the webpage CSS

querySelector is the VBA method that is used to apply a CSS selector

In this case it is applied to the HTMLDocument

Can't guarantee will work with full HTML but using your sample I can see that if I use a CSS selector of span.ng-binding I can return a list of the above matching elements

At least using CSS I can

That selector combination selects span elements with class ng-binding

The "." is a class selector. span by itself is an element selector.

w3schools.com/cssref/sel_element.asp

w3schools.com/cssref/sel_class.asp

Make sense so far?

David

I am so sorry !! I do not have any programming language knowledge !!
But I can understand that i have use css method to find my text!!

Is that correct !!

QHarr

You don't need to have lots of programming knowledge. The basics of the explanation are above. I will provide you just a little bit more first.

HTML you have elements

David

Yes !!

QHarr

Look at the top right of that image.... click to enlarge.

You will see that elements have an opening tag and a closing tag.

And attributes inside.

For example, the element shown has a p tag and a class attribute with value foo

David

Yes I understand !!

QHarr

8:12 PM

There you go.

David

Thank you !!

QHarr

So when I say that selector combination selects span elements with class ng-binding

I am saying I am looking for an element in the HTML that has <span

David

Span is the tag and Class is attribute

Okay !!

QHarr

and inside the <span </span has a class="ng-binding"

@David Spot on

So the selector combination of span.ng-binding says match all elements with that pattern

You can see which are matched in the first image I posted.

Dr was at index 5 and the item you want, I think, at index 6

David

So it filters all the element which has "ng-binding" on it !!

QHarr

8:15 PM

all span tag elements with class of ng-binding

David

Okay !!

QHarr

So, assuming that it can work with your HTML....

Is there more than one element matched?

David

Yes !!

It is a table and it has more than one line of data !!

QHarr

ok... so what is the difference between querySelector and querySelectorAll methods, given that they both apply CSS selectors?

David

So in my earlier project using VBA with IE I used to find my element with the text (which is unique) and then click the link next to it !!

QHarr

8:18 PM

using which method?

David

Let me post the code !!

QHarr

if you want... but I am asking did you use querySelector or querySelectorAll?

David

Set ElementCol = IE.document.getElementsByTagName("span")
For Each link In ElementCol
If link.innerText = "Retrievals" Then
link.previousElementSibling.Click
Exit For
End If
Next

QHarr

lol...ok....so different method altogether.

querySelector/querySelectorAll .... hint.... one returns only the first match..... the other returns all matches......

like getElement versus getElements

querySelectorAll is like the getElements version

David

Okay !! now i getting it !! Is it like FindElementsByClass and FindElementByClass

So for the first method i have to use numbers (1) to determine my results

QHarr

8:24 PM

True

@David No

I think... querySelector will only return one match. The first.

querySelectorAll will return a nodeList of all matching elements i.e. the image I showed.

David

Yes I agree !! I gave the answer based on my statement "FindElementsByClass and FindElementByClass"

QHarr

yup

Correct

So, you want the querySelectorAll method as you don't want the first element matched.

You want a list you can index into (assuming after all this that in vba it actually works as expected)

David

Actually the element i want to match is the text as it is single.

QHarr

Oh god....did I just give you a lecture on querySelector but you are using selenium?!

Shoot me now!

David

See I am so dumb !!

QHarr

8:28 PM

So.....

switching to selenium...

No worries......my fault but most of it still applies (I hope)

David

No it is not your fault !! I do not even know the basics of programming !!!

Yeah it is really a brainstorm !!

QHarr

There is a FindElementsByCss which is the equivalent of querySelectorAll except it returns webElements.

FindElementsByCss("span.ng-binding")

David

Yes !! but the problem is i have give the value (1) to click correct !! Like FindElementsByCss("span.ng-binding")(1).click

QHarr

Question is how to index into that..... I need to do a quick look up on that as in those cases I chuck the HTML into an HTMLDocument and use querySelector normally

Why 1?

David

That is just an example !!

Is there any option to find a text in Css method !!

QHarr

8:32 PM

oK... So I am not sure of the index syntax with webElements. I need to check. But I had another thought....

Do you have the page open currently?

David

Yes !!

QHarr

Are you aware that you can often right click on the target element and select inspect element then select the element in the html and right click again and copy the xpath selector?

Then stick that inside .FindElementByXPath

You can usually shorten the path

David

/html/body/div[2]/div[1]/div/div/div/div[1]/div[2]/table/tbody/tr[1]/td[7]/a/spa‌n

This is xpath !!

Let me post the screenshot of the webpage !!

QHarr

Yeah try putting that into your FindElementByXPath

The method above in the copy list is the CSS selector for the element (Copy Selector)

Got it

So that it just the interface

Have you tried putting the xpath above into .FindElementByXPath?

David

8:53 PM

I am not sure !!
Are you asking me to do this !
bot.FindElementsByXPath("//*[contains(text(),'DR ADJ - CHGBACK')]").click

QHarr

NO...

bot.FindElementByXPath("html/body/div[2]/div[1]/div/div/div/div[1]/div[2]/table/‌tbody/tr[1]/td[7]/a/spa‌n").Click

Btw I found the answer to indexing with webElements

It is simply (n) on the end where n is the required index.

Sorry..... I didn't mean to shout case "NO" - I still had caps lock on

David

No worries !! Actually based on the screen shot the table is dynamic so, I need to the click the link next to the text "DR ADJ - CHGBACK"

QHarr

So, you saying that method XPath didn't work?

Or is not suitable? Plus your screenshot shows the GUI not HTMKL

html

David

Actually This code works when "bot.FindElementByCss(".clickable-icon.ng-scope").Click" there is only one row of data !!

QHarr

So, you have solved it?

David

9:06 PM

I am not sure about GUI !!

QHarr

GUI is where the user clicks things etc..... not the webpage HTML.... Graphical User Interface...

So, did you solve it?

David

No, if i have multiple rows just like in the screenshot !!

QHarr

Next try .FindElementsByCSS("span.ng-binding")(6).Click '<==check the index is correct

You can check whether correct index with Debug.print bot.FindElementsByCSS("span.ng-binding")(6).Attribute("innerHTML")

to verify the html of target element in immediate window

David

Yes but the index number will be dynamic !! As in the screenshot the "n" th number is 1 !!!
But if i have multiple rows i need to click the link next to the text DR ADJ - CHGBACK !

Actually this code works for me : bot.FindElementByCss(".clickable-icon.ng-scope").Click
If i have only one row of data !!

QHarr

I can't see in the screenshot

Oh...

Sec.... maybe I can

oops

So I see two rows

David

9:15 PM

Yes !!

QHarr

Is that what you mean?

David

And there can multiple rows like 50 to 100

QHarr

And you are saying the position of DR ADJ can shift?

David

Yes !!
Also the row with this text "DR ADJ - CHGBACK" will be only one

QHarr

And you always want the span element immediately after DR ADJ?

David

9:17 PM

Yes !

QHarr

Ok....so it has to be XPath....or a loop with CSS

You can loop and test the .Text of each element retrieved and if =DR ADJ then you know the next will be the one you want.

David

Ok so how do i click it, I need the code !!

Just like the one i used for VBA + IE = "link.previousElementSibling.Click"

In my case it can "nextElement", I am not sure ! !!

QHarr

Dim eles As Object, ele As Object, counter As Long
counter = 1
Set n = bot.FindElementsByCss("span.ng-binding")
For Each ele In eles
If ele.Text = "DR ADJ - CHGBACK" Then
eles(counter + 1).Click
Exit For
End If
counter = counter + 1
Next

Something like that perhaps if looping. For the XPath part.... I would need to verify with valid XML

David

Let me try that !!

QHarr

After that can you use syntax like //*[contains(text(),'DR ADJ - CHGBACK')]/following-sibling::span[0]

span[1]

David

9:34 PM

I Got an error to define object on this line = For Each ele In eles
So i changed "Set n" as "Set eles" and it worked !!

QHarr

Oops...I forgot to change n to eles

Sorry.... mixing code in same window...lazy