Search code examples
python-3.xseleniumweb-scrapinggeckodriver

Can't "get_attribute" with selenium python


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,


Solution

  • 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