How to use selenium to call angular function (ng-click)

Question

I am trying to call a angular ng-click using selenium. This question is based on this javascript:

<span class="col" ng-click="getHope(1,'pray','smile')">100%</span>

This I turned into:

driver.find_element_by_css_selector("[ng-click=getHope(1,'pray','smile')]").click()

I even tried adding span:

driver.find_element_by_css_selector("[ng-click=getHope(1,'pray','smile')]").click()

and adding :

driver.find_element_by_css_selector("span[ng-click=getHope(1,\'pray\',\'smile\')]").click()

But I can the following error:

 selenium.common.exceptions.InvalidSelectorException: 
 Message: invalid selector: An invalid or illegal selector was specified

I tried to mimic this link, but it does not work. What am I doing wrong?

Ayoub_B · Accepted Answer · 2018-04-18 11:35:01Z

4

Try the following XPath selector:

driver.find_element_by_xpath("//span[@ng-click=\"getHope(1,'pray','smile')\"]").click()

But a better solution (IMO) would be to execute the function getHope with a JS executor directly.

answered Apr 18, 2018 at 11:35

Ayoub_B

7007 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

undetected Selenium · Accepted Answer · 2018-04-18 11:28:53Z

3

As per the HTML you have shared to click() on the desired element you can use either of the following Locator Strategies :

xpath :

driver.find_element_by_xpath("//span[@class='col' and contains(.,'100%')]").click()

xpath :

driver.find_element_by_xpath("//span[@class='col' and starts-with(@ng-click,'getHope') and contains(.,'100%')]").click()

css_selector :

driver.find_element_by_css_selector("span.col[ng-click^='getHope']").click()

edited Apr 18, 2018 at 11:28

answered Apr 18, 2018 at 11:24

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

5 Comments

nappingkid Over a year ago

That actually worked, but there are more spans that contain '100%'. This only selects the first one. Sorry, I should've mentioned it.

undetected Selenium Over a year ago

@nappingkid Added more options, check if any of those suffices to your needs. Let me know the status.

nappingkid Over a year ago

It is a bit more complicated than that I see. These solutions only select the first span. There are two identical divs that contain these span with 100%. The only differrence of the divs is that they contain <div ng-click="hideerror({target:'#heavenQuanity'},'heaven')"><span ...>100%</span></div> the other contains <div ng-click="hideerror({target:'#hellQuanity'},'hell')"><span ...>100%</span></div> Could I use this info to specify the selection even more?

undetected Selenium Over a year ago

Checkout the second and third option in my answer.

nappingkid Over a year ago

Tried both, but they still select only the first span alone. I realize that this website is not wel designed for a scraper.

Collectives™ on Stack Overflow

How to use selenium to call angular function (ng-click)

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related