Puppeteer - 单击 div 不起作用 [英] Puppeteer - Click div not working

问题描述

我可以登录，但我需要点击一个没有 id 的 div，我不知道该怎么做

这是 html 元素.Onclick 事件(devtool 属性)在有路由的 div 上(class route-redirect-box)

如何点击此链接进入listachamados"页面?

页面html:

<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 class="menu-lateral-item-contraido-icon"><i class="ellevo-icons">lista_chamado</i></div><i class="ellevo-icons">lista_chamado</i>

我的代码:

const puppeteer = require('puppeteer');让刮=异步()=>{const browser = await puppeteer.launch({ headless: false });const page = await browser.newPage();等待 page.goto('https://notreal.br/', {waitUntil: 'load'});console.log(page.url());const SELETOR_USUARIO = '#usuario';const SELETOR_SENHA = '#senha';const usuario = '用户名';const senha = '密码';等待 page.type(SELETOR_USUARIO, usuario);等待 page.type(SELETOR_SENHA, senha);//等待页面.waitForNavigation();console.log(page.url());等待 Promise.all([page.click('#login'),page.waitForNavigation({ waitUntil: 'networkidle0' })//page.click('.menu-lateral-item-contraido-container cor-tema-topo-fundo'),]);等待 Permise.all([page.waitFor('加载'),等待 page.evaluate(() => {let lista = document.getElementsByClassName('div.route-redirect-box')lista.click()//page.click(lista)})]);//browser.close();};刮().然后((值)=> {控制台日志(值)；});

解决方案

您拼错了 Permise.all.它应该是 Promise.all.

但您可能不需要使用 Promise.all 因为您可以简单地await 你调用的 Puppeteer 方法.

此外，由于 onclick 事件附加到 .route-redirect-box 元素，你可以使用 page.click() 或 page.evaluate() 点击元素:

await page.click('.route-redirect-box');等待 page.evaluate(() => {document.querySelector('.route-redirect-box').click();});

或者，由于您似乎知道要重定向到的页面的 URL，您可以使用另一个 page.goto() 手动导航:

await page.goto('https://example.com/main/listachamado/');

另一种替代解决方案是，如果您知道将要执行的函数 onclick，你可以在 page.evaluate():

await page.evaluate(() => {function_to_be_executed_onclick();});

I'm able to login, but i need to click on a div that has no id and i cant figure out how to do it

This is html element. Onclick event (devtool properties) is on the div that has the route (class route-redirect-box)

How can i click this link to go to "listachamados" page?

Page html:

<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-item-contraido-icon"><i class="ellevo-icons">lista_chamado</i></div>
<i class="ellevo-icons">lista_chamado</i>

My code:

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://notreal.br/', {waitUntil: 'load'});
    console.log(page.url());

    const SELETOR_USUARIO = '#usuario';
    const SELETOR_SENHA = '#senha';
    const usuario = 'username';
    const senha = 'password';


    await page.type(SELETOR_USUARIO, usuario);
    await page.type(SELETOR_SENHA, senha);
    //await page.waitForNavigation();


    console.log(page.url());
    await Promise.all([
        page.click('#login'),
        page.waitForNavigation({ waitUntil: 'networkidle0' })

        //page.click('.menu-lateral-item-contraido-container cor-tema-topo-fundo'),

    ]);

    await Permise.all([
      page.waitFor('load'),
      await page.evaluate(() => {
          let lista = document.getElementsByClassName('div.route-redirect-box')
          lista.click()
          //page.click(lista)
      })
    ]);

    //browser.close();
};

scrape().then((value) => {
    console.log(value); 
});

解决方案

You misspelled Permise.all. It should be Promise.all.

But you might not need to use Promise.all because you can just simply await the Puppeteer methods that you called.

Additionally, since the onclick event is attached to the .route-redirect-box element, you can use page.click() or page.evaluate() to click the element:

await page.click('.route-redirect-box');

await page.evaluate(() => {
  document.querySelector('.route-redirect-box').click();
});

Or, since you seem to know the URL of the page you are trying to redirect to, you could just use another page.goto() to navigate manually:

await page.goto('https://example.com/main/listachamado/');

Another alternative solution would be, if you know the function that is going to be executed onclick, you can just execute the function itself within page.evaluate():

await page.evaluate(() => {
  function_to_be_executed_onclick();
});

这篇关于Puppeteer - 单击 div 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！