无星的自动化之旅（一）——PlayWright

背景

工作上有些视频学习任务，一天到晚要看视频学习；

关键还不能倍速，连播，非要手动点击下一个，非常苦恼。还时不时还跳一个弹窗出来，不回答就不继续播放，挂机都不行。

技术选型

selenium，还用说吗？妥妥的大哥大

PlayWright，微软的新生儿

所以我选PlayWright

在Linux上安装edge

问题来了，为什么要装edge，chrome不香么？

但是有一个问题啊，通过chromedriver调起来的是chromium，chromium默认不支持MP4封装h264编码的视频,默认只支持google自家的webm封装的VP9编码视频。

这不是要命，我最主要的需求就是看视频。

所以我们选择edge

# 在这里看可以安装的https://packages.microsoft.com/yumrepos/edge/
sudo yum localinstall https://packages.microsoft.com/yumrepos/edge/microsoft-edge-stable-105.0.1343.27-1.x86_64.rpm
# 可以使用看是否安装成功
microsoft-edge --version

开启浏览器

const { chromium } = require('playwright');
const browser = await chromium.launch({
    // 开发的时候写false，部署的时候使用true
        headless: false,
        // 使用edge浏览器
        channel: 'msedge',
        // 默认开启控制台。不然无法自动播放视频
        devtools: true
});

通过XPath寻找dom

好多兄弟问，XPath怎么搞，好难算，好复杂

说实话兄弟，根本不用自己写啊。。。。

举个栗子：

直接复制就行了。。。

一些常用操作

1.聚焦input并输入

// 我这里使用id聚焦
page.fill('#id', '123456');

2.点击按钮

// 使用xpath
await page.click('xpath=//html/body/form/div[2]/div/div[1]/input[4]')
// 使用文字定位
await page.click('text=' + '登录')

3.等待某个dom节点渲染完成

// 例如我这里等待一张图片渲染完成后获取这个图片
const img0 = await page.waitForSelector('id=Img0');

4.获取所有可匹配成功的dom

// 在获取表格内所有列或者所有行时,尤为有效
const domlist = await page.$$('xpath=//*[@id="mian"]/form/div/table/tbody/tr/td/table[2]/tbody/tr/td/table[1]/tbody/tr/td/table/tbody/tr/td[1]/table/tbody/tr/td[2]/table[4]/tbody/tr/td[3]/span')

5.浏览器后退

await page.goBack()

6.拦截网络请求并替换结果

在网络请求发起的页面,使用以下这个函数

const forbidRequest = async (page) => {
    // 参数可以填请求地址或者正则表达式,例如:/aaa$/以aaa开头的请求
    page.route('参数', async route => {
        // Fetch original response.
        const response = await page.request.fetch(route.request());
        // Add a prefix to the title.
        let body = {}
        // 这里要注意,一定要转json字符串
        const result = JSON.stringify(body)
        route.fulfill({
          // Pass all fields from the response.
          response,
          // Override response body.
          body:result,
        });
      });
}

其他基本没啥了,跟着官网看文档就好了.