AI 助手 + Playwright:打造你的第一个自动化办公...

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 文件 - 自动发送邮件 - 爬取公开数据 - 生成自动化报告

把重复性的工作交给程序，把时间留给自己去做更有趣的事情！

有问题欢迎留言讨论，记得关注"一个快乐的小朋友"，一起探索技术的乐趣！

本文内容由 AI 生成，仅供测试和研究使用

请勿模仿或用于商业用途

AI 技术测试内容