Web Form Automation

Web Form Automation

Automate web form interactions reliably using Playwright with best practices for session management, file uploads, and form submission.

Quick Start

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 });

Session Management

Using Browser Session Data

When user provides a JSON file with session data:

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);

File Upload Best Practices

Image Compression

Always compress images before upload for reliability:

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

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

Size comparison:

• Original PNG: ~4MB
• Compressed PNG: ~1MB
• WebP: ~30-50KB (99% smaller)

Upload Sequence

// 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);

Text Input Best Practices

Use pressSequentially, not fill()

❌ Don't use fill() - doesn't trigger input events:

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

✅ Use pressSequentially() - simulates real typing:

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

Trigger Events Manually (if needed)

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

Button Clicking

Force Click When Disabled

If button appears disabled but should be clickable:

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

Check Button State

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

Complete Example: Video Generation Form

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

The scripts/ directory contains reusable automation scripts:

• webp-compress.sh - Convert images to webp format
• form-submit.js - Generic form submission template

Troubleshooting

Button stays gray/disabled

• Wait longer after file upload (3+ seconds)
• Ensure text input triggers events (use pressSequentially)
• Check if images are still uploading

Upload times out

• Compress images to webp format first
• Reduce image dimensions if very large

Form doesn't submit

• Use force: true for click
• Check button selector is correct
• Verify all required fields are filled