Selenium WebDriver
Day 13: Form Automation & Element Interactions
Complete form automation using CSS selectors with practical registration form examples and element interaction techniques
Today's Learning Objectives
Form Automation
- • Complete registration form automation
- • Text input and textarea handling
- • Radio button and checkbox selection
- • Multiple dropdown interactions
Element Interactions
- • sendKeys() for text input
- • click() for buttons and selections
- • Select class for dropdowns
- • Real-world automation scenarios
Element Locator Syntax Review
WebElement Syntax for All Locators
// All 8 locator types syntax
WebElement wb1 = driver.findElement(By.id("id value"));WebElement wb2 = driver.findElement(By.name("name value"));
WebElement wb3 = driver.findElement(By.className("class name value"));
WebElement wb4 = driver.findElement(By.tagName("tagname value"));
WebElement wb5 = driver.findElement(By.linkText("link value"));
WebElement wb6 = driver.findElement(By.partialLinkText("partial link value"));
WebElement wb7 = driver.findElement(By.cssSelector("CSS selector value"));
WebElement wb8 = driver.findElement(By.xpath("xpath value"));
Elements/Objects: text box, radio button, button, dropdown, checkbox, links, images, calendar, frame, popup, shadow window, etc.
Advanced CSS Selector Techniques
CSS Selector Syntax Variations
Basic Selectors
- By ID:
#idValue - By Class:
.className - By Tag:
tagName
Combined Selectors
- Tag + Class:
tagName.className - Tag + ID:
tagName#idValue
Multiple Classes
- Space → Dot:
.class1.class2.class3 - Any Single Class:
.className
Attribute Selectors
- Exact Match:
[attribute='value'] - Starts With:
[attribute^='value'] - Ends With:
[attribute$='value'] - Contains:
[attribute*='value']
Parent-Child Relationships
Ancestor-Descendant Selection
Use space to locate child elements within parent elements:
parentTagname childTagname
parentTagname childTagname.className
parentTagname childTagname#idValue
parentTagname childTagname[attribute='value']
parentTagname childTagname.className
parentTagname childTagname#idValue
parentTagname childTagname[attribute='value']
Real-World CSS Selector Examples
Form Elements
input[type='email']
.form-control.ng-pristine.ng-untouched.ng-valid-email
input.form-control.ng-pristine.ng-untouched
input[ng-model='EmailAdress']
.form-control.ng-pristine.ng-untouched.ng-valid-email
input.form-control.ng-pristine.ng-untouched
input[ng-model='EmailAdress']
Dynamic Elements
input[name='firstname']
input[aria-label='First name']
#u_0_8_V9
input[id^='u_0_8']
input[id*='u_0_8']
input[aria-label='First name']
#u_0_8_V9
input[id^='u_0_8']
input[id*='u_0_8']
Complex Selectors
.submit.button
div.FPdoLc.lJ9FBc center input[name='btnK']
.FPdoLc.lJ9FBc center input[class='gNO89b']
.FPdoLc.lJ9FBc center input[value='Google Search']
div.FPdoLc.lJ9FBc center input[name='btnK']
.FPdoLc.lJ9FBc center input[class='gNO89b']
.FPdoLc.lJ9FBc center input[value='Google Search']
Complete Registration Form Automation
Demo Registration Form Example
URL: https://demo.automationtesting.in/Register.html
package Tutorial4;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
public class Demo1 {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://demo.automationtesting.in/Register.html");
// Fill personal information
driver.findElement(By.cssSelector("input[ng-model='FirstName']")).sendKeys("Rohit");
driver.findElement(By.cssSelector("input[ng-model='LastName']")).sendKeys("Mane");
driver.findElement(By.cssSelector("textarea[ng-model='Adress']")).sendKeys("Pune");
// Contact information
driver.findElement(By.cssSelector("#eid input")).sendKeys("rohit@gmail.com");
driver.findElement(By.cssSelector("input[ng-model='Phone']")).sendKeys("9090909012");
// Gender selection
driver.findElement(By.cssSelector("input[value='Male']")).click();
// Hobbies selection
driver.findElement(By.cssSelector("#checkbox1")).click();
driver.findElement(By.cssSelector("#checkbox2")).click();
// Skills dropdown
WebElement skillsDropdown = driver.findElement(By.id("Skills"));
Select skillsSelect = new Select(skillsDropdown);
skillsSelect.selectByVisibleText("Java");
// Date of birth - Year
WebElement yearDropdown = driver.findElement(By.cssSelector("#yearbox"));
Select yearSelect = new Select(yearDropdown);
yearSelect.selectByVisibleText("2010");
// Date of birth - Month
WebElement monthDropdown = driver.findElement(By.cssSelector("select[ng-model='monthbox']"));
Select monthSelect = new Select(monthDropdown);
monthSelect.selectByVisibleText("April");
// Date of birth - Day
WebElement dayDropdown = driver.findElement(By.id("daybox"));
Select daySelect = new Select(dayDropdown);
daySelect.selectByVisibleText("20");
// Password fields
driver.findElement(By.cssSelector("#firstpassword")).sendKeys("Rohit@123");
driver.findElement(By.cssSelector("#secondpassword")).sendKeys("Rohit@123");
// Submit form
driver.findElement(By.cssSelector("#submitbtn")).click();
}
}
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
public class Demo1 {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://demo.automationtesting.in/Register.html");
// Fill personal information
driver.findElement(By.cssSelector("input[ng-model='FirstName']")).sendKeys("Rohit");
driver.findElement(By.cssSelector("input[ng-model='LastName']")).sendKeys("Mane");
driver.findElement(By.cssSelector("textarea[ng-model='Adress']")).sendKeys("Pune");
// Contact information
driver.findElement(By.cssSelector("#eid input")).sendKeys("rohit@gmail.com");
driver.findElement(By.cssSelector("input[ng-model='Phone']")).sendKeys("9090909012");
// Gender selection
driver.findElement(By.cssSelector("input[value='Male']")).click();
// Hobbies selection
driver.findElement(By.cssSelector("#checkbox1")).click();
driver.findElement(By.cssSelector("#checkbox2")).click();
// Skills dropdown
WebElement skillsDropdown = driver.findElement(By.id("Skills"));
Select skillsSelect = new Select(skillsDropdown);
skillsSelect.selectByVisibleText("Java");
// Date of birth - Year
WebElement yearDropdown = driver.findElement(By.cssSelector("#yearbox"));
Select yearSelect = new Select(yearDropdown);
yearSelect.selectByVisibleText("2010");
// Date of birth - Month
WebElement monthDropdown = driver.findElement(By.cssSelector("select[ng-model='monthbox']"));
Select monthSelect = new Select(monthDropdown);
monthSelect.selectByVisibleText("April");
// Date of birth - Day
WebElement dayDropdown = driver.findElement(By.id("daybox"));
Select daySelect = new Select(dayDropdown);
daySelect.selectByVisibleText("20");
// Password fields
driver.findElement(By.cssSelector("#firstpassword")).sendKeys("Rohit@123");
driver.findElement(By.cssSelector("#secondpassword")).sendKeys("Rohit@123");
// Submit form
driver.findElement(By.cssSelector("#submitbtn")).click();
}
}
Form Elements Breakdown
Text Input Elements
Input Fields
- First Name:
input[ng-model='FirstName'] - Last Name:
input[ng-model='LastName'] - Email:
#eid input(parent-child selector) - Phone:
input[ng-model='Phone']
Textarea
- Address:
textarea[ng-model='Adress']
Selection Elements
Radio Buttons
- Gender (Male):
input[value='Male'] - Gender (Female):
input[value='Female']
Checkboxes
- Hobby 1:
#checkbox1 - Hobby 2:
#checkbox2
Dropdowns (Select Elements)
- Skills:
#Skills - Year:
#yearbox - Month:
select[ng-model='monthbox'] - Day:
#daybox
Password and Submit Elements
Password Fields
- Password:
#firstpassword - Confirm Password:
#secondpassword
Submit Button
- Submit:
#submitbtn
Element Interaction Methods
Common WebElement Methods
Text Input Methods
- sendKeys(): Enter text in input fields
- clear(): Clear existing text
- getText(): Get element text content
Click Methods
- click(): Click buttons, links, checkboxes
- submit(): Submit forms
Dropdown Methods
- Select class: For <select> elements
- selectByVisibleText(): Select by text
- selectByValue(): Select by value
- selectByIndex(): Select by index
Attribute Methods
- getAttribute(): Get attribute value
- isEnabled(): Check if enabled
- isSelected(): Check if selected
Day 13 Knowledge Check
Question 1 of 5
Which method is used to enter text in input fields?
Practice Assignments
🎯 Assignment 1: Complete Form Automation
URL: https://demo.automationtesting.in/Register.html
- Automate the complete registration form
- Use only CSS selectors (no XPath)
- Fill all required fields with valid data
- Select appropriate dropdowns and checkboxes
- Submit the form successfully
- Add proper waits and error handling
🎯 Assignment 2: Alternative Registration Sites
URL: https://demo.guru99.com/test/newtours/register.php
- Practice with different form structure
- Use various CSS selector techniques
- Handle different input types
- Compare selector strategies
🎯 Assignment 3: CSS Selector Mastery
- Create 10 different CSS selectors for the same element
- Practice attribute selectors with ^, $, * operators
- Use parent-child relationships in complex forms
- Handle dynamic elements with partial matching
- Compare performance of different selector strategies
Key Takeaways
Form Automation Essentials
- Text Input: sendKeys() for input/textarea
- Selections: click() for radio/checkbox
- Dropdowns: Select class for <select> elements
- Submission: click() on submit button
CSS Selector Mastery
- Attribute Selectors: [attribute='value']
- Dynamic Elements: ^, $, * operators
- Multiple Classes: .class1.class2
- Parent-Child: parent child syntax
Best Practices
- Prefer CSS: Faster than XPath
- Use IDs: Most reliable when available
- Attribute Selectors: For dynamic content
- Clear Selectors: Readable and maintainable
Real-World Applications
- Registration Forms: Complete user onboarding
- E-commerce: Product selection and checkout
- Contact Forms: Lead generation automation
- Survey Forms: Data collection automation
💡 Master these form automation techniques as they're fundamental for real-world test automation. Day 14 will introduce advanced Selenium features and framework concepts!