NodeJS / Puppeteer - Справка, нажав элемент

Question

Я знаю, что это не первый вопрос для этой проблемы, но я действительно застрял

Мне нужно нажать на третий div с классом "menu-lateral-contraido-container" (lista_chamados), divto = "/ main / listachamado /":

                         <div class="menu-lateral-contraido-container">
                            <div class="menu-lateral-contraido-sub-container" title="Abertura de Chamado" draggable="true" style="opacity: 1;">
                               <div to="/main/abrechamadofone/" class="route-redirect-box">
                                  <div class="menu-lateral-item-contraido-container cor-tema-topo-fundo ">
                                     <div class="menu-lateral-item-contraido-icon"><i class="ellevo-icons">chamado_fone</i></div>
                                  </div>
                               </div>
                            </div>
                            <div class="menu-lateral-contraido-sub-container" title="Lista de Tarefas" draggable="true" style="opacity: 1;">
                               <div to="/main/listatarefa/" class="route-redirect-box">
                                  <div class="menu-lateral-item-contraido-container cor-tema-topo-fundo ">
                                     <div class="menu-lateral-item-contraido-icon"><i class="ellevo-icons">lista_tarefa</i></div>
                                  </div>
                               </div>
                            </div>
                            <div class="menu-lateral-contraido-sub-container" title="Lista de Chamados" draggable="true" style="opacity: 1;">
                               <div to="/main/listachamado/" class="route-redirect-box">
                                  <div class="menu-lateral-item-contraido-container cor-tema-topo-fundo ">
                                     <div class="menu-lateral-item-contraido-icon"><i class="ellevo-icons">lista_chamado</i></div>
                                  </div>
                               </div>
                            </div>
                            <div class="menu-lateral-contraido-sub-container" title="Abertura de Tarefa" draggable="true" style="opacity: 1;">
                               <div to="/main/aberturatarefa/" class="route-redirect-box">
                                  <div class="menu-lateral-item-contraido-container cor-tema-topo-fundo ">
                                     <div class="menu-lateral-item-contraido-icon"><i class="ellevo-icons">abertura_tarefa</i></div>
                                  </div>
                               </div>
                            </div>
                         </div>

Поскольку все они имеют один и тот же класс и не имеют идентификатора, я попытался щелкнуть по названию

//Error: No node found for selector: div[title="Lista de Chamados"]
await page.click('div[title="Lista de Chamados"]'); 

Тогда проблема заключалась в том, что япришлось ждать загрузки DOM или использовать page.evaluate, но ни один из них не работает

//FAZ LOGIN:
await page.click('#login'),

await page.waitForNavigation({waitUntil: "domcontentloaded"});

//await page.click('div[title="Lista de Tarefas"]'); //Error: No node found for selector: div[title="Lista de Tarefas"]

const seletor = 'div[title="Lista de Chamados"]';
const botao = await page.$(seletor);
console.log(botao); //null
botao.click();

const botao = await page.evaluate( () => {
    let b = document.querySelector('div[title="Lista de Chamados"]');
    console.log('in>>> ' + b); // b and b[0] are NULL
});

Answer 1

Кажется, вы щелкаете по элементу еще до того, как он загружен правильно.Давайте использовать функцию waitFor для ожидания элемента, даже прежде чем мы попытаемся что-либо сделать.Также просто чтобы быть уверенным, нам нужно дождаться загрузки всей страницы, а не только dom.

// wait for navigation and click
await Promise.all(
  page.click("#login"),

  // wait till the browsers spinner stops spinning
  page.waitForNavigation({ waitUntil: "networkidle0" })
);
const selector = `div[title="Lista de Chamados"]`;

// wait for the selector to appear (maybe due to ajax etc)
await page.waitFor(selector);
await page.$(seletor);