NodeJS / Puppeteer-帮助单击元素

时间:2018-10-17 19:59:39

标签: node.js puppeteer

我知道这不是我的第一个问题,但是我真的很困

我需要在类别为“ menu-lateral-contraido-container”(lista_chamados)的第三个div上单击,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
});

1 个答案:

答案 0 :(得分:0)

似乎您甚至在正确加载元素之前也要单击它。让我们甚至在尝试执行任何操作之前,使用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);