Playwright简单试用

距上篇关于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');

await client.send('Page.enable');

let url = 'https://images2018.cnblogs.com/blog/12132/201805/12132-20180520201839221-1840995562.png' ;
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();