python selenium: unable to locate element, svg-icon button inside shadow-root

Question

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=&quot;height: initial !important; width: initial !important&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; id=&quot;notifications&quot; x=&quot;80&quot; y=&quot;20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;>
                                        <path d=&quot;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&quot;/>
                                    </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=&quot;height: initial !important; width: initial !important&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; id=&quot;live_help&quot; x=&quot;40&quot; y=&quot;60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;>
                                        <path d=&quot;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&quot;/>
                                    </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=&quot;height: initial !important; width: initial !important&quot; width=&quot;20&quot; height=&quot;19&quot; viewBox=&quot;0 0 20 20&quot; id=&quot;helpcenter&quot; x=&quot;60&quot; y=&quot;20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;>
                                        <path d=&quot;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&quot;/>
                                    </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

Answer 1

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)

Answer 2

In my case, I managed to select an <svg> element by Making the selection path as narrow as possible to brute-locate the svg element using the height property.

svgElement = a_parent_element.find_element(by=By.XPATH, value='.//span//*[@height]')

Or more formaly:

svgElement = the_immediate_parent_element.find_element(by=By.XPATH, value='./*')

In both cases, after this process, one may check to see whether the selected thing is an svg element:

>>> svgElement.tag_name
'svg'