puppeteer学习笔记（三）--API问题解决--切换frame和iframe框

终于环境搭建好啦，可以开始快乐的玩耍了，开始记录我遇到的问题了

官方英文版API入口：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口：https://yq.aliyun.com/articles/607102.

具体API我就不解释，在前边第一篇中已经给出学习的目录了，可去看下基础的，API实在是太多了，我这边只列出我自己遇到的有问题的API

切换frame和iframe框

1、先给出具体代码：一个登录163邮箱的例子

看一下效果图

代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  await page.goto('https://mail.163.com/');
  await page.setViewport({width:1000,height:800});
  //切换iframe框代码
  await page.waitFor('#loginDiv>iframe');//等待我的iframe出现
  const frame = await page.frames()[3];//通过索引得到我的iframe
  await frame.waitFor('.j-inputtext.dlemail');//等待用户名输入框出现
  await frame.type('.j-inputtext.dlemail','12345');//输入账户
  await frame.waitFor('.dlpwd');//等待密码框出现
  await frame.type('.dlpwd','12345');//输入密码
  //等待3秒后退出浏览器
  await page.waitFor(3000);
  await browser.close();
})();

当时学习这个可真是苦恼我了，查了好多资料，看了好多教程都没有解决切换的问题，都只是说使用page.frames()得到所有的frame框返回一个列表来使用，但是并没有什么例子，看的我云里来雾里去的，幸好我有UI自动化的功底，有一些思路，于是自己摸索出来了,话不多说、上分析吧：

1.首先在第9行我加了一个智能等待，等待包含输入账户和密码的iframe框加载出来，有时候网络加载慢这个iframe框还没出来，但是其它的iframe已经加载出来了，而page.frames()语句照样会执行，这样就会找不到我要的iframe了，所以加一下等待
2. 第10行代码我用的是索引的方法直接得到我的iframe，因为没有name的属性不能找到，如果有name的属性可以这样写：

const frame = await page.frames().find(f => f.name() === 'name');

3.第11行我加了一个智能等待，等输入框出现，这个我不知道为什么?如果我不加的话就会报错，找不到输入框，如果加上的话就没问题，如果谁知道怎么回事可以给我说下。
4.后面的12，13，14行都一样了就是正常的等待和输入就好啦。4.后面的12，13，14行都一样了就是正常的等待和输入就好啦。