距上篇關於playwright文章過去有一年多了，主要是因爲加上早期的playwright並不是很成熟，缺少我最常用到的直接通過CDP（chrome dev protocol）來連接的這種場景的支持。加上我用它也只是作爲寫蜘蛛程序玩下，今天在再看了下playwright後，發現現在playwright已經完善了不少，不僅支持通過cdp的方式來連接了，c#的版本也更加強大了，寫個文章簡單的記錄一下。
Node版本
安裝@playwright/test庫
首先需要安裝@playwright/test這個Npm庫，需要注意的是：默認情況下，playwright庫會下載好幾個瀏覽器，造成速度非常慢。我們可以通過設置PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD爲1來跳過這個過程。
$env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
yarn add @playwright/test
常規啓動
const browser = await chromium.launch(
{
executablePath: `C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe`,
headless: false,
})
const page = await browser.newPage();
await page.goto('https://www.baidu.com');使用CDP協議連接到打開的瀏覽器
const browser = await chromium.connectOverCDP('http://127.0.0.1:9222/');
let ctx = browser.contexts()[0];
let page = await ctx.newPage();
await page.goto("https://www.cnblogs.com/TianFang/")
文件下載
這裏是用之前用Puppeteer的方式圖片下載的示例，利用CDP接口來下載文件。Puppeteer裏面CDP還是一個私有接口，playwright直接官方支持了，值得點贊。
const client = await ctx.newCDPSession(page);
let resTree = await client.send('Page.getResourceTree');
let url = 'https://images2018.cnblogs.com/blog/12132/201805/12132-20180520201839221-1840995562.png';
await client.send('Page.enable');
const { content, base64Encoded } = await client.send(
'Page.getResourceContent',
{ frameId: resTree.frameTree.frame.id, url },
);
C#版本
安裝Microsoft.Playwright庫
首先我們需要安裝Microsoft.Playwright這個Nuget庫，爲了避免下載瀏覽器，一樣要設置PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD爲1
基礎示例
基礎示例如下，和node的版本非常類似，C#的版本用起來還是非常輸入的。
var playwright = await Playwright.CreateAsync(); var browser = await playwright.Chromium.ConnectOverCDPAsync("http://127.0.0.1:9222/"); var ctx = browser.Contexts[0]; var page = await ctx.NewPageAsync();
文件下載
C#的庫在一些高級功能相比node的版本還是缺少一些，如還沒有封裝DevProtocol的api，不能像前面那樣通過CDP的接口下載文件了，不過我摸索了一下，可以通過IBrowserContext.APIRequest對象發送http請求實現文件下載。
var rsp = await ctx.APIRequest.GetAsync(url); var content = await rsp.BodyAsync();