playwright 连接browserless 服务

playwright是与puppeteer类似的包装，但是playwright 实现的周边更加丰富，也是一个很不错的工具，值得使用下，以下是关于
playwright 连接browserless服务的简单说明

环境准备

• docker-compose

version: "3"

services:

  nginx:

    image: nginx:alpine

    volumes:

      - ./index.html:/usr/share/nginx/html/index.html

    ports:

      - "80:80"

  browser:

    image: ghcr.io/browserless/chromium:latest

    environment:

      - CONCURRENT=40

      - QUEUED=20

      - CORS=true

      - CORS_MAX_AGE=300

      - DATA_DIR=/tmp/my-profile

      - TOKEN=6R0W53R135510

    volumes:

      - ./my-profile:/tmp/my-profile

    ports:

      - "3000:3000"

访问

需要先安装playwright 包yarn add playwright

• dalong.js

const {chromium} = require("playwright");

 

(async () => {

    let browser = await chromium.connectOverCDP("ws://localhost:3000?token=6R0W53R135510");

    console.log("Page loaded");

    // 此处设置useragent  

    let bContext = await browser.newContext({

        userAgent:"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"

    });

 

    let page = await bContext.newPage();

 

    await page.goto("http://nginx", { waitUntil: "networkidle" });

 

    let result = await page.evaluate(()=>{

        let contents = document.querySelector(".logo");

        return contents.innerHTML;

 

    });

    console.log(result);

    await browser.close();

})();

• 效果

说明

尽管playwright 也是对于无头浏览器的处理，但是playwright 提供了不少其他能力，比如测试，android 模拟器支持，整体使用上与puppeteer类似，但是也有不少的差异，比如useragent 以及cookie 的设置都是在browsercontext 中的，与puppeteer 还是有很大的差异的
playwright 提供了不少客户端的支持，而且属于企业维护的，还是值得学习下的，playwright 官方提供了一个迁移手册值得看看

参考资料

https://playwright.dev/
https://playwright.dev/docs/api/class-browsercontext#browser-context-add-cookies
https://docs.browserless.io/Libraries/puppeteer-library
https://docs.browserless.io/Libraries/playwright