pupeteer实现自动登录功能

xiehhy

已于 2023-05-14 19:19:51 修改

阅读量754

点赞数 2

文章标签： javascript 前端

于 2023-05-14 16:12:17 首次发布

本文链接：https://blog.csdn.net/xiehhy/article/details/130669864

版权

文章介绍了如何利用Puppeteer库进行前端自动化测试，特别是自动登录的功能。通过提供安装Puppeteer、编写登录脚本的步骤，展示了输入用户名、密码并提交表单的过程，以及处理可能的登录失败情况。

摘要由CSDN通过智能技术生成

最近学习了一点puppeteer前端自动测试功能，以下为使用其实现自动登录的代码

安装

npm install puppeteer-core

完整代码

const puppeteer = require('puppeteer'); 
async login(){
        const browser = await puppeteer.launch({
        headless: false, // 自动打开浏览器，为true则不会打开
        // slowMo:100, //放慢速度，方便观察
        })
        const page =  await browser.newPage()
                
            
        try{
        await page.goto('网址', {waitUntil:'domcontentloaded'}) // 页面的 DOMContentLoaded 事件触发时
            
        // 输入用户名和密码
        await page.type("#username",'用户名', {   
            delay:100
        }) //#username 是输入用户名的输入框的select选择器，与css选择方式一致，下方密码输入一致
        await page.type("#password",'密码', {
            delay:100    //键盘按下和释放间隔的时间，单位为毫秒
        })
            
        // 提交表单
        await Promise.all([
            page.click('#btnSubmit'),   //#btnSubmit 登录按钮的id
            page.waitForNavigation()  //如果点击事件发生跳转，会有一个独立的promise对象需要等待（等待页面跳转）
        ]);
        console.log("登录成功")
            
        }catch (error) {
            console.error('登录失败');  //此处可以写登录失败后要进行的操作
        }
        await browser.close();
    }

参考网址：https://puppeteer.bootcss.com/