How to click on ng-click angularJS element using Selenium Python

Question

I'd like to click on a button shown on a webpage It uses angularJS, and it seems I'm unable to click the right way, it's using ng-click

The page is that one: https://structuredproducts.lukb.ch/products/find-products?search=group%255B%255D%3DBarrierReverseConvertible%26inListing%3D0

The button is the "Show all" one. If you want to land in the html, just right click on the button and right click inspect.

<a class="button button-primary inverted show-all ng-binding ng-scope" href="" title="Show all" ng-bind-html="'display_all' | translate" ng-if="media === 'regular' &amp;&amp; group.count > instrumentCountToShowPaging &amp;&amp; !group.pagingEnabled &amp;&amp; ($index === 0 || group.allowRender === true)" ng-click="showAll(group)">Show all</a>

I tried the followings, without much success:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

urlstart = 'https://structuredproducts.lukb.ch/products/find-products?search=group%255B%255D%3DBarrierReverseConvertible%26inListing%3D0'

chrome_options = Options()
prefs={'disk-cache-size': 4096 }
chrome_options.add_argument("--disable-infobars")
chrome_options.add_experimental_option('prefs', prefs)
browser = webdriver.Chrome(executable_path = 'chromedriver.exe',chrome_options=chrome_options)
    
browser.get(urlstart)

browser.find_element_by_xpath("""//*[@id="product-list"]/tabs/tab[4]/div/div/section/tabs/tab[2]/section/a[@ng-click=\"showAll(group)\"]""")

browser.find_element_by_xpath("""//*[@id="product-list"]/tabs/tab[4]/div/div/section/tabs/tab[2]/section/a[@class='button button-primary inverted show-all ng-binding ng-scope' and starts-with(@ng-click,'showAll') and contains(.,'Show')]""").click()

browser.find_element_by_css_selector('#product-list > tabs > tab:nth-child(5) > div > div > section > tabs > tab:nth-child(3) > section > a').click()

    

buttons[0].send_keys('((JavascriptExecutor)browser).executeScript("showAll(group);")')

WebDriverWait(browser , 100).until(EC.element_to_be_clickable((By.XPATH, """//*[@id="product-list"]/tabs/tab[4]/div/div/section/tabs/tab[2]/section/a[text()='Show all']/../.."""))).click()

Any help / hint much appreciated

Answer 1

To click() on Show all you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

• Using LINK_TEXT:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Show all"))).click()
  

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.button.button-primary.inverted.show-all.ng-binding.ng-scope[title='Show all'][ng-click^='showAll']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='button button-primary inverted show-all ng-binding ng-scope' and @title='Show all'][ text()='Show all']"))).click()
  

• Note: You have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC