search

sukgu / pyshadow

Selenium plugin to manage multi level shadow DOM elements on web page.
Apache License 2.0
46 stars 9 forks source link

The shadow dom does not work with chrome. #4

Closed kanthkr closed 2 years ago

kanthkr commented 3 years ago

Hello, I am using the below code to get the shadow dom element as below. Have tried multiple options as provided in example but it does not work. The find_element function works when the id is not provided like self.shadow_driver.find_element('unity-global-nav-top-item') but not the code below. Gives an error message as below. File "E:\Smartworks\QA\Automation\venv\lib\site-packages\pyshadow\main.py", line 107, in find_element raise ElementNotVisibleException("Element with CSS " + css_selector + " is not present on screen") selenium.common.exceptions.ElementNotVisibleException: Message: Element with CSS unity-global-nav-top-item[id="ACCESS_CONTROL"] is not present on screen

self.driver = webdriver.Chrome(ChromeDriverManager().install()) self.driver.get(url) self.driver.maximize_window() self.shadow_driver = Shadow(self.driver) custom_elements = self.shadow_driver.find_element('unity-global-nav-top-item[id="ACCESS_CONTROL"]')

sukgu commented 3 years ago

@kanthkr Can you please attach your page DOM. There might be more than one element with id ACCESS_CONTROL. Also please try unity-global-nav-top-item#ACCESS_CONTROL if it works.

kanthkr commented 3 years ago

@sukgu , Below is the structure. I have also tried # tag. Still it is not working. I have added the dom snippet below. Not sure if the levels matter. 

      <div class="header-container">
         <slot name="customHeader">
           <div class="logo-container flex-center ">
             <div class="logo">
               <img src="/static/media/favicon.ce6a70f8.ico">
             </div>
           </div>
           <img style="padding: 0 var(--global-nav-padding-size-sm, var(--default-global-nav-padding-size-sm));" src="/static/media/logo_SmartWorks_color.121e8282.png">
         </slot> 
         <slot name="customExpandedHeader"></slot>
      </div>
      <div class="menu-box">
        <div class="top-container">
          <!---->
    <unity-global-nav-top-item id="DATA" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="EDGE_ORCHESTRATION" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="LABELS" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="STREAMS" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="DATA_VIZ" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="ACCESS_CONTROL" style=""></unity-global-nav-top-item>
    <div class="
      container
      open

    ">
    <div class="label tall ">
      <unity-icon class="icon " icon="unity:token"></unity-icon>
      <unity-typography size="paragraph" weight="medium" class="text"><!---->Access Control<!----></unity-typography>

      <unity-icon class="icon" icon="unity:down_chevron"></unity-icon>
    </div>
    <!---->
    <unity-global-nav-inner-item id="USERS" style=""></unity-global-nav-inner-item>
    <!---->
    <unity-global-nav-inner-item id="ROLES" style=""></unity-global-nav-inner-item>
    <!---->
    <unity-global-nav-inner-item id="POLICIES" style=""></unity-global-nav-inner-item>
    <!---->
    <unity-global-nav-inner-item id="APPS" style=""></unity-global-nav-inner-item>
    <!---->
  </div>
    <unity-global-nav-top-item id="ACCOUNTS" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="DOCS" openneighbor="" style=""></unity-global-nav-top-item><!---->
    <unity-global-nav-top-item id="LOGOUT" style=""></unity-global-nav-top-item><!---->
        </div>
      </div>

      <div>
        <div class="collapse-button flex-center">
          <unity-icon></unity-icon>
        </div>
      </div>
sukgu commented 3 years ago

@kanthkr Yes, the level always matters. If the element <unity-global-nav-top-item id="ACCESS_CONTROL" style=""></unity-global-nav-top-item> is a child of shadow fragment then you should use css selector like parent_tag_of_shadow_fragment>unity-global-nav-top-item#ACCESS_CONTROL or parent_tag_of_shadow_fragment unity-global-nav-top-item#ACCESS_CONTROL if unity-global-nav-top-item is not a direct child.

kanthkr commented 3 years ago

@sukgu find_elements('unity-global-nav-top-item') works perfectly fine. It gets me all elements. But when I add the id part to find element like self.shadow_driver.find_element('unity-global-nav-top-item#ACCESS_CONTROL'), it does not work.

kanthkr commented 3 years ago

@sukgu One thing I noticed is that self.shadow_driver.### find_elements('unity-global-nav-top-item#ACCESS_CONTROL') works fine providing one value as list while the same does not work with find_element. Maybe it helps looking at the problem.

sukgu commented 3 years ago

Please use the latest version v0.0.4 to check if this is fixed. @kanthkr