NodeJS / Puppeteer - 帮助点击元素

Question

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

我需要点击第三个div，类为“menu-lateral-contraido-container”（lista_chamados），div为=“/ 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);