一、知识点

  1. page.frames()
  2. 使用frame.url() 获取framed的url
  3. 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切换(四)的更多相关文章

  1. 初探云原生应用管理(二): 为什么你必须尽快转向 Helm v3

    系列介绍:这个系列是介绍如何用云原生技术来构建.测试.部署.和管理应用的内容专辑.做这个系列的初衷是为了推广云原生应用管理的最佳实践,以及传播开源标准和知识.在这个系列文章的开篇初探云原生应用管理(一 ...

  2. ionic-native-transitions调用原生页面切换实现ionic路由切换

    废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...

  3. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  4. 初探云原生应用管理(一): Helm 与 App Hub

      ​ 系列介绍:初探云原生应用管理系列是介绍如何用云原生技术来构建.测试.部署.和管理应用的内容专辑.做这个系列的初衷是为了推广云原生应用管理的最佳实践,以及传播开源标准和知识.通过这个系列,希望帮 ...

  5. 原生tab切换

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. selenium+java多层级frame切换的问题

    关于selenium多层iframe切换,及iframe没有id和name属性的情况下进行切换的问题.(如下图:) 问题: 1. 在切入到frame:left中后,直接切换其他同级和上级frame报错 ...

  7. Selenium(六):frame切换、窗口切换

    1. 切换到frame index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  8. 初探云原生应用管理之:聊聊 Tekton 项目

    [编者的话]“人间四月芳菲尽,山寺桃花始盛开.” 越来越多专门给 Kubernetes 做应用发布的工具开始缤纷呈现,帮助大家管理和发布不断增多的 Kubernetes 应用.在做技术选型的时候,我们 ...

  9. eclipse中英文切换--四种方式

    若转载,请注明出处 http://www.cnblogs.com/last_hunter/p/5627009.html 谢谢! ------------------------------------ ...

随机推荐

  1. 团体程序设计天梯赛-练习集 L1-007 念数字

    - - ->博主推荐,学生党.程序员必备,点击查看- - - >>>>> 热门文章推荐 以下50道算法编程题访问量较大,包含常用语法,数据结构,解题思路等等,作为C ...

  2. Qlik Sense学习笔记之插件开发

    date: 2019-05-06 13:18:45 updated: 2019-08-09 15:18:45 Qlik Sense学习笔记之插件开发 1.开发前的基础工作 1.1 新建插件 dev-h ...

  3. day03基本数据类型

    运算符补充 ​ 今天补充一些简单知识: #!/usr/bin/env python # -*- coding:utf-8 -*- value = "我是中国人" # 判断'中国'是 ...

  4. 数据结构(C++)——顺序表

    顺序表和链表的比较 1.存取方式 顺序表可以随机访问,而链表只能从表头顺序查找.(因此经常查找顺序表某一个元素时,顺序表更适合) 2.逻辑结构与物理结构 顺序表中,逻辑上相邻的元素,其物理存储位置也相 ...

  5. 【DeepLearning】AlexNet

    在前文中,我们介绍了LeNet的相关细节,它是由两个卷积层.两个池化层以及两个全链接层组成.卷积都是5*5的模板,stride =1,池化为MAX.整体来说它有三大特点:局部感受野,权值共享和池化.2 ...

  6. 常用数据结构-集合(set)

    集合(set)是python中最容易被忽视的.使用集合的主要好处在于速度快. 集合的一些特性: 集合元素不能重复 不支持索引访问集合中的元素 集合使用散列之后,可以在O(1)时间内访问元素 支持一些常 ...

  7. python重要第三方库pandas加载数据(详解)

    Pandas数据加载 关注公众号"轻松学编程"了解更多. pandas提供了一些用于将表格型数据读取为DataFrame对象的函数,其中read_csv和read_table这两个 ...

  8. Python爬虫练习(多线程,进程,协程抓取网页)

    详情点我跳转 关注公众号"轻松学编程"了解更多. 一.多线程抓取网页 流程:a.设置种子url b.获取区域列表 c.循环区域列表 d.创建线程获取页面数据 e.启动线程 impo ...

  9. 《Clojure编程》笔记 第4章 多线程和并发

    目录 背景简述 第4章 多线程和并发 4.0 我的问题 4.1 术语 4.1.1 一个必须要先确定的思考基础 4.2 计算在时间和空间内的转换 4.2.1 delay 4.2.2 future 4.2 ...

  10. 妙用 Intellij IDEA 创建临时文件,Git 跟踪不到的那种

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...