夜雨聆风
AI 助手 + Playwright：打造你的第一个自动化办公机器人
从手动操作到全自动，让 AI 帮你完成重复性工作
一、为什么需要自动化办公？
作为一个"快乐的小朋友"，每天可能要处理大量重复性工作：
每天固定时间爬取数据 重复填写表单、提交报表 批量处理文件、整理资料 定时发送消息、推送通知
这些工作枯燥乏味，占用大量时间。自动化办公就是让电脑自动完成这些重复性任务，把时间留给更有创造性的工作。
二、核心工具介绍
Playwright 是什么？
Playwright 是微软开源的浏览器自动化工具，可以：
🤖 控制浏览器执行各种操作 📸 截图、生成 PDF 🎯 精准定位页面元素 🌐 支持多种浏览器（Chrome、Firefox、Safari）
类比理解：Playwright 就像给你的浏览器装了一个"超级遥控器"，你可以用代码精确控制浏览器的每一个动作。
三、环境准备
1. 安装 Node.js
访问 https://nodejs.org 下载并安装 LTS 版本。
验证安装：
node -v npm -v 2. 创建项目
# 创建项目目录 mkdir office-robot cd office-robot # 初始化项目 npm init -y # 安装 Playwright npm install playwright # 安装浏览器驱动 npx playwright install chromium 3. 目录结构
office-robot/ ├── scripts/ │ ├── login.js # 自动登录脚本 │ ├── fill-form.js # 自动填表脚本 │ └── scraper.js # 数据爬取脚本 ├── config/ │ └── accounts.js # 账号配置文件 ├── output/ │ └── reports/ # 输出目录 └── run.js # 主程序入口 四、实战案例：自动登录系统
需求分析
假设我们每天需要登录公司内部系统，手动操作需要： - 打开浏览器 - 输入网址 - 输入用户名密码 - 点击登录
自动化后：一条命令搞定
代码实现
1. 配置文件（config/accounts.js）
module.exports = { // 公司系统配置 companySystem: { url: 'https://company.example.com/login', username: 'your_username', password: 'your_password', // 选择器配置 selectors: { username: '#username', password: '#password', submitBtn: 'button[type="submit"]' } }, // 登录后要访问的页面 afterLogin: [ 'https://company.example.com/dashboard', 'https://company.example.com/reports' ] }; 2. 登录脚本（scripts/login.js）
const { chromium } = require('playwright'); const config = require('../config/accounts'); async function autoLogin() { // 启动浏览器 const browser = await chromium.launch({ headless: false, // 显示浏览器窗口，方便调试 slowMo: 100 // 减慢操作速度，方便观察 }); const context = await browser.newContext({ viewport: { width: 1280, height: 720 } }); const page = await context.newPage(); try { console.log('📍 1. 打开登录页面...'); await page.goto(config.companySystem.url); await page.waitForLoadState('networkidle'); console.log('📍 2. 输入用户名...'); await page.fill(config.companySystem.selectors.username, config.companySystem.username); console.log('📍 3. 输入密码...'); await page.fill(config.companySystem.selectors.password, config.companySystem.password); console.log('📍 4. 点击登录按钮...'); await page.click(config.companySystem.selectors.submitBtn); // 等待登录完成 await page.waitForURL('**/dashboard**', { timeout: 10000 }); console.log('✅ 登录成功！'); // 访问其他页面 for (const url of config.afterLogin) { console.log(`📍 访问页面: ${url}`); await page.goto(url); await page.waitForLoadState('networkidle'); // 截图保存 const pageName = url.split('/').pop(); await page.screenshot({ path: `../output/${pageName}-${Date.now()}.png` }); } } catch (error) { console.error('❌ 登录失败:', error.message); // 失败时截图，便于排查问题 await page.screenshot({ path: '../output/error-login.png' }); } finally { await browser.close(); } } // 运行登录脚本 autoLogin(); 3. 主程序入口（run.js）
const path = require('path'); // 加载配置 const config = require('./config/accounts'); // 根据命令行参数选择要执行的任务 const task = process.argv[2] || 'login'; console.log(`🚀 开始执行任务: ${task}`); console.log('=' .repeat(50)); switch(task) { case 'login': require('./scripts/login'); break; case 'scraper': require('./scripts/scraper'); break; default: console.log('未知任务类型'); } 五、使用方法
基础用法
# 自动登录 node run.js login # 执行爬虫 node run.js scraper 定时执行（Windows 任务计划程序）
# 创建定时任务：每天早上 8:30 自动登录 schtasks /create /tn "Daily Login" /tr "node run.js login" /sc daily /st 08:30 日志记录
添加日志功能，方便排查问题：
const fs = require('fs'); const logStream = fs.createWriteStream('../output/robot.log', { flags: 'a' }); function log(message) { const timestamp = new Date().toISOString(); const logLine = `[${timestamp}] ${message}\n`; logStream.write(logLine); console.log(message); } 六、进阶技巧
1. 处理弹窗和验证码
// 监听对话框（alert、confirm、prompt） page.on('dialog', async dialog => { console.log(`检测到对话框: ${dialog.message()}`); await dialog.accept(); // 或 dialog.dismiss() }); // 处理 iframe const frame = page.frame({ url: '**/iframe**' }); 2. 智能等待
// 等待元素出现 await page.waitForSelector('#target-element', { timeout: 5000 }); // 等待网络请求完成 await page.waitForResponse(response => { return response.url().includes('api/data') && response.status() === 200; }); // 等待函数执行结果 await page.waitForFunction(() => { return document.querySelector('.status').innerText === '完成'; }); 3. 数据提取
// 提取表格数据 const tableData = await page.evaluate(() => { const rows = document.querySelectorAll('table tr'); return Array.from(rows).map(row => { const cols = row.querySelectorAll('td'); return Array.from(cols).map(col => col.innerText); }); }); // 保存为 JSON const fs = require('fs'); fs.writeFileSync('../output/data.json', JSON.stringify(tableData, null, 2)); 七、注意事项
⚠️ 安全提醒
- 不要提交真实密码到代码仓库
使用环境变量或加密配置文件 添加
.gitignore忽略敏感文件遵守网站使用条款
不要过度频繁访问 尊重 robots.txt 协议
保护个人隐私
定期清理浏览器缓存和 cookies 不要在公共电脑上运行
🔧 调试技巧
使用 headless 模式加快速度
javascript const browser = await chromium.launch({ headless: true });开启调试模式
javascript page.on('console', msg => console.log('Browser log:', msg.text())); page.on('pageerror', err => console.log('Browser error:', err));生成跟踪文件
bash PLAYWRIGHT_TRACE_DIR=./traces npx playwright test
八、总结
通过本文，你学会了：
✅ 使用 Playwright 控制浏览器 ✅ 实现自动登录功能 ✅ 提取网页数据并保存 ✅ 添加日志记录和错误处理 ✅ 设置定时任务实现自动化
下一步可以尝试： - 批量处理 Excel 文件 - 自动发送邮件 - 爬取公开数据 - 生成自动化报告
把重复性的工作交给程序，把时间留给自己去做更有趣的事情！
有问题欢迎留言讨论，记得关注"一个快乐的小朋友"，一起探索技术的乐趣！
© 2026 711 实验室 版权所有
本文内容由 AI 生成，仅供测试和研究使用
请勿模仿或用于商业用途
AI 技术测试内容
