javaseleniumui-automationselenide

Unable to click on shadow root element using Selenide

I've imported Selenide shadowCss selector into my project and now trying to click on the element that is under shadow-root. Sadly no luck but I've managed to do it with javascript but how to do it properly with Selenide?

import static com.codeborne.selenide.Selectors.shadowCss;

Trying to click on "Installed products"

   <div size="1" class="sc-4444444 blckX">
    <company-tab variant="light" class="hydrated">
     #shadow-root (open)
      <div class="company-tab company-tab--light">
        <company-vst class="hydrated"></company-vst>
          <div class="company-tab__container">
           <div class="company-tab__wrapper">
            <div class="company-tab__list" role="tablist">
             <div class="company-tab__list" role="tablist">
          <ul class="company-tab__list__container" role="presenation">
           <li role="presentation" class="company-tab__header company-tab__header--active">
           <li role="presentation" class="company-tab__header">
           <li role="presentation" class="company-tab__header">
            <company-tab-header data-index="2" is-key-press class="hydrated">
             <!---->
            <button class="company-tab-header company-tab-header--light" role="tab" tabindex="-1" data-index"2">
             <span class="company-tab-header__content">
              <company-icon class="company-tab-header__icon company-icon company-icon--md hydrated">...</company-icon>
              <span>
               <span class="company-tab-header__visible-title">Installed products</span>
               <span class="company-tab-header__hidden-title" aria-hidden>Installed products</span>
              </span>
              ::after
             </button>
                 .........

JS that managed to capture "Installed products"

document.querySelector('#__next > div > main > div > div > div:nth-child(2) > div.sc-50b84693-2.ebYhch > div > div > div.sc-50b84693-1.dUDDAN > div > company-tab').shadowRoot.querySelector('ul:nth-child(1) >li:nth-child(3) > company-tab-header >button > span >span>span.company-tab-header__hidden-title')

examples of shadowCss use: https://github.com/selenide/selenide/blob/master/src/test/java/integration/ShadowElementTest.java

Using 5.20 Selenide version. Upgrade is not possible in this case.

Solution

  • locating button with shadowCss Selenide:

    @And("click installed products")
public void clickInstalledProducts() {
    $(shadowCss("button[data-index='2']", "company-tab")).click();
        System.out.println("Managed to click");
");

    Sadly by text we were not able to find solution, but we managed to catch element with button tag.