无星的自动化之旅(一)——PlayWright

·  阅读 41

背景

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

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

技术选型

selenium,还用说吗?妥妥的大哥大

PlayWright,微软的新生儿

所以我选PlayWright

在Linux上安装edge

问题来了,为什么要装edgechrome不香么?

但是有一个问题啊,通过chromedriver调起来的是chromiumchromium默认不支持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,
        });
      });
}
复制代码

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改