网页表单自动化

使用 Playwright 可靠地自动化网页表单交互，并遵循会话管理、文件上传和表单提交的最佳实践。

快速开始

const { chromium } = require('playwright');

// 基础表单自动化
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com/form');

// 上传压缩图像
await page.locator('input[type="file"]').setInputFiles('/path/to/image.webp');

// 输入文本（正确触发事件）
await page.locator('textarea').pressSequentially('Your text', { delay: 30 });

// 提交表单
await page.locator('button[type="submit"]').click({ force: true });

会话管理

使用浏览器会话数据

当用户提供包含会话数据的 JSON 文件时：

const sessionData = JSON.parse(fs.readFileSync('session.json', 'utf8'));

// 在导航前设置 Cookie
for (const cookie of sessionData.cookies || []) {
  await context.addCookies([cookie]);
}

// 设置 localStorage / sessionStorage
await page.evaluate((data) => {
  for (const [k, v] of Object.entries(data.localStorage || {})) {
    localStorage.setItem(k, v);
  }
}, sessionData);

文件上传最佳实践

图像压缩

为确保可靠性，上传前务必压缩图像：

# 转换为 WebP 格式以获得最佳压缩效果
convert input.png output.webp

# 或按需调整尺寸
convert input.png -resize 1024x1024 output.webp

尺寸对比：

• 原始 PNG：约 4MB
• 压缩后 PNG：约 1MB
• WebP：约 30–50KB（体积减小 99%）

上传顺序

// 1. 查找文件输入控件
const fileInputs = await page.locator('input[type="file"]').all();

// 2. 逐个上传并等待处理完成
await fileInputs[0].setInputFiles('/path/to/start.webp');
await page.waitForTimeout(3000); // 等待上传完成

await fileInputs[1].setInputFiles('/path/to/end.webp');
await page.waitForTimeout(3000);

文本输入最佳实践

使用 pressSequentially，而非 fill()

❌ 不要使用 fill() —— 不会触发 input/change 等事件：

await textInput.fill('text'); // 可能无法激活提交按钮

✅ 使用 pressSequentially() —— 模拟真实键盘输入：

await textInput.pressSequentially('text', { delay: 30 });

必要时手动触发事件

await page.evaluate(() => {
  const el = document.querySelector('textarea');
  el.dispatchEvent(new Event('input', { bubbles: true }));
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

按钮点击

在按钮禁用时强制点击

若按钮显示为禁用状态但实际应可点击：

await button.click({ force: true });

检查按钮状态

const isEnabled = await button.isEnabled();
const isVisible = await button.isVisible();

完整示例：视频生成表单

const { chromium } = require('playwright');
const fs = require('fs');

async function submitVideoForm(sessionFile, startImage, endImage, prompt) {
  const browser = await chromium.launch({ 
    headless: true, 
    args: ['--no-sandbox'] 
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // 若提供会话文件，则加载会话
  if (fs.existsSync(sessionFile)) {
    const session = JSON.parse(fs.readFileSync(sessionFile, 'utf8'));
    // 设置 Cookie、localStorage 等...
  }
  
  // 导航至目标页面
  await page.goto('https://example.com/video', { 
    waitUntil: 'domcontentloaded' 
  });
  await page.waitForTimeout(3000);
  
  // 上传图像（已压缩为 WebP 格式）
  const inputs = await page.locator('input[type="file"]').all();
  await inputs[0].setInputFiles(startImage);
  await page.waitForTimeout(3000);
  await inputs[1].setInputFiles(endImage);
  await page.waitForTimeout(3000);
  
  // 选择选项
  await page.click('text=Seedance 2.0 Fast');
  await page.click('text=15s');
  
  // 输入提示词
  const textarea = page.locator('textarea').first();
  await textarea.pressSequentially(prompt, { delay: 30 });
  await page.waitForTimeout(2000);
  
  // 提交表单
  await page.locator('button[class*="submit"]').click({ force: true });
  
  // 等待并截图
  await page.waitForTimeout(5000);
  await page.screenshot({ path: 'result.png' });
  
  await browser.close();
}

脚本

scripts/ 目录包含可复用的自动化脚本：

• webp-compress.sh —— 将图像批量转换为 WebP 格式
• form-submit.js —— 通用表单提交模板

故障排查

按钮保持灰色/禁用状态

• 文件上传后等待更长时间（建议 ≥3 秒）
• 确保文本输入正确触发事件（使用 pressSequentially）
• 确认图像是否仍在上传中

上传超时

• 优先将图像压缩为 WebP 格式
• 若图像尺寸过大，请先缩小分辨率

表单无法提交

• 点击时添加 { force: true } 参数
• 验证按钮选择器是否准确
• 确认所有必填字段均已填写