Início / coding / Perguntas / 78323477
Accepted
Rasec Malkic
Asked: 2024-04-14 18:35:05 +0800 CST

XPath do elemento baseado apenas em conteúdo de texto?

  • 772

Estou tentando pegar o xpath do segundo botão "comprar" para esse código HTML , mas sem usar classe, id nem outro atributo nem Xpath completo, apenas o conteúdo do texto relativo a ele como nestes exemplos . O código possui 2 elementos “ul” dentro de um “div”. Cada “ul” possui 3 ou 4 “li”. Quero assim já que os atributos internos mudam, mas a estrutura e o conteúdo do texto permanecem.

Meu objetivo é ter o Xpath do segundo “Comprar”, ou seja, aquele relacionado ao “li” que contém o texto “Home”.

Minhas tentativas no console do Chrome até agora são como abaixo, mas não estão funcionando:

$x("//*[text()='Home']")
$x("//ul[text()='Home']")
$x("//*[text()='Home']/following-sibling::li")

Na imagem abaixo eu mostro isso.

insira a descrição da imagem aqui

div {
    background-color:#eeeeee;
    display:inline;      
}

#ul li {
  display: grid;
    column-count: 4;
    column-gap: 20px;
    display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div>
<ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                                                Electronics
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><!----></div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Cameras
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----></div>
            </div>
            <div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                                                4K Front
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><div class="xyzq-list-column column-unshrink button-column ">
                        <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div></li>

</ul>

<ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                                                Home
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><!----></div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Appliances
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----></div>
            </div>
            <div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                                                Fans
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><div class="xyzq-list-column column-unshrink button-column ">
                        <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
                <div class="xyzq-list-column flex-width ">
                    <div class="xyzq-list-item">
                        <div class="xyzq-list-column flex-width ">
                            <div class="xyzq-list-item inner-list-item " style="">
                                <div class="xyzq-list-column flex-width column-unshrink ">
                                    <div class="xyzq-list-item">
                                        <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Discount Code
                                        </div>
                                    </div>
                                    <!----><!----><!----><!----></div>
                            </div>
                        </div>
                        <div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
                        <!----></div>
                </div>

            </div>
        </button></li>
</ul>



</div>
</body>
</html>

javascript

1 respostas

  1. Best Answer

    Para combinar um elemento por texto contains()pode ser usado (como já sugerido nos comentários).

    Uma following-siblingparte está correta e deve ser seguida por uma buttonexpressão.

    //li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]


    document.getElementById('find').addEventListener('click', () => {
  const xpath = '//li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]';
  const buy = document.evaluate(xpath, document, null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  buy.style.background = 'green';
});
    div {
  background-color: #eeeeee;
  display: inline;
}

#ul li {
  display: grid;
  column-count: 4;
  column-gap: 20px;
  display: inline;
}

#find {
  font-weight: bold;
}
    <div>
  <ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
      <div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                      Electronics
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
      <div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
        <div class="xyzq-list-column flex-width fixed-width">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                      Cameras
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
          </div>
        </div>
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                      4K Front
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <div class="xyzq-list-column column-unshrink button-column ">
              <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

  </ul>

  <ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
      <div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                      Home
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
      <div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
        <div class="xyzq-list-column flex-width fixed-width">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                      Appliances
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
          </div>
        </div>
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                      Fans
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <div class="xyzq-list-column column-unshrink button-column ">
              <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
                <div class="xyzq-list-column flex-width ">
                    <div class="xyzq-list-item">
                        <div class="xyzq-list-column flex-width ">
                            <div class="xyzq-list-item inner-list-item " style="">
                                <div class="xyzq-list-column flex-width column-unshrink ">
                                    <div class="xyzq-list-item">
                                        <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Discount Code
                                        </div>
                                    </div>
                                    <!----><!----><!----><!----></div>
                            </div>
                        </div>
                        <div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
                        <!----></div>
                </div>

            </div>
        </button></li>
  </ul>



</div>

<button id="find">FIND A BUTTON</button>

    • 3

relate perguntas