使用 playwright 在 Nodejs 环境下自动控制浏览器！

Playwright 是微软开发的开源 Nodejs 库，对基于Chromium，Firefox 和 WebKit 的浏览器自动化控制实现了相同的 API。

Playwright 和 Puppeteer 功能基本一致，但是 Puppeteer 只支持基于 Chromium 的浏览器

开始

初始化项目以及安装依赖

// 初始当前项目路径，此处应使用你自己定义的路径
mkdir playwright && cd playwright

// 按照自定义配置完善仓库信息
npm init

// 安装时注意
// 在默认安装时会同时安装浏览器驱动
// 在网络不好的情况下，需要用户自己更换 npm 源
npm i -D playwright

示例

打开浏览器进入百度并截图

// 此处使用 chrome 来进行相关代码操作
const { chromium } = require('playwright');

const main = async () => {
    const browser = await chromium.launch()

    const page = await browser.newPage();
	
    // 进入百度的网页
    await page.goto('https://www.baidu.com')
    
    // path 为相对路径下的文件，保存的文件对应目录为 playwright/image.png
    page.screenshot({ path: 'image.png' })

    browser.close()
}

main()

执行代码

node index.js

此时会发现当前目录下已经新生成了 image.png 文件

模拟移动设备进入百度页面并进行截图

在实际使用中，不仅仅只有 pc 端，还有手机端页面。Playwright 也提供了相关了驱动直接设置浏览器打开方式。还内置了常用的手机 DPI 设置

我们可以直接查看所有内置的驱动定义，下面我统一都使用预设的 iPhone 11 来驱动

// 调整 playwright/index.js 代码
const { chromium, devices } = require('playwright');

const main = async () => {
    const browser = await chromium.launch()

    const phoneD = devices['iPhone 11']
    const context = await browser.newContext({ ...phoneD })

    const page = await context.newPage();

    await page.goto('https://www.baidu.com')
    await page.screenshot({ path: 'image.png' })

    await page.close()
    browser.close()
}

main()

获取页面上的元素

const { chromium, devices } = require('playwright');

const main = async () => {
    const browser = await chromium.launch()

    const phoneD = devices['iPhone 11']
    const context = await browser.newContext({ ...phoneD })

    const page = await context.newPage();

    await page.goto('https://www.baidu.com')
    await page.screenshot({ path: 'image.png' })

    // 等待 2s 加载
    await page.waitForTimeout(2000)

    const logo = await page.$('#logo')

    await logo.screenshot({ path: 'logo.png' })

    await page.close()
    browser.close()
}

main()

在浏览器进入页面之后，在此处等待 2s 图片加载。Playwright 提供了 $(单节点) $$(节点集合)$$$(大量节点) 三个页面节点选择器，分别对应选择的数量。其中参数为 css 的文档选择器。此处我直接通过 logo 节点的 id 获取到 dom 并进行截图保存到 logo.png，新的截图如下图。

获取页面内容

Playwright 可以直接获取节点属性值，也就是我们要访问的数据本身。此处我们来获取 LOGO 的图片地址。

const { chromium, devices } = require('playwright');

const main = async () => {
    const browser = await chromium.launch()

    const phoneD = devices['iPhone 11']
    const context = await browser.newContext({ ...phoneD })

    const page = await context.newPage();

    await page.goto('https://www.baidu.com')
    await page.screenshot({ path: 'image.png' })

    // 等待 2s 加载
    await page.waitForTimeout(2000)

    const logoImg = await page.$('#logo > a > img')

    const src = await logoImg.evaluate(n => n.src)
    console.log(src)

    await page.close()
    browser.close()
}

main()

执行完成之后 Logo 的地址已经在控制台上输出出来。

更多

自动执行过程可见

Playwright 默认使用 ‘无头’ 模式运行，这个时候对开发者来说不能检测到运行过程。可以在启动时添加配置显示浏览器界面。

const browser = await chromium.launch({ headless: false })

现在我们就能看到浏览器运行的界面啦！

最后

就我个人使用来看，Playwright 当前完成度已经非常高，社区也很活跃。但是还是存在一些不能解决的问题，例如不支持 IE11、无法直接和现有项目直接对接等问题。

！！在此仅使用百度页面来进行演示操作