NodeJS/Puppeteer -帮助单击元素

Question

我知道这不是我解决这个问题的第一个问题，但我真的被卡住了

我需要单击类为“menu- at contraido container”(lista_chamados)的第三个div，div to="/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>

由于它们都具有相同的类，并且没有id，因此我尝试按标题单击

//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);