puppeteer 教程（6） ----入门例子（模拟登陆51cto）

红太狼 2024-04-17 16:56 63阅读 0赞

## 目标 ##

模拟登陆51cto

#### 主要学习以下知识点 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page.$x</td> 
   <td>此方法解析指定的XPath表达式。</td> 
  </tr> 
  <tr> 
   <td>page.waitForNavigation</td> 
   <td>此方法找到一个匹配 selector 选择器的元素，如果需要会把此元素滚动到可视，然后通过 page.mouse 点击它。 如果选择器没有匹配任何元素，此方法将会报错。</td> 
  </tr> 
 </tbody> 
</table>

详细api 可参考  
https://blog.csdn.net/mengxiangxingdong/article/details/99237204

### 开始 ###

本文章代码均在 上传在  
https://gitee.com/hugo110/puppeteer-demo  
效果图  
![在这里插入图片描述][20190828232215937.gif]

### 1.代码 ###

/*
    
    模拟登陆 51  cto
    https://home.51cto.com/index
     */
    
    
    const puppeteer = require('puppeteer'); //引入puppeteer库
    const xpathUtil = require('./util/XpathUtil');
    (async () => {
        
        const browser = await puppeteer.launch({
            //启动浏览器
            headless: false,   //代码运行时打开浏览器方便观察
            // devtools:true   //打开f12界面
        });
        const page = await browser.newPage();  //打开浏览器的一个tab 页
        //networkidle2 - 只有2个网络连接时触发（至少500毫秒后）
        await page.goto('https://home.51cto.com/index', {
        timedout: 10 * 1000, waitUntil: 'networkidle2'});  //访问51cto 登陆页面
        //等待 账号密码登陆元素出现  並且點擊
        await  page.waitForXPath('//a[contains(string(),"账号密码登录")]', {
        timedout: 10 * 1000});
        await xpathUtil.$xClick(page, '//a[contains(string(),"账号密码登录")]');
        //等待账号密码显示
        await  page.waitForSelector('#loginform-username', {
        timedout: 10 * 1000});
        //输入账号密码
        await   page.type('#loginform-username', "你的账号")
        await   page.type('#loginform-password', "你的密码")
        //点击登录
        await page.click('.loginbtn');
        //等待网页跳转  networkidle0  不在有网络响应
        const response = await  page.waitForNavigation({
        timedout: 10 * 1000, waitUntil: 'networkidle0'});
        //输出响应的页面
        console.log(await response.text())
    
    
        // await browser.close();  //关闭浏览器
    })();

## 参考博客 ##

https://zhaoqize.github.io/puppeteer-api-zh\_CN/\#?product=Puppeteer&version=v1.19.0&show=api-pageevalselector-pagefunction-args-1

[20190828232215937.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ed805d1a140c47929a0911e8f51771d2.gif