1

Very surely it is a very simple answer, but I have not reached it for hours. I'm trying to find the "data-icon" attribute inside a selenium element, this is the HTML of the element:

<div class="_1MZWu" style="z-index: 7; transition: none 0s ease 0s; height: 72px; transform: translateY(144px);">
    <div tabindex="0" aria-selected="true" role="option">
        <div class="_3Pwfx _1GGbM">
            <div class="_22mTQ">
                <div class="_1l12d" style="height: 49px; width: 49px;">
                    <div class="_15OLJ"><span data-testid="default-group" data-icon="default-group" class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212" width="212" height="212">
                                <path fill="#DFE5E7" class="background" d="M105.946.25C164.318.25 211.64 47.596 211.64 106s-47.322 105.75-105.695 105.75C47.571 211.75.25 164.404.25 106S47.571.25 105.946.25z"></path>
                                <path fill="#FFF" class="primary"
                                    d="M61.543 100.988c8.073 0 14.246-6.174 14.246-14.246s-6.173-14.246-14.246-14.246-14.246 6.173-14.246 14.246 6.174 14.246 14.246 14.246zm8.159 17.541a48.192 48.192 0 0 1 8.545-6.062c-4.174-2.217-9.641-3.859-16.704-3.859-21.844 0-28.492 15.67-28.492 15.67v8.073h26.181l.105-.248c.303-.713 3.164-7.151 10.365-13.574zm80.755-9.921c-6.854 0-12.21 1.543-16.336 3.661a48.223 48.223 0 0 1 8.903 6.26c7.201 6.422 10.061 12.861 10.364 13.574l.105.248h25.456v-8.073c-.001 0-6.649-15.67-28.492-15.67zm0-7.62c8.073 0 14.246-6.174 14.246-14.246s-6.173-14.246-14.246-14.246-14.246 6.173-14.246 14.246 6.173 14.246 14.246 14.246zm-44.093 3.21a23.21 23.21 0 0 0 4.464-.428c.717-.14 1.419-.315 2.106-.521 1.03-.309 2.023-.69 2.976-1.138a21.099 21.099 0 0 0 3.574-2.133 20.872 20.872 0 0 0 5.515-6.091 21.283 21.283 0 0 0 2.121-4.823 22.16 22.16 0 0 0 .706-3.193c.16-1.097.242-2.224.242-3.377s-.083-2.281-.242-3.377a22.778 22.778 0 0 0-.706-3.193 21.283 21.283 0 0 0-3.272-6.55 20.848 20.848 0 0 0-4.364-4.364 21.099 21.099 0 0 0-3.574-2.133 21.488 21.488 0 0 0-2.976-1.138 22.33 22.33 0 0 0-2.106-.521 23.202 23.202 0 0 0-4.464-.428c-12.299 0-21.705 9.405-21.705 21.704 0 12.299 9.406 21.704 21.705 21.704zM145.629 131a36.739 36.739 0 0 0-1.2-1.718 39.804 39.804 0 0 0-3.367-3.967 41.481 41.481 0 0 0-3.442-3.179 42.078 42.078 0 0 0-5.931-4.083 43.725 43.725 0 0 0-3.476-1.776c-.036-.016-.069-.034-.104-.05-5.692-2.581-12.849-4.376-21.746-4.376-8.898 0-16.055 1.795-21.746 4.376-.196.089-.379.185-.572.276a43.316 43.316 0 0 0-3.62 1.917 42.32 42.32 0 0 0-5.318 3.716 41.501 41.501 0 0 0-3.443 3.179 40.632 40.632 0 0 0-3.366 3.967c-.452.61-.851 1.186-1.2 1.718-.324.493-.6.943-.841 1.351l-.061.101a27.96 27.96 0 0 0-.622 1.119c-.325.621-.475.975-.475.975v11.692h82.53v-11.692s-.36-.842-1.158-2.195a35.417 35.417 0 0 0-.842-1.351z">
                                </path>
                            </svg></span></div>
                </div>
            </div>
            <div class="_1C6Zl">
                <div class="_1c_mC">
                    <div class="_3Tw1q"><span dir="auto" title="Prueba" class="_1hI5g _1XH7x _1VzZY">Prueba</span></div>
                    <div class="_2gsiG">2:30</div>
                </div>
                <div class="_7W_3c">
                    <div class="fqPQb"><span class="_3MjzD" title="‪Dummy Text‬">
                            <div class="_203bP"><span dir="ltr" class="_1VzZY">Dummy Text</span></div>
                        </span></div>
                    <div class="_2gsiG"><span></span><span></span><span></span></div>
                </div>
            </div>
        </div>
    </div>
</div>

The attribute I need is the "data-icon" right after class="_15OLJ", I've tried to get a new element from the latter:

sub_elem = elem.find_element_by_class_name('_15OLJ')

But then, when I try to get the attribute:

wanted_attrib = sub_elem.get_attribute('data_icon')

I get "None"... I am using Python 3.8, Geckodriver 0.29.0 and Firefox 85.0 64 bit on Windows 8 x64

Thanks in advance,

2 Answers 2

1

The <data-icon> doesn't belongs to the element <div class="_15OLJ">, but belongs to it's descendent <span> so you have to traverse to it's child.

To locate the element you can use either of the following Locator Strategies:

  • Using css_selector:

    sub_elem = elem.find_element(By.CSS_SELECTOR, "div._15OLJ > span")
    wanted_attrib = sub_elem.get_attribute('data-icon')
    
  • Using xpath:

    sub_elem = elem.find_element(By.XPATH, "//div[@class='_15OLJ']/span")
    wanted_attrib = sub_elem.get_attribute('data-icon')
    

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

  • Using CSS_SELECTOR:

    wanted_attrib = WebDriverWait(elem, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div._15OLJ > span"))).get_attribute('data-icon')
    
  • Using XPATH:

    wanted_attrib = WebDriverWait(elem, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@class='_15OLJ']/span"))).get_attribute('data-icon')
    
  • 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
    
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you! Your answer is very broad and very well documented. And, if you'll allow me the question, is there a difference between find_element(By..... and find_element_by_css_selector (or xpath for that matter)?
@Jerardo find_element_by_* commands are deprecated. Please use find_element() instead
1

Problem is that sub_elem.get_attribute('data_icon') will refer to the div that do not contain a data_icon and also that there is a typo data-icon not data_icon

try the following:

elem.find_element_by_css_selector('div._15OLJ span').get_attribute('data-icon')

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.