puppeteer学习笔记(六)--API问题解决--点击页面的alert、confirm、prompt三种JavaScript弹框 -

莲君子的博客

官方英文版API入口:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口:https://yq.aliyun.com/articles/607102.
学习笔记入口:https://blog.csdn.net/qupan1993/article/details/85371556.

在这里插入图片描述在这里插入图片描述
不知道小伙伴们有没有看懂这个例子呢?反正我看的时候是一脸懵逼,哈哈,难道是我太太太菜了!然而经过我的思考和理解,最后终于搞懂了原理,下面是我自己修改之后的脚本:
demo.js

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch({headless:false});
 const page = await browser.newPage();
 
 await page.on('dialog', async dialog => {
   console.log(dialog.message());
   console.log(dialog.type());
   console.log(dialog.defaultValue());
   await page.waitFor(2000);
   await dialog.dismiss();
   
 });
 await page.waitFor(3000);
 await page.evaluate(() => alert('hello'));
 await page.waitFor(3000);
 await page.evaluate(() => confirm('一个小demo'));
 await page.waitFor(3000);
 await page.evaluate(() => prompt('你今年多大了?','输入年龄'));

 await page.waitFor(3000);
 await browser.close();
})();

下面是我运行成功后打印出的信息:
在这里插入图片描述

1、首先从第7行我使用了函数page.on()创建了一个点击弹框的函数,语法格式我也是参照官方Demo来写的,然后我又添加了打印出类型、默认值得信息,这个默认值只有prompt弹框才有哦,因为得到的是输入框的值。点击函数是dismiss(),其实accept()函数也是可以的呢,不过accept有一个入参,就是要输入的文字,必须是字符,只针对prompt弹框,里面加入文字对其他的两个弹框没影响的,

最后:这个函数在page创建好之后写入,针对后续所有弹框,只要有的,自动会点击取消或者确认,但仅限当前页面,如果打开一个新页面之后,必须重新设置一次。

  await page.on('dialog', async dialog => {
    console.log(dialog.message());
    console.log(dialog.type());
    console.log(dialog.defaultValue());
    await dialog.dismiss();
    
  });

2、第14-16行代码分别是创建了一个alert、confirm、prompt弹框,使用的是page.evaluate()函数,上一篇文章我们用这个函数移动过网页的滚动条,不知道大家还记不记得?不记得的自行去目录自己去看下,这个函数可以执行自定义的一些JS脚本,功能挺强大的,后续我如果学到的话,写一篇出来

await page.waitFor(3000);
await page.evaluate(() => alert('hello'));
await page.waitFor(3000);
await page.evaluate(() => confirm('一个小demo'));
await page.waitFor(3000);
await page.evaluate(() => prompt('你今年多大了?','输入年龄'));

本文由 黑白世界4648 第一时间收藏到GET,原文来自 → blog.csdn.net

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入