处理页面弹框
    弹框主要分为三种类型：alertbox、confirmbox、promptbox。alterbox主要用于给用户显示一些提示信息，通常会带一个OK按钮，点击OK按钮即可关闭alterbox。confirmbox主要让用户输入确认或者取消信息，confirmbox通常会带OK和CANCEL按钮，点击OK或者CANCEL都可以关闭confirmbox。promptbox主要让用户输入一些信息，通常会带一个text输入框和OK、CANCEL按钮，点击OK或者CANCEL都可以关闭promptbox。

    如下图所示，当点击页面的populate按钮时，页面弹出了alertbox。
    image.png
    顽固派 弹出页
    image.png
    此时 如果不关闭上面的弹框，页面上其他element都不可点击。对于这类弹框，处理的机制是实时监听页面上是否显示了弹框，如果有即可关闭，防止其影响正常的自动化脚本运行。那么使用puppeteer框架时如何处理弹框呢？请看下面的案例。

    1. const puppeteer = require('puppeteer');
    2. (async () => {
    3.   const args = [
    4.     '--no-sandbox', // 沙盒模式
    5.     '--disable-setuid-sandbox', // uid沙盒
    6.     '--disable-infobars',
    7.     '--window-position=0,0',
    8.     '--ignore-certifcate-errors',
    9.     '--ignore-certifcate-errors-spki-list',
    10.     '--user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3312.0 Safari/537.36"',
    11.     '--disable-gpu', // GPU硬件加速
    12.     '--disable-dev-shm-usage', // 创建临时文件共享内存
    13.     '--no-first-run', // 没有设置首页。在启动的时候，就会打开一个空白页面。
    14.     '--no-zygote',
    15.     '--single-process' // 单进程运行
    16.   ];
    18.   const options = {
    19.     args,
    20.     headless: false,
    21.     ignoreHTTPSErrors: true,
    22.     slowMo: 250,
    23.     defaultViewport: { width: 1920, height: 1080 }
    24.   };
    26.   const browser = await puppeteer.launch(options);
    27.   const browserWSEndpoint = browser.wsEndpoint();
    28.   const page = await browser.newPage();
    30.   await page.on('dialog', async dialog => {
    31.     await page.waitForTimeout(2000);//延时2s后自动关闭弹窗
    32.     switch (dialog.type()) {
    33.       case 'alert':
    34.         await dialog.dismiss();
    35.         break;
    36.       case 'confirm':
    37.         await dialog.accept();
    38.         break;
    39.       case 'prompt':
    40.         await dialog.accept("type things");
    41.         break;
    42.       default :
    43.         throw "can't get dialog type"
    44.     }
    45.     //自动化脚本最前面通过page.on()添加对页面的监听操作，如果出现弹框，调用dialog.dismiss()方法关闭弹框
    46.     //dialog.dismiss()相当于点击弹框右上角的关闭按钮
    47.     //dialog.accept()相当于点击弹框的OK按钮，如果是prompt类型的弹框，调用dialog.accept('conent')模拟在prompt弹框中输入conent
    48.     //dialog.type()返回监听到的dialog类型，类型包含：alert，confirm，prompt和beforeunload
    49.   });
    50.   await page.goto('https://www.zhihu.com/question/302349728/answer/531536034');
    51.   //对于无法监听到的顽固弹窗。当然我们也可以简单粗暴的使用点击事件来干掉 page.click('.Button>.Zi--Close');
    52.   //await page.click('.Button>.Zi--Close')
    53.   //await page.click('#populate')
    54.   //await page.click('input[name="alert"]')
    55.   await page.waitForTimeout(2000);//延时2s后自动关闭弹窗
    56.   // 此时为了防止 element is not defined 错误我们应该监听此页面元素是否弹出
    57.   const searchPopout = await page.$(".Button>.Zi--Close");
    58.   if (searchPopout) await page.click('.Button>.Zi--Close');
    59.   // page.close();
    60.   // browser.close();
    61. })();
    1.   await page.on('dialog', async dialog => {
    2.     await page.waitForTimeout(2000);//延时2s后自动关闭弹窗
    3.     switch (dialog.type()) {
    4.       case 'alert':
    5.         await dialog.dismiss();
    6.         break;
    7.       case 'confirm':
    8.         await dialog.accept();
    9.         break;
    10.       case 'prompt':
    11.         await dialog.accept("type things");
    12.         break;
    13.       default :
    14.         throw "can't get dialog type"
    15.     }
    16.     //自动化脚本最前面通过page.on()添加对页面的监听操作，如果出现弹框，调用dialog.dismiss()方法关闭弹框
    17.     //dialog.dismiss()相当于点击弹框右上角的关闭按钮
    18.     //dialog.accept()相当于点击弹框的OK按钮，如果是prompt类型的弹框，调用dialog.accept('conent')模拟在prompt弹框中输入conent
    19.     //dialog.type()返回监听到的dialog类型，类型包含：alert，confirm，prompt和beforeunload
    20.   });