puppeteer实现自动注册(绕过滑块验证)

前置知识点

1. puppeteer的基本操作流程
2. 对dom节点的准确获取
3. 事件的处理

操作流程

1. 打开大麦网注册页面
2. 由于注册页面使用iframe，所以定位iframe
3. 找到输入框元素，输入信息
4. 滑块逻辑的处理
5. 提交

代码

const puppeteer = require('puppeteer');
(async () => {
    //创建一个Browser浏览器实例，并设置相关参数
    const broswer = await puppeteer.launch({
        headless: false, // 打开窗口
        args:['--window-size=1920, 1080'],
        ignoreDefaultArgs:'--enable-automation'} // 关闭提示
        )
    const page =  await broswer.newPage()
     /*打开大麦网注册页
14     waitUntil:代表什么时候才认为导航加载成功
           domcontentloaded：页面的 DOMContentLoaded
    15     networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束
    16     networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。
17     */
    await page.goto('https://passport.damai.cn/register', {waitUntil:'domcontentloaded'}) // 页面的 DOMContentLoaded 事件触发时
   // /找到页面所有的iframe并打印出iframe链接，frame.url()获取frame的url
    // await page.frames().map(frame => {
    //         console.log(frame.url())
    //          });
    // 找到要定位的iframe页面
    const frame = await page.frames().find(frame => frame.url().includes('https://ipassport.damai.cn/member'))
    // 在定位的iframe页面内操作(之前的所有操作，是在打开的page操作，现在统统变为iframe)

    // 在输入框输入信息： 1. 获取输入框 2. 输入信息
    const phone = await frame.waitForSelector('.select-mobile-input-component > span > input[type=text]')
    await phone.type('13111112222', { delay: 100 });

    const pwd = await frame.waitForSelector('#container > div > form > div > div:nth-child(2) > div > div.pwd-wrap > span > input')
    await pwd.type('z2Dw2a~W!',{ delay: 100 })
    const repwd = await frame.waitForSelector('#container > div > form > div > div:nth-child(3) > div > span > input')
   await repwd.type('z2Dw2a~W!',{ delay: 100 })
   // 获取滑块相关信息，利用鼠标事件，进行滑块移动
    const start = await frame.waitForSelector('.nc_iconfont.btn_slide')
    const startInfo = await start.boundingBox()
    const end = await frame.waitForSelector('.nc-lang-cnt')
    const endInfo = await end.boundingBox()
    // move: 从哪里开始 -》 目标元素(小滑块)的x 坐标，y坐标
    await page.mouse.move(startInfo.x, startInfo.y) 
    // 按下滑块
    await page.mouse.down()
    // 开始滑动，滑动到具体位置
    for (let i = 0; i < endInfo.width; i++) {
        await page.mouse.move(startInfo.x+i, endInfo.y)
    }
    // 滑动完毕，抬起鼠标
    await page.mouse.up()
    // 点击勾选框
    await frame.click('div.form-checkbox > label > input[type=checkbox]')
    // 点击确定按钮
    await frame.click('#container > div > form > div > div:nth-child(6) > div > button')

})()