puppeteer學習筆記（四）--API問題解決--切換不一樣的窗口

今天解決的問題是切換窗口的問題，頁面點擊元素後，在本頁面還好，直接進行操做就行了，有時會打開一個新的頁面，句柄還停留在第一個頁面，直接操做會報錯，須要切換到新頁面進行操做，

下面上調試好的代碼：

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行之前就不用說了，打開一個瀏覽器進入掘進首頁，點擊文章，打開新的頁面

一、第12行我加了3秒的等待，由於點擊完文章後，後會當即執行腳本browser.pages()，而新的頁面有時還沒打開，就會獲取不到，因此加一個等待，等待新頁面徹底打開。 二、第13行中我使用索引的方法來獲取最新的頁面，由於返回的是一個列表，這裏有一個要注意,索引前面的腳本要加括號，否則會出錯

const page2 = ( await browser.pages() )[2];//獲得全部窗口使用列表索引獲得新的窗口
複製代碼

三、後邊就是正常的操做了，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個窗口的列表