使用 Playwright + GitHub Actions 完成一些页面自动化任务的初步探索(上)
由于长期受剽窃和盗用的困扰很久之前就想过是否能采取一些措施来反抄袭和反剽窃。最近 51CTO 的官方剽窃真是恶心到我了详情参见我的上一篇文章《51CTO一个抄袭剽窃的流氓网站》最终我决定得行动起来了。先说一下整体思路由于是反抄袭和反剽窃我不能介绍地过于细致涉及到技术部分就是需要使用某类工具定期登录我的博客执行一些必要的操作我需要把这些自动化的操作写成脚本然后放到某种作业调度工具中定期执行。经过初步的筛选我选择了 Playwright GitHub Actions 的技术方案简单、轻量、完全第三方托管且无费用免额度已经可以支撑日常运行本文先简单介绍一下 MVP 的实现细节。1. 安装 Node.js首先去 https://nodejs.org/en 下载 node.js 的安装包并完成安装。这里就不赘述了。2. 创建工程目录找一个合适的位置创建一个空目录作为工程根目录这是我们取名为csdn-bot3. 初始化工程脚手架Playwright 官方提供有 Playwright 项目的脚手架使用命令可一键创建出一个 Playwright 项目命令如下npm init playwrightlatest默认生成的 Playwright 项目在工程根目录下有一个tests目录目录下还会自动生成一个example.spec.ts文件使用以下命令可以直接执行这个测试脚本npx playwright test但实际上我们不会使用这种单元测试风格的方式去执行我们的脚本尽管可以保留着自动生成的资源但为了使用项目简洁干净建议还是删除以下文件夹或文件:tests 目录playwright.config.ts4. 安装 tsx如果我们不想总是以单元测试的方式书写我们的脚本而是要编写并执行正式的脚本那需要提前安装一下 tsx它是 TypeScript 的一个运行时Runtime让你可以像运行 JavaScript 一样直接运行 .ts 文件而不用先手工编译。npm install -D tsx-D是指明要安装的属于开发工具不是运行时依赖。5. 添加独立脚本在工程目录下添加一个src文件夹然后添加一个简单的main.ts文件内容如下import{chromium}fromplaywright;asyncfunctionmain(){constbrowserawaitchromium.launch({headless:true});constpageawaitbrowser.newPage();// 打开登录页awaitpage.goto(https://passport.csdn.net/login?codeapplets);console.log(awaitpage.title());awaitbrowser.close();}main().catch(err{console.error(err);process.exit(1);});同时我们还要配置 GitHub Actions 的工作流工作流的描述文件在使用npm init playwrightlatest初始化项目时已经自动创建位置是.github\workflows\playwright.yml我们把它修改为如下内容name:csdn-boton:workflow_dispatch:jobs:run:runs-on:ubuntu-lateststeps:-uses:actions/checkoutv4-uses:actions/setup-nodev4with:node-version:24-run:npm ci-run:npx playwright install chromium-run:npm run start6. 修改配置为了配合脚本的执行我们需要对自动生成的tsconfig.json做几处改动在package.json中将scripts: {}改为scripts:{start:tsx src/main.ts}上述改动将允许我们使用npm run start来运行 main.ts在package.json中将type: commonjs改为type: module否则在 IDE 中会报TS1295: ECMAScript imports and exports cannot be written in a CommonJS file under ‘verbatimModuleSyntax’. Adjust the ‘type’ field in the nearest ‘package.json’ to make this file an ECMAScript module, or adjust your ‘verbatimModuleSyntax’, ‘module’, and ‘moduleResolution’ settings in TypeScript.在tsconfig.json中将types: []改为types: [node]否则在 IDE 中会报TS2591: Cannot find name ‘process’. Do you need to install type definitions for node? Try npm i --save-dev types/node and then add ‘node’ to the types field in your tsconfig.7. 运行项目在项目根目录下使用执行npm run start看到输出CSDN-专业IT技术社区-登录就表示项目的原型已经跑通了。然后把项目提交到 GitHub 上在项目主页的 tab 页中找到 Actions 标签页然后会看到我通过.github\workflows\playwright.yml定义的工作流名称是csdn-bot选中这个工作流点击Run按钮即可在 Job Run 页面中看以看作业的每一个执行步骤以及相关的内容输出这可以辅助我们了解工作流是否执行成功8. 关于登录的初步探索前面的都是较为基本的操作比较大的挑战是通过登录获得身份认证。通常有如下几种处理方式最直白的方案模拟用户登录操作输入用户名和密码进行登录。但对于有图片验证码的网站来说这种方法不可行使用 Playwright 以非无头方式headless: false打开一个浏览器手抖完成登录操作然后在 Playwright 脚本中保存整个浏览器状态一个 json 文件包含 cookie 等信息然后在正式的自动化脚本中先 load 这个 json 数据获得身份认证数据再完成其他页面操作。该方法被认为是一种较为稳妥的方案但是一些网站的风控系统能识别出浏览器是一种自动化的环境进而在第一步登录时就失败了CSDN 就是这类情况使用 Playwright 直接读取本地 Chrome 用户目录但同样的一些网站依然能识别出这种情形从而拒绝用户登录目前先探索到这里做一个简要的记录。后面根据需要看要不要再进一步研究。