Puppeteer系列
1、Puppeteer笔记(一):Puppeteer简介
2、Puppeteer笔记(二):Puppeteer安装及实例Demo
3、Puppeteer笔记(三):Puppeteer获取元素及元素属性
4、Puppeteer笔记(四):Puppeteer模拟键盘
5、Puppeteer笔记(五):Puppeteer文件上传
6、Puppeteer笔记(六):Puppeteer切换frame操作
7、Puppeteer笔记(七):Puppeteer切换浏览器TAB页
8、Puppeteer笔记(八):Puppeteer执行自定义Javascript方法
一、puppeteer切换iframe操作
1、page.frames() 加载到页面中的所有iframe标签
2、frame.url() 返回frame框架的url
二、上手实例Demo
功能测试:打开安居客,可看到登录页是一个iframe嵌入的页面,如何定位进行登录。
先以我们平常的思维来看,打开一个页面就直接定位,尝试一下不在iframe,是否可以定位成功。代码如下:
1 const puppeteer = require('puppeteer'); 2 //puppeteer切换iframe进行安居客登录操作 3 async function anjuke() { 4 //创建一个Browser浏览器实例,并设置相关参数 5 const browser = await puppeteer.launch({ 6 headless: false, 7 defaultViewport: null, 8 args: ['--start-maximized'], 9 ignoreDefaultArgs: ['--enable-automation'] 10 }); 11 //创建一个Page实例 12 const page = await browser.newPage(); 13 /*打开安居客首页 14 waitUntil:代表什么时候才认为导航加载成功 15 networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束 16 networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。 17 */ 18 await page.goto('https://login.anjuke.com/login/form', { 19 waitUntil: 'networkidle2' 20 }); 21 //不在具体iframe中,直接定位元素 22 const phone = await page.$('#phoneIpt'); 23 phone.type('123456'); 24 await page.waitFor(3000); 25 await browser.close(); 26 } 27 anjuke();
运行以上代码,我们可以发现,终端有报错。可看出不能直接操作iframe中的元素。
那我们来看看如何切换frame进行页面元素的相关操作。代码如下:
1 const puppeteer = require('puppeteer'); 2 //puppeteer切换iframe进行安居客登录操作 3 async function anjuke() { 4 //创建一个Browser浏览器实例,并设置相关参数 5 const browser = await puppeteer.launch({ 6 headless: false, 7 defaultViewport: null, 8 args: ['--start-maximized'], 9 ignoreDefaultArgs: ['--enable-automation'] 10 }); 11 //创建一个Page实例 12 const page = await browser.newPage(); 13 /*打开安居客首页 14 waitUntil:代表什么时候才认为导航加载成功 15 networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束 16 networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。 17 */ 18 await page.goto('https://login.anjuke.com/login/form', { 19 waitUntil: 'networkidle2' 20 }); 21 //找到页面所有的iframe并打印出iframe链接,frame.url()获取frame的url 22 await page.frames().map(frame => { 23 console.log(frame.url()) 24 }); 25 const targetFrameUrl = 'https://login.anjuke.com/login/iframeform'; 26 //找到要定位的iframe页面 27 const frame = await page.frames().find(frame => url().includes(targetFrameUrl)); 28 //在定位的iframe页面内操作 29 const phone = await frame.waitForSelector('#phoneIpt'); 30 phone.type('123456'); 31 await page.waitFor(3000); 32 await browser.close(); 33 } 34 anjuke();