背景
工作上有些视频学习任务，一天到晚要看视频学习；
关键还不能倍速，连播，非要手动点击下一个，非常苦恼。还时不时还跳一个弹窗出来，不回答就不继续播放，挂机都不行。
技术选型
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.jpg
直接复制就行了。。。
一些常用操作
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,
});
});
}
其他基本没啥了,跟着官网看文档就好了.