【PUPPETEER】初探之原生frame切换(四)
一、知识点
- page.frames()
- 使用frame.url() 获取framed的url
- x.getAttribute('x') 获取元素内值
二、实例
问:什么是iframe?
答:iframe 元素会创建包含另外一个文档的内联框架(即行内框架),我们经常会遇到登入页面的时候,这个时候我们直接定位到iframe里的元素是无效的,相当于我们要切换到相应的iframe,我们才能找到对应的元素。
1.比如登入安居客登入页面,看到这个页面,我们如果不考虑iframe的话,直接定位到手机号码元素,会不会成功呢,我们试一下以下代码,过一段时间直接抛出error,说明是行不通的,那么我们就要分析一下页面元素。
const puppeteer = require('puppeteer');
(async () => {
const brower = await puppeteer.launch({
executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
headless:false
});
const page = await brower.newPage();
await page.goto('https://suzhou.anjuke.com/');
await page.click('#login_l a:nth-child(1)'); // 点击登入
await page.waitFor('#phoneIpt'); // 等待元素
const input = await page.$('#phoneIpt'); // 获取登入框元素
await input.type('122222');// 输入
await page.close();
})().catch(error =>{console.log('error')});
2. 我们分析页面元素,发现登入页面有iframe,但是再网上翻,但是到底有几个iframe呢,我们看不出来,怎么办?那么我们就用代码计算一下。
const frames = await page.frames(); // 获取当前页面的frame
console.log(frames.length); // 打印
3. 根据上面的代码我们可以得到长度是2说明不止一个iframe,那么我们找到我们需要切换的iframe 呢?我们再分析一下上面的元素截图,发现我们需要的iframe 有个url属性,指向唯一的url,所以我们思考用遍历frames 获取每个url 再与我们切换的iframe做对比,不就取到了么,代码演示
const url = await page.$eval('#iframeLoginIfm',el => el.getAttribute('src')); // 通过iframe id 元素,获取src的值
const frames = await page.frames(); // 获取当前页面的所有的 frame
// 遍历frame,当frame的url 包含再目标url中,则是当前我们需要的frame
for (let i of frames) {
if (url.includes(i.url())) {
var frame = i ;
}
}
await frame.waitFor('#phoneIpt');
await frame.type('#phoneIpt','122222');
完整代码 =>
const puppeteer = require('puppeteer');
(async () => {
const brower = await puppeteer.launch({
executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
headless:false
});
const page = await brower.newPage();
await page.goto('https://suzhou.anjuke.com/');
await page.click('#login_l a:nth-child(1)');
const url = await page.$eval('#iframeLoginIfm',el => el.getAttribute('src'));
const frames = await page.frames();
for (let i of frames) {
if (url.includes(i.url())) {
var frame = i ;
}
}
await frame.waitFor('#phoneIpt');
await frame.type('#phoneIpt','122222');
//await brower.close();
})().catch(error =>{console.log('error')});
【PUPPETEER】初探之原生frame切换(四)的更多相关文章
- 初探云原生应用管理(二): 为什么你必须尽快转向 Helm v3
系列介绍:这个系列是介绍如何用云原生技术来构建.测试.部署.和管理应用的内容专辑.做这个系列的初衷是为了推广云原生应用管理的最佳实践,以及传播开源标准和知识.在这个系列文章的开篇初探云原生应用管理(一 ...
- ionic-native-transitions调用原生页面切换实现ionic路由切换
废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- 初探云原生应用管理(一): Helm 与 App Hub
系列介绍:初探云原生应用管理系列是介绍如何用云原生技术来构建.测试.部署.和管理应用的内容专辑.做这个系列的初衷是为了推广云原生应用管理的最佳实践,以及传播开源标准和知识.通过这个系列,希望帮 ...
- 原生tab切换
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- selenium+java多层级frame切换的问题
关于selenium多层iframe切换,及iframe没有id和name属性的情况下进行切换的问题.(如下图:) 问题: 1. 在切入到frame:left中后,直接切换其他同级和上级frame报错 ...
- Selenium(六):frame切换、窗口切换
1. 切换到frame index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 初探云原生应用管理之:聊聊 Tekton 项目
[编者的话]“人间四月芳菲尽,山寺桃花始盛开.” 越来越多专门给 Kubernetes 做应用发布的工具开始缤纷呈现,帮助大家管理和发布不断增多的 Kubernetes 应用.在做技术选型的时候,我们 ...
- eclipse中英文切换--四种方式
若转载,请注明出处 http://www.cnblogs.com/last_hunter/p/5627009.html 谢谢! ------------------------------------ ...
随机推荐
- 团体程序设计天梯赛-练习集 L1-007 念数字
- - ->博主推荐,学生党.程序员必备,点击查看- - - >>>>> 热门文章推荐 以下50道算法编程题访问量较大,包含常用语法,数据结构,解题思路等等,作为C ...
- Qlik Sense学习笔记之插件开发
date: 2019-05-06 13:18:45 updated: 2019-08-09 15:18:45 Qlik Sense学习笔记之插件开发 1.开发前的基础工作 1.1 新建插件 dev-h ...
- day03基本数据类型
运算符补充 今天补充一些简单知识: #!/usr/bin/env python # -*- coding:utf-8 -*- value = "我是中国人" # 判断'中国'是 ...
- 数据结构(C++)——顺序表
顺序表和链表的比较 1.存取方式 顺序表可以随机访问,而链表只能从表头顺序查找.(因此经常查找顺序表某一个元素时,顺序表更适合) 2.逻辑结构与物理结构 顺序表中,逻辑上相邻的元素,其物理存储位置也相 ...
- 【DeepLearning】AlexNet
在前文中,我们介绍了LeNet的相关细节,它是由两个卷积层.两个池化层以及两个全链接层组成.卷积都是5*5的模板,stride =1,池化为MAX.整体来说它有三大特点:局部感受野,权值共享和池化.2 ...
- 常用数据结构-集合(set)
集合(set)是python中最容易被忽视的.使用集合的主要好处在于速度快. 集合的一些特性: 集合元素不能重复 不支持索引访问集合中的元素 集合使用散列之后,可以在O(1)时间内访问元素 支持一些常 ...
- python重要第三方库pandas加载数据(详解)
Pandas数据加载 关注公众号"轻松学编程"了解更多. pandas提供了一些用于将表格型数据读取为DataFrame对象的函数,其中read_csv和read_table这两个 ...
- Python爬虫练习(多线程,进程,协程抓取网页)
详情点我跳转 关注公众号"轻松学编程"了解更多. 一.多线程抓取网页 流程:a.设置种子url b.获取区域列表 c.循环区域列表 d.创建线程获取页面数据 e.启动线程 impo ...
- 《Clojure编程》笔记 第4章 多线程和并发
目录 背景简述 第4章 多线程和并发 4.0 我的问题 4.1 术语 4.1.1 一个必须要先确定的思考基础 4.2 计算在时间和空间内的转换 4.2.1 delay 4.2.2 future 4.2 ...
- 妙用 Intellij IDEA 创建临时文件,Git 跟踪不到的那种
| 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...