Form Automation with Puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/multi-step-form');
  
  // Step 1: Personal Information
  console.log('Filling Step 1: Personal Information');
  
  await page.type('#first-name', 'John');
  await page.type('#last-name', 'Doe');
  await page.type('#email', 'john.doe@example.com');
  await page.type('#phone', '+1234567890');
  
  // Validate step 1
  const step1Valid = await page.$eval('#step1-validation', el => 
    el.classList.contains('valid')
  );
  
  if (!step1Valid) {
    console.log('Step 1 validation failed');
    return;
  }
  
  // Go to step 2
  await page.click('#next-step-1');
  await page.waitForSelector('#step-2.active');
  
  // Step 2: Address Information
  console.log('Filling Step 2: Address Information');
  
  await page.type('#street-address', '123 Main St');
  await page.type('#city', 'New York');
  await page.select('#state', 'NY');
  await page.type('#zip-code', '10001');
  await page.select('#country', 'USA');
  
  // Go to step 3
  await page.click('#next-step-2');
  await page.waitForSelector('#step-3.active');
  
  // Step 3: Payment Information
  console.log('Filling Step 3: Payment Information');
  
  await page.type('#card-number', '4111111111111111');
  await page.type('#expiry-date', '12/25');
  await page.type('#cvv', '123');
  await page.type('#cardholder-name', 'John Doe');
  
  // Review step
  await page.click('#review-step');
  await page.waitForSelector('#review-section');
  
  // Verify information
  const reviewData = await page.evaluate(() => {
    return {
      name: document.querySelector('#review-name').textContent,
      email: document.querySelector('#review-email').textContent,
      address: document.querySelector('#review-address').textContent,
      card: document.querySelector('#review-card').textContent
    };
  });
  
  console.log('Review data:', reviewData);
  
  // Submit form
  await page.click('#final-submit');
  
  // Wait for confirmation
  await page.waitForSelector('#confirmation-message');
  
  const confirmationText = await page.$eval('#confirmation-message', 
    el => el.textContent
  );
  
  console.log('Form submitted successfully:', confirmationText);
  
  await browser.close();
})();

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/dynamic-form');
  
  // Handle conditional fields
  await page.select('#user-type', 'business');
  
  // Wait for business fields to appear
  await page.waitForSelector('#business-fields', { visible: true });
  
  await page.type('#company-name', 'Tech Corp');
  await page.type('#tax-id', '12-3456789');
  
  // Add dynamic repeating fields
  const addSkill = async (skillName, level) => {
    await page.click('#add-skill-button');
    
    // Wait for new skill field to appear
    await page.waitForSelector('.skill-item:last-child .skill-name');
    
    const skillItems = await page.$$('.skill-item');
    const lastSkillItem = skillItems[skillItems.length - 1];
    
    await lastSkillItem.$eval('.skill-name', (el, name) => {
      el.value = name;
    }, skillName);
    
    await lastSkillItem.$eval('.skill-level', (el, lvl) => {
      el.value = lvl;
    }, level);
  };
  
  // Add multiple skills
  await addSkill('JavaScript', 'Expert');
  await addSkill('Python', 'Intermediate');
  await addSkill('React', 'Advanced');
  
  // Handle dependent dropdowns
  await page.select('#category', 'technology');
  
  // Wait for subcategory options to load
  await page.waitForFunction(() => {
    const subcategory = document.querySelector('#subcategory');
    return subcategory && subcategory.options.length > 1;
  });
  
  await page.select('#subcategory', 'web-development');
  
  // Wait for specific technology options
  await page.waitForFunction(() => {
    const technology = document.querySelector('#technology');
    return technology && technology.options.length > 1;
  });
  
  await page.select('#technology', 'frontend');
  
  // Handle auto-complete fields
  await page.type('#location', 'New Y');
  await page.waitForSelector('#location-suggestions');
  await page.click('#location-suggestions li:first-child');
  
  // Handle calculated fields
  await page.type('#quantity', '5');
  await page.type('#price', '10.50');
  
  // Wait for total to be calculated
  await page.waitForFunction(() => {
    const total = document.querySelector('#total');
    return total && total.value === '52.50';
  });
  
  console.log('Dynamic form fields handled successfully');
  
  await browser.close();
})();

const puppeteer = require('puppeteer');

class FormTester {
  constructor(page) {
    this.page = page;
    this.testResults = [];
  }
  
  async testField(selector, testCases) {
    const results = [];
    
    for (const testCase of testCases) {
      console.log(`Testing ${selector} with: ${testCase.input}`);
      
      try {
        // Clear field
        await this.page.click(selector, { clickCount: 3 });
        await this.page.type(selector, testCase.input);
        
        // Trigger validation
        await this.page.keyboard.press('Tab');
        await this.page.waitForTimeout(500);
        
        // Check validation result
        const hasError = await this.page.$(testCase.errorSelector) !== null;
        const errorMessage = hasError ? 
          await this.page.$eval(testCase.errorSelector, el => el.textContent) : '';
        
        const result = {
          input: testCase.input,
          expectedValid: testCase.expectedValid,
          actualValid: !hasError,
          errorMessage: errorMessage,
          passed: testCase.expectedValid === !hasError
        };
        
        results.push(result);
        
        if (!result.passed) {
          console.log(`❌ Test failed for ${selector}: ${JSON.stringify(result)}`);
        } else {
          console.log(`✅ Test passed for ${selector}`);
        }
        
      } catch (error) {
        results.push({
          input: testCase.input,
          error: error.message,
          passed: false
        });
      }
    }
    
    return results;
  }
  
  async testForm(formTests) {
    const allResults = {};
    
    for (const [fieldSelector, testCases] of Object.entries(formTests)) {
      allResults[fieldSelector] = await this.testField(fieldSelector, testCases);
    }
    
    return allResults;
  }
  
  generateReport(results) {
    let totalTests = 0;
    let passedTests = 0;
    
    console.log('\n=== FORM TESTING REPORT ===');
    
    for (const [field, fieldResults] of Object.entries(results)) {
      console.log(`\nField: ${field}`);
      
      fieldResults.forEach(result => {
        totalTests++;
        if (result.passed) passedTests++;
        
        const status = result.passed ? '✅' : '❌';
        console.log(`  ${status} Input: "${result.input}" | Expected: ${result.expectedValid ? 'Valid' : 'Invalid'} | Actual: ${result.actualValid ? 'Valid' : 'Invalid'}`);
        
        if (result.error) {
          console.log(`    Error: ${result.error}`);
        }
      });
    }
    
    console.log(`\n=== SUMMARY ===`);
    console.log(`Total Tests: ${totalTests}`);
    console.log(`Passed: ${passedTests}`);
    console.log(`Failed: ${totalTests - passedTests}`);
    console.log(`Success Rate: ${((passedTests / totalTests) * 100).toFixed(2)}%`);
  }
}

// Usage
(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/form');
  
  const tester = new FormTester(page);
  
  const formTests = {
    '#email': [
      { input: 'valid@example.com', expectedValid: true, errorSelector: '#email-error' },
      { input: 'invalid-email', expectedValid: false, errorSelector: '#email-error' },
      { input: '', expectedValid: false, errorSelector: '#email-error' }
    ],
    '#password': [
      { input: 'StrongPass123!', expectedValid: true, errorSelector: '#password-error' },
      { input: '123', expectedValid: false, errorSelector: '#password-error' },
      { input: 'weakpass', expectedValid: false, errorSelector: '#password-error' }
    ],
    '#phone': [
      { input: '+1234567890', expectedValid: true, errorSelector: '#phone-error' },
      { input: '123', expectedValid: false, errorSelector: '#phone-error' },
      { input: 'abc', expectedValid: false, errorSelector: '#phone-error' }
    ]
  };
  
  const results = await tester.testForm(formTests);
  tester.generateReport(results);
  
  await browser.close();
})();