1

Estoy tratando de desarrollar un bot para consultar los movimientos de mi banca en linea, ya he realizado otros antes pero en este caso es en BBVA trato de obtener los elementos o interactuar para simular un click sobre ellos pero no me encuentra esos elementos en el dom, por ejemplo estos.

<bbva-btge-app-template id="app__content"><bbva-btge-sidebar-menu class="sidebar" slot="nav" home-page="bbva-btge-dashboard-solution-home" expanded=""></bbva-btge-sidebar-menu></bbva-btge-app-template>

donde quiero seleccionar el elemento <bbva-btge-sidebar-menu> pero no lo encuentra, esto es lo que tengo de código y ya llevo días intentando con varias formas y todas son iguales, no encuentran el movimiento.

window.onload = function () {
    var intervalo = setInterval(function () {
      //var toSend = [];
      console.log("Inicia");
      var btn_modal=document.querySelectorAll(".close-btn");
      if(btn_modal.length>0){
        btn_modal[1].click();
        var div_cuentas=document.querySelector('bbva-web-navigation-menu-item[icon="bbva:account"]');
        if(div_cuentas){
            var btn_mis_cuentas=div_cuentas.querySelector('bbva-web-navigation-menu-item-action[role="button"]');
            if(btn_mis_cuentas){
                btn_mis_cuentas.click();
            }else{
                console.error("No se encontro role=button");
            }
        }else{
            console.error("No se encontro icon=bbva:account");
        }
      }else{
        console.error("No se encontraron .close-btn");
      }
    }, 10000); //Termina el temporizador y se coloca el tiempo para que se repita
  };
5
  • algunos elemento ajax no existen en el onload, si no que son declarado/creados despues ... Commented el 25 jun. a las 18:02
  • Pero es un ciclo, aun después de que cargó toda la página sigue sin detectar los elementos Commented el 25 jun. a las 18:04
  • no que va yo implementaria mutation observer e iria directo por el elemento ... y me ahorro todo eso del .close-btn Commented el 25 jun. a las 18:21
  • Como se diferencia el mutation a el ciclo? Commented el 25 jun. a las 19:02
  • Mutation observer es un whatcher del DOM y detecta cualquier cambio ... cuando aparesca el elemento que buscas le atachas el evento ... Commented el 25 jun. a las 19:09

1 respuesta 1

0

Lo que veo que pasa, es que al parecer ese sito utiliza Web Components con Shadow Dom. Y no puedes seleccionar un elemento que este dentro de Shadow Dom con querySelector

Veamos un ejemplo:

  • Creo un Web Component yussef-component
  • Creo un Shadow Dom para él
  • Añado un botón
  • Y por fuera del componente intento seleccionar todos los botones del documento

customElements.define('yussef-component', class extends HTMLElement{
  connectedCallback(){
    this.attachShadow({ mode: 'open' });
    const boton = document.createElement("button");
    boton.addEventListener("click", a=> console.log("press"));
    boton.innerText = "Botón";
    this.shadowRoot.append(boton);
  }

});

function buscarBotones(){
 let btns = document.querySelectorAll("button");
 console.log(btns.length);
}
<yussef-component></yussef-component>
<input type="button" onclick="buscarBotones()" value="Buscar botones">

Como podrás ver en el ejemplo anterior, no encuentra botón alguno, porque todo lo que esté dentro del shadow es inaccesible

introducir la descripción de la imagen aquí


Si el componente creo que un Shadow Dom en modo abierto (open, ver la imagen anterior), podrás acceder a él usando la propiedad shadowRoot

customElements.define('yussef-component', class extends HTMLElement{
  connectedCallback(){
    this.attachShadow({ mode: 'open' });
    const boton = document.createElement("button");
    boton.addEventListener("click", a=> console.log("press"));
    boton.innerText = "Botón";
    this.shadowRoot.append(boton);
  }

});

function buscarBotones(){
 let btns = document.querySelector("yussef-component").shadowRoot.querySelectorAll("button");
 console.log(btns.length);
}
<yussef-component></yussef-component>
<input type="button" onclick="buscarBotones()" value="Buscar botones">


También podrías crear una función tipo querySelectorAll que busque los nodos con shadow dom

customElements.define('yussef-component', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    const boton = document.createElement("button");
    boton.addEventListener("click", a => console.log("press"));
    boton.innerText = "Botón";
    this.shadowRoot.append(boton);
  }

});

function buscarBotones() {
  let btns = $("button");
  console.log(btns.length);
}

const $ = function(selector) {
  const arr = []
  for (const {shadowRoot} of document.querySelectorAll("*")) {
    if (shadowRoot) {
      arr.push(...shadowRoot.querySelectorAll(selector));
    }
  }
  return arr;
}
<yussef-component></yussef-component>
<yussef-component></yussef-component>
<yussef-component></yussef-component>
<input type="button" onclick="buscarBotones()" value="Buscar botones">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.