Click on link within another CSS wrapper - Selenuim Python

Question

I am trying to click on the profile picture on top right to be able to logout of the website. This is Cisco's license portal website "Logout" link; when you click on the profile picture, it drops down with a "Logout" link.

I can navigate through the body without any issues, but whenever I try to access the header of the site, it fails to find the element.

Using Selenium Chrome driver version 87 with Python

I can't seem to access that Profile Picture highlighted in red in order to logout with chrome selenium driver, it keeps telling me 'Element not found' using the ID or XPATH:

################ Log out ##############################
print('>>> Logging out of Cisco Cloud website')
logout = WebDriverWait(browser, element_timeout,ignored_exceptions=ignored_exceptions)\
                        .until(EC.presence_of_element_located((By.XPATH, '//*[@id="fwt-profile-button-loggedout"]')))

time.sleep(2)
logout = browser.find_element_by_xpath('//*[@id="fwt-profile-button-loggedout"]')
logout.click()

time.sleep(1)


logout1 = WebDriverWait(browser, element_timeout,ignored_exceptions=ignored_exceptions)\
                        .until(EC.presence_of_element_located((By.LINK_TEXT, 'Logout')))

time.sleep(2)
logout1 = browser.find_element_by_link_text('Logout')
logout1.click()

time.sleep(5)

------------------

I tried this based on this answer, but still cannot get it to find the element: https://stackoverflow.com/a/48756722/12288943

def expand_shadow_element(element):
  shadow_root = browser.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root

################# Log out ##############################
print('>>> Logging out of Cisco Cloud website')

logout1 = browser.find_element_by_xpath('//*[@id="overlayBlack"]/csc-header')
shadow_root1 = expand_shadow_element(logout1)

logout2 = browser.find_element_by_xpath('//*[@id="overlayBlack"]/csc-header//div')
shadow_root2 = expand_shadow_element(logout2)

logout = browser.find_element_by_id('fwt-profile-button-loggedout')

time.sleep(2)
logout.click()


selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="overlayBlack"]/csc-header//div"}
  (Session info: chrome=87.0.4280.88)

Is clicking on the svg the right action? What if you change it to the parent a tag above it? ... The dom shows it kicks off a JS command. That might open the menu — RichEdwards, Dec 16 '20 at 16:13
Yes, I tried every parent tag with XPATH, and still cannot find it — Checksum321, Dec 16 '20 at 21:38

score 0 · Answer 1 · answered Dec 16 '20 at 16:23

0

There is a #shadow-root(0) inside the 'csc-header' tag. The element you're trying access is inside shadow-root. I think that's why you are getting an 'Element not found' error. You have to navigate into shadow first. Hope this points you in the right direction.

<csc-header>
    #shadow-root (open)
        <svg id='fwt-profile-button-loggedout'></svg>
</csc-header>

answered Dec 16 '20 at 16:23

JustCarlos

128
7

Thank you for pointing me in the right direction. I tried this https://stackoverflow.com/a/48756722/12288943 , but still cannot get pass the #shadow open (updated original post) – Checksum321 Dec 16 '20 at 22:32

Click on link within another CSS wrapper - Selenuim Python

1 Answers1