Web Automation Practice

Practice site with all HTML form elements, Shadow DOM, and iframes for testing Puppeteer, Selenium, and web scraping bots

Form Progress

Total Fields

Filled

Empty

Basic Text Inputs

Text Input (ID: text-input)

Email Input (ID: email-input)

Password Input (ID: password-input)

Telephone Input (ID: tel-input)

URL Input (ID: url-input)

Search Input (ID: search-input)

Number Inputs

Number Input (ID: number-input)

Range Input (ID: range-input) - Value: 50

Date and Time Inputs

Date Input (ID: date-input)

Time Input (ID: time-input)

DateTime-Local (ID: datetime-input)

Month Input (ID: month-input)

Week Input (ID: week-input)

Selection Controls

Checkboxes

Checkbox Option 1 (ID: checkbox-1)Checkbox Option 2 (ID: checkbox-2)Checkbox Option 3 (ID: checkbox-3)

Radio Buttons (Name: radioGroup)

Radio Option 1 (ID: radio-1)Radio Option 2 (ID: radio-2)Radio Option 3 (ID: radio-3)

Single Select (ID: select-single)

Multiple Select (ID: select-multiple)

Hold Ctrl/Cmd to select multiple

Text AreaTextarea (ID: textarea-input)

Special Inputs

Color Picker (ID: color-input)

#3b82f6

File Upload (ID: file-input)

Shadow DOM Element

Access using: document.querySelector('#shadow-host').shadowRoot.querySelector('#shadow-input')

iFrame with Form Elements

Access iframe content using: document.querySelector('#test-iframe').contentDocument

Puppeteer Testing Guide

Regular Inputs:

await page.type('#text-input', 'value');
await page.click('#checkbox-1');
await page.select('#select-single', 'option2');

Shadow DOM:

const shadowHost = await page.$('#shadow-host');
const shadowRoot = await shadowHost.evaluateHandle(el => el.shadowRoot);
const shadowInput = await shadowRoot.$('#shadow-input');
await shadowInput.type('value');

iFrame:

const frame = page.frame('testIframe');
await frame.type('#iframe-text', 'value');
await frame.click('#iframe-checkbox');

About the Form Tester

A comprehensive form testing tool designed for developers working with browser automation, Puppeteer, Selenium, and other testing frameworks. This tool includes every possible HTML form element, Shadow DOM components, and iframe interactions for thorough testing scenarios.

Features:

All standard HTML input types
Selection controls (checkboxes, radio buttons, dropdowns)
Shadow DOM elements for advanced testing
Embedded iframe with form elements
File upload simulation
Custom form validation
Real-time form data capture
Form submission testing

Use Cases:

Puppeteer bot testing and development
Selenium automation script testing
Form scraping and data extraction
Browser automation debugging
Web scraping script validation
Shadow DOM interaction testing
Cross-browser testing scenarios
Input validation testing

Included Elements:

Text inputs (text, email, password, tel, url)
Number and range inputs
Date and time inputs
Checkboxes and radio buttons
Select dropdowns (single and multiple)
Textarea fields
File upload input
Color picker
Shadow DOM custom elements
Iframe embedded forms