网页表单自动化

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

快速开始

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

// Basic form automation
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com/form');

// Upload compressed images
await page.locator('input[type="file"]').setInputFiles('/path/to/image.webp');

// Type text (triggers events properly)
await page.locator('textarea').pressSequentially('Your text', { delay: 30 });

// Submit form
await page.locator('button[type="submit"]').click({ force: true });

会话管理

使用浏览器会话数据

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

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

// Set cookies before navigating
for (const cookie of sessionData.cookies || []) {
  await context.addCookies([cookie]);
}

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

文件上传最佳实践

图片压缩

为确保可靠性，上传前始终压缩图片：

# Convert to webp for best compression
convert input.png output.webp

# Or resize if needed
convert input.png -resize 1024x1024 output.webp

大小对比：

• 原始 PNG：约 4MB
• 压缩后 PNG：约 1MB
• WebP 格式：约 30-50KB（体积减少 99%）

上传顺序

// 1. Find file inputs
const fileInputs = await page.locator('input[type="file"]').all();

// 2. Upload with waiting time
await fileInputs[0].setInputFiles('/path/to/start.webp');
await page.waitForTimeout(3000); // Wait for upload to process

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

文本输入最佳实践

使用 pressSequentially，而非 fill()

❌不要使用 fill()- 不会触发输入事件：

await textInput.fill('text'); // May not activate submit button

✅使用 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();
  
  // Load session if provided
  if (fs.existsSync(sessionFile)) {
    const session = JSON.parse(fs.readFileSync(sessionFile, 'utf8'));
    // Set cookies, localStorage...
  }
  
  // Navigate
  await page.goto('https://example.com/video', { 
    waitUntil: 'domcontentloaded' 
  });
  await page.waitForTimeout(3000);
  
  // Upload images (webp compressed)
  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);
  
  // Select options
  await page.click('text=Seedance 2.0 Fast');
  await page.click('text=15s');
  
  // Type prompt
  const textarea = page.locator('textarea').first();
  await textarea.pressSequentially(prompt, { delay: 30 });
  await page.waitForTimeout(2000);
  
  // Submit
  await page.locator('button[class*="submit"]').click({ force: true });
  
  // Wait and screenshot
  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参数
• 检查按钮选择器是否正确
• 确认所有必填字段均已填写