Node+puppeteer学习笔记（六）-- 点击页面的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和解释

不知道小伙伴们有没有看懂这个例子呢？反正我看的时候是一脸懵逼，哈哈，难道是我太太太菜了！然而经过我的思考和理解，最后终于搞懂了原理，下面是我自己修改之后的脚本：
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());//打印出弹框的类型，是alert、confirm、prompt哪种
   console.log(dialog.defaultValue());//打印出默认的值只有prompt弹框才有
   await page.waitFor(2000);//特意加两秒等可以看到弹框出现后取消
   await dialog.dismiss();
   // await dialog.accept('demo');accept函数也是可以的呢，可以向prompt弹框输入文字
 });
 await page.waitFor(3000);
 await page.evaluate(() => alert('hello'));//打开一个alert弹框
 await page.waitFor(3000);
 await page.evaluate(() => confirm('一个小demo'));//打开一个confirm弹框
 await page.waitFor(3000);
 await page.evaluate(() => prompt('你今年多大了？','输入年龄'));//打开一个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());//打印出弹框的类型，是alert、confirm、prompt哪种
    console.log(dialog.defaultValue());//打印出默认的值只有prompt弹框才有
    await dialog.dismiss();
    // await dialog.accept('demo');
  });

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

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

好啦这篇文章就写完啦，又攻克一个难题，但是还有更多需要学习，加油吧！