I'm new in selenium and trying to click icon button. I've used find_element_by_xpath, class_name, or by_id but it always returned an error message: Message: no such element: Unable to locate element. I was assuming that it was because of shadow-root
<mi-app-chrome>
#shadow-root (open)
<div class="mi-app-chrome-new-style">
<mi-notification-banner></mi-notification-banner>
<div class="mi-app-chrome__header-container">
<mw-mi-header class="mi-app-chrome__mw-mi-header__pinnable mi-app-chrome__mw-mi-header sc-mw-mi-header-h sc-mw-mi-header-s">
<div class="mw-mi-app-header md-toolbar-tools mw-mi-app-header__app-container mw-mi-app-header__pinned sc-mw-mi-header">
<mi-header-branding class="sc-mw-mi-header sc-mi-header-branding-h sc-mi-header-branding-s mw-mi-app-header__branding">
<svg class="mw-eyecon sc-mi-header-branding" width="100%" height="100%" viewBox="0 0 31 13" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" focusable="false">
<g stroke="none" stroke-width="1" fill-rule="evenodd" class="sc-mi-header-branding">
<g id="eyecon-glyph" class="sc-mi-header-branding">
<path d="M3.7798913,6.81793478 C4.45108696,7.70108696 5.26358696,8.54891304 6.07608696,9.36141304 C7.48913043,10.7744565 9.07880435,12.0461957 10.7038043,13 L6.00543478,13 C3.56793478,11.2336957 1.41304348,8.86684783 0,6.5 C1.41304348,4.13315217 3.56793478,1.76630435 6.00543478,0 L10.7038043,0 C9.07880435,0.953804348 7.48913043,2.22554348 6.07608696,3.63858696 C5.26358696,4.45108696 4.45108696,5.33423913 3.7798913,6.18206522 L3.7798913,6.18206522 C3.70923913,6.25271739 3.67391304,6.35869565 3.67391304,6.46467391 C3.67391304,6.64130435 3.70923913,6.71195652 3.7798913,6.81793478 L3.7798913,6.81793478" class="sc-mi-header-branding"></path>
<path d="M26.923913,6.81793478 C26.2527174,7.70108696 25.4402174,8.54891304 24.6277174,9.36141304 C23.2146739,10.7744565 21.625,12.0461957 20,13 L24.6983696,13 C27.1358696,11.2336957 29.2907609,8.86684783 30.7038043,6.5 C29.2907609,4.13315217 27.1358696,1.76630435 24.6983696,0 L20,0 C21.625,0.953804348 23.2146739,2.22554348 24.6277174,3.63858696 C25.4402174,4.45108696 26.2527174,5.33423913 26.923913,6.18206522 L26.923913,6.18206522 C26.9945652,6.25271739 27.0298913,6.35869565 27.0298913,6.46467391 C27.0298913,6.64130435 26.9945652,6.71195652 26.923913,6.81793478 L26.923913,6.81793478" class="sc-mi-header-branding"></path>
<path d="M15.5,0 C11.9320652,0 9,2.89673913 9,6.5 C9,10.0679348 11.8967391,13 15.5,13 C19.0679348,13 22,10.1032609 22,6.5 C22,2.89673913 19.1032609,0 15.5,0 L15.5,0 Z M15.5,9.25543478 C13.9809783,9.25543478 12.7092391,8.01902174 12.7092391,6.46467391 C12.7092391,4.94565217 13.9456522,3.67391304 15.5,3.67391304 C17.0190217,3.67391304 18.2907609,4.91032609 18.2907609,6.46467391 C18.2907609,8.01902174 17.0543478,9.25543478 15.5,9.25543478 L15.5,9.25543478 Z" class="sc-mi-header-branding"></path>
</g>
</g>
</svg>
</mi-header-branding>
<mi-header-title class="sc-mw-mi-header sc-mi-header-title-h sc-mi-header-title-s mw-mi-app-header__title-container">
<div class="mw-mi-app-header__title sc-mi-header-title">Home</div>
</mi-header-title>
<div class="mw-mi-app-header__right-container mw-mi-app-header__right-container--finder-present sc-mw-mi-header">
<mi-finder id="mi-finder" data-tutorial-id="mi-finder" class="sc-mw-mi-header" role="search" aria-label="Sitewide"></mi-finder>
<mw-app-switcher data-tutorial-id="mw-app-switcher" class="sc-mw-mi-header"></mw-app-switcher>
<mi-notification-bell class="notification-bell sc-mw-mi-header sc-mi-notification-bell-h sc-mi-notification-bell-s hydrated" data-tutorial-id="mi-toolbar-alerts">
<button class="mdc-icon-button mdc-ripple-surface sc-mi-notification-bell" data-mi-tooltip="">
<svg-icon class="sc-mi-notification-bell sc-svg-icon-h sc-svg-icon-s" innerhtml="
<svg style="height: initial !important; width: initial !important" width="20" height="20" viewBox="0 0 20 20" id="notifications" x="80" y="20" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4 12.2l-.5-.5s-.1 0-.1-.1v-1.3-1.4c.2-2.4-1.5-4.5-3.9-4.8V2.8c0-.4-.4-.8-.8-.8s-.8.4-.8.8v1.3c-2.4.2-4.2 2.3-4 4.8v2.7l-.1.1c-.2.2-.4.3-.5.5-.5.4-.7 1-.6 1.6.2.6.6 1.1 1.2 1.3H14.9c.6-.2 1.1-.7 1.2-1.3 0-.6-.2-1.2-.7-1.6zm-1.1 1.3H5.7l.1-.1c.1-.1.2-.3.4-.4.7-.6.7-.9.7-2.7V8.9c-.2-1.6 1-3 2.6-3.1h1c1.6 0 2.8 1.3 2.8 2.9v1.7c0 1.8 0 2.1.7 2.7 0 0 .2.2.3.4 0-.1 0-.1 0 0zM10 15.8c-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1z"/>
</svg>">
<svg style="height: initial !important; width: initial !important" width="20" height="20" viewBox="0 0 20 20" id="notifications" x="80" y="20" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4 12.2l-.5-.5s-.1 0-.1-.1v-1.3-1.4c.2-2.4-1.5-4.5-3.9-4.8V2.8c0-.4-.4-.8-.8-.8s-.8.4-.8.8v1.3c-2.4.2-4.2 2.3-4 4.8v2.7l-.1.1c-.2.2-.4.3-.5.5-.5.4-.7 1-.6 1.6.2.6.6 1.1 1.2 1.3H14.9c.6-.2 1.1-.7 1.2-1.3 0-.6-.2-1.2-.7-1.6zm-1.1 1.3H5.7l.1-.1c.1-.1.2-.3.4-.4.7-.6.7-.9.7-2.7V8.9c-.2-1.6 1-3 2.6-3.1h1c1.6 0 2.8 1.3 2.8 2.9v1.7c0 1.8 0 2.1.7 2.7 0 0 .2.2.3.4 0-.1 0-.1 0 0zM10 15.8c-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1z"></path>
</svg>
</svg-icon>
</button>
<mi-notification-tooltip class="sc-mi-notification-bell sc-mi-notification-tooltip-h sc-mi-notification-tooltip-s hydrated">Alerts</mi-notification-tooltip>
<mi-notification-badge class="singleDigitBadgeCount sc-mi-notification-bell sc-mi-notification-badge-h sc-mi-notification-badge-s hydrated">
<span class="sc-mi-notification-badge">1</span>
</mi-notification-badge>
</mi-notification-bell>
<mi-header-help id="mi-header-help-button" data-tutorial-id="mi-header-help-button" class="sc-mw-mi-header sc-mi-header-help-h sc-mi-header-help-s">
<button id="help-button" class="mdc-button mdc-button--primary mdc-button--outlined sc-mi-header-help mdc-ripple-upgraded">
<svg-icon class="help-button-icon sc-mi-header-help sc-svg-icon-h sc-svg-icon-s" innerhtml="
<svg style="height: initial !important; width: initial !important" width="20" height="20" viewBox="0 0 20 20" id="live_help" x="40" y="60" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9 2.8c1 0 1.7.8 1.7 1.8V16.8c0 .4-.2.7-.5.9-.1.1-.3.1-.4.1-.2 0-.4-.1-.7-.2L12.3 16H5.1c-1 0-1.7-.8-1.7-1.8V4.5c0-1 .7-1.7 1.7-1.8h9.8zm-.1 1.8H5.2v9.5h7.4c.2 0 .4.1.5.2l1.6 1v-1.2l.1-9.5z"/>
</svg>">
<svg style="height: initial !important; width: initial !important" width="20" height="20" viewBox="0 0 20 20" id="live_help" x="40" y="60" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9 2.8c1 0 1.7.8 1.7 1.8V16.8c0 .4-.2.7-.5.9-.1.1-.3.1-.4.1-.2 0-.4-.1-.7-.2L12.3 16H5.1c-1 0-1.7-.8-1.7-1.8V4.5c0-1 .7-1.7 1.7-1.8h9.8zm-.1 1.8H5.2v9.5h7.4c.2 0 .4.1.5.2l1.6 1v-1.2l.1-9.5z">
</path>
</svg>
</svg-icon>Help
</button>
<button id="help-icon-button" class="mdc-icon-button mdc-ripple-surface sc-mi-header-help mdc-ripple-upgraded">
<svg-icon class="sc-mi-header-help sc-svg-icon-h sc-svg-icon-s" innerhtml="
<svg style="height: initial !important; width: initial !important" width="20" height="19" viewBox="0 0 20 20" id="helpcenter" x="60" y="20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.434 15.894a1.085 1.085 0 1 0 1.076 1.094 1.085 1.085 0 0 0-1.076-1.094zM14.941 5.051A4.954 4.954 0 0 0 10.1 2.064a4.814 4.814 0 0 0-4.891 3.5.812.812 0 0 0 .623.98.843.843 0 0 0 1.015-.6A3.123 3.123 0 0 1 10.1 3.691 3.307 3.307 0 0 1 13.355 5.6c.464 1.263-.177 2.7-1.758 3.945a18.49 18.49 0 0 1-.617.458c-1.122.811-2.394 1.73-2.394 3.926a.843.843 0 0 0 1.684 0c0-1.381.683-1.875 1.718-2.622.222-.161.448-.325.671-.5 2.141-1.684 2.989-3.834 2.282-5.756z"/>
</svg>">
<svg style="height: initial !important; width: initial !important" width="20" height="19" viewBox="0 0 20 20" id="helpcenter" x="60" y="20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.434 15.894a1.085 1.085 0 1 0 1.076 1.094 1.085 1.085 0 0 0-1.076-1.094zM14.941 5.051A4.954 4.954 0 0 0 10.1 2.064a4.814 4.814 0 0 0-4.891 3.5.812.812 0 0 0 .623.98.843.843 0 0 0 1.015-.6A3.123 3.123 0 0 1 10.1 3.691 3.307 3.307 0 0 1 13.355 5.6c.464 1.263-.177 2.7-1.758 3.945a18.49 18.49 0 0 1-.617.458c-1.122.811-2.394 1.73-2.394 3.926a.843.843 0 0 0 1.684 0c0-1.381.683-1.875 1.718-2.622.222-.161.448-.325.671-.5 2.141-1.684 2.989-3.834 2.282-5.756z">
</path>
</svg>
</svg-icon>
</button>
</mi-header-help>
</div>
</div>
</mw-mi-header>
</div>
</div>
</mi-app-chrome>
I've tried with this code:
driver.find_element_by_class_name('mdc-icon-button mdc-ripple-surface sc-mi-notification-bell').click()
or something like:
driver.implicitly_wait(10)
element = driver.find_element_by_xpath("//*[@id='mw']/ui-view/app-root/mi-app-chrome//div/div[1]/mw-mi-header/div/div/mi-notification-bell")
element.click()
But nothing's successful
Thanks in advance
You have to access svg in a different way than the regular locators.
This should work, assuming that there is only one svg-icon (as provided in the query)
driver.find_element(By.XPATH, "//*[name()='svg-icon']")
Here is the selection snapshot: DOM Snapshot
Another extended locator (if there are more than one svg-icons) narrowed down to finding the bell class first and then traversing to the svg-icon through it.
driver.find_element(By.XPATH, "//*[contains(@class, 'notification-bell')]//*[name()='svg-icon']")
For shadow root (as mentioned in the later comment):
shadow = driver.execute_script('return document.querySelector("your_shadow_element").shadowRoot')
shadow.find_element(By.XPATH, "//*[name()='svg-icon']")
Replace your-shadow_element with the element attribute (id, class, etc)