puppeteer学习笔记（六）--API问题解决--点击页面的alert、confirm、prompt三种JavaScript弹框
- 官方英文版API入口（如果你英文好的话）：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
- ***API入口（网上有很多版本，有兴趣可以多去搜一些）：https://yq.aliyun.com/articles/607102.
首先看一下官方的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 dialog.dismiss();
// await dialog.accept('demo');accept函数也是可以的呢，可以向prompt弹框输入文字
});
await page.evaluate(() => alert('hello'));//打开一个alert弹框
await page.evaluate(() => confirm('一个小demo'));//打开一个confirm弹框
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.evaluate(() => alert('hello'));//打开一个alert弹框
await page.evaluate(() => confirm('一个小demo'));//打开一个confirm弹框
await page.evaluate(() => prompt('你今年多大了？','输入年龄'));//打开一个prompt弹框