How to click on this HTML element in Python(Selenium)

Question

Recently, I used selenium to crawl some information on the website. And What I want to do is just clicking 'previous month button'.

So I push 'F12' button on Chrome And find HTML Code like this

So I write code like this

webDriver.find_element_by_css_selector('span.ui-icon ui-icon-circle-triangle-w').click()

But it doesn't work, I changed multiple times changing the code like this

webDriver.find_element_by_css_selector('a.ui-icon ui-icon-circle-triangle-w').click()
webDriver.find_element_by_css_selector('ui-icon ui-icon-circle-triangle-w').click()
webDriver.find_element_by_class_name('ui-icon ui-icon-circle-triangle-w').click()

Any of those don't work. When I tried to use first one of three trial(that is : webDriver.find_element_by_css_selector('a.ui-icon ui-icon-circle-triangle-w').click()), the error pops up like this

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"a.ui-icon ui-icon-circle-triangle-w"}
 (Session info: chrome=86.0.4240.198)

I don't know why it doesn't work..

Please help

Answer 1

try using,

webDriver.find_element_by_class_name("ui-icon.ui-icon-circle-triangle-w").click()

whenever you see space in HTML code you should put '.' instead of space while writing with selenium. Also, instead of writing class name just copy paste and replace space with '.' That is lot easier and removes tying errors.

Answer 2

As per the HTML:

The <span> tag is having the class attribute value set as ui-icon ui-icon-circle-triangle-w.

When you intent to use this class attribute value in a xpath you can keep it as it is as follows:

//span[@class='ui-icon ui-icon-circle-triangle-w']

When you intent to use this class attribute value in a css-selectors you need to seperate the values through a dot (.) character as follows:

span.ui-icon.ui-icon-circle-triangle-w

---

Solution

Ideally, to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  WebDriverWait(webDriver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "span.ui-icon.ui-icon-circle-triangle-w"))).click()
  

• Using XPATH:

  WebDriverWait(webDriver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='ui-icon ui-icon-circle-triangle-w']"))).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
  

---

References

You can find a couple of relevant discussions on NoSuchElementException in:

• selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element while trying to click Next button with selenium
• selenium in python : NoSuchElementException: Message: no such element: Unable to locate element

Answer 3

webDriver.find_element_by_css_selector('span.ui-icon ui-icon-circle-triangle-w')

will find element which is a child element of span tag and had the class "ui-icon-circle-triangle-w"

if you want to check the span tag that have the class "ui-icon ui-icon-circle-triangle-w"

you have to use '.' in css to refer multiple classes . As spaces in html class indicates end of a class so ui-icon and ui-icon-circle-triangle-w are two differen classes

the equalent locator is:

webDriver.find_element_by_css_selector('span.ui-icon.ui-icon-circle-triangle-w')

means span tag which has the classes "ui-icon" and "ui-icon-circle-triangle-w"

1. in css locator space is equalent to '//' in xpath
2. IN CSS locator > is equalent to '/' in xpath

Also see below thread:

The below thread shows the full discussion on 'Element not found': https://sqa.stackexchange.com/q/41860/40022

The summary is to :

1. Trust your code and doubt SUT (Software under test):

If everything was working fine and the test starts to fail suddenly. Instead of debugging your code for issues, start with checking the actual product. Do some visual inspection and see whether the development team has modified the element or the element is no longer being displayed.

2. Trust your code and doubt the environment:

If everything was working fine locally and failed as soon as you integrated to CI/CD. Then investigate the the product behavior in test server. Mostly due to OS and configuration difference product won't work as it would in local ( Raise a Bug)

3. Now doubt your scripts (Using absolute XPATH):

You might be using absolute XPATH, this causes flaky tests when DOM structure changes. Use relative XPATH (CSS would be more recommended). Never use xpath/ if you have unique ID/name to identify an element.

4. Now doubt your scripts (Not using explicit wait):

Sometimes scripts lacks explicit wait and try to interact with dynamic elements, this causes test to fail because it try to interact with the element before it is even available in DOM.

5. Now doubt your scripts (Handling spinners):

Sometimes spinner takes time to get displayed. SO, if you are just checking for the invisibility condition then it will be return true and try to interact with next element before the actual spinner event completes

So, first check visibility of spinner and then check for invisibility before interacting with other dynamic elements.

6. Now doubt your scripts (Not handling iFrames):

Sometimes element will be inside iframes and scripts won't switch between frames before interacting with these elements.

Check whether , any parent element contains the tag frame or iframe to determine whether element is inside an iframe

7. Now doubt your scripts (Not disabling wait for angular):

Sometimes products uses spinners to wait for asynchronous operations to complete behind the scene. For example you click login and spinner comes up and will not disappear till the background tasks are not completed.

In this case make sure you are not waiting for the asynchronous operations to complete (eg waitforangular flag set to true in protractor) before interacting with the elements in the temporary overlay.

This is because , if you set waitforangular to true, then scripts wait till all the tasks are completed and by then the temporary overlay (say spinner) will be removed from DOM