Node+puppeteer学习笔记（四）-- 切换不同的窗口

官方英文版API入口：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口：https://yq.aliyun.com/articles/607102.
学习笔记入口：https://blog.csdn.net/qupan1993/article/details/85371556.

今天解决的问题是切换窗口的问题，页面点击元素后，在本页面还好，直接进行操作就好了，有时会打开一个新的页面，句柄还停留在第一个页面，直接操作会报错，需要切换到新页面进行操作，

下面上调试好的代码：

const puppeteer = require('puppeteer');

(async () => {
	const browser = await puppeteer.launch({headless:false});
	const page = await browser.newPage();
	//打开掘进首页，点击第一个文章链接
	await page.goto('https://juejin.im/');
	await page.setViewport({width:1280,height:800});
	await page.waitFor('#juejin > div.view-container > main > div > div.feed.welcome__feed > ul > li:nth-child(1) > div > div > a > div > div > div.info-row.title-row > a');
	await page.tap('#juejin > div.view-container > main > div > div.feed.welcome__feed > ul > li:nth-child(1) > div > div > a > div > div > div.info-row.title-row > a');
	//跳转到第二个窗口输入文字
	await page.waitFor(3000);//等待3秒，等待新窗口打开
	const page2 = ( await browser.pages() )[2];//得到所有窗口使用列表索引得到新的窗口
	await page2.setViewport({width:1280,height:800});
	await page2.waitFor('.search-input');
	await page2.type('.search-input','succeed');//在新窗口中输入文字
	const title = await page2.title();//得到新窗口的标题
	console.log(title);//打印新窗口的标题
})();

解析：第10行以前就不用说了，打开一个浏览器进入掘进首页，点击文章，打开新的页面

1、第12行我加了3秒的等待，因为点击完文章后，后会立即执行脚本browser.pages()，而新的页面有时还没打开，就会获取不到，所以加一个等待，等待新页面完全打开。
2、第13行中我使用索引的方法来获取最新的页面，因为返回的是一个列表，这里有一个要注意,索引前面的脚本要加括号，不然会出错

const page2 = ( await browser.pages() )[2];//得到所有窗口使用列表索引得到新的窗口

3、后边就是正常的操作了，page2就是新的页面，page就是旧的页面可以直接进行操作

PS：这里留意个注意事项，如果大家有遇到的可以看看
我在做web网页UI自动化时候也会遇到要切换窗口，我当时是得到所有的句柄使用索引进行切换的。

但是注意啦：有时候会遇到一个问题，就是窗口的句柄顺序会经常不一样！（在puppeteer中暂时还没遇到这种情况）

举个例子：同一个脚本，得到句柄列表顺序，第一次得到的句柄是[1,2,3]，但是第二次运行得到的句柄列表是[1,3,2]，第三次得到的句柄是[2,1,3]，不知道大家有没有明白，句柄并不会按照打开的顺序来依次排序，所以使用索引就会有时成功有时失败，

我这边写一下我当时解决的思路：
环境是：Python + robotframework
首先：得到只有一个窗口的列表x=[1]，在得到有两个窗口的列表y=[1,2]，在得到有三个窗口的列表z=[2,3,1]，在Python中进行处理：把列表转换成元祖，进行相减，在转换成列表返回
脚本如下：

list(set(y)-set(x)[0]

图示如下：
要切换到第3个窗口：用3个的窗口列表减去2个窗口的列表
要切换到第2个窗口：用2个的窗口列表减去1个窗口的列表