Practice form

This is a sample web form to help you practice creating auto click / auto fill rules for all the different types of form fields that supports. You can identify the field to automatically fill by entering a supported xpath value into the xpath column.

Basic XPath

Form Field HTML XPath 
<input type="text" />
  • //input[@type="text"]
 
<input name="username"/>
  • //input[@name="username"]
 
<input placeholder="First name"/>
  • //input[@placeholder="First name"]
 
<input id="last-name"/>
  • //input[@id="last-name"]
 
<input aria-describedby="name"/>
  • //input[@aria-describedby="name"]
 
<input readonly/>
  • //input[@readonly]
 
<input disabled/>
  • //input[@disabled]
 
<input type="email"/>
  • //input[@type="email"]
 
<input type="password"/>
  • //input[@type="password"]
link 
<a href="#" target="_blank">link</a>
  • //a[@href]
  • //a[@href="#"]
  • //a[@target="_blank"]
  • //a[text()="link"]
Male
Female
Other 
<input type="radio" name="gender" value="male" checked> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other
  • //input[@type="radio"]
  • //input[@name="gender"]
  • //input[@value="other"]
 
<select id="product-size">
  <option>size</option>
  <option class="opt-35" size="35" value="opt-35item-0">35</option>
  <option class="opt-36" size="36" value="opt-36item-1">36</option>
  <option class="opt-37" size="37" value="opt-37item-2">37</option>
  <option class="opt-38" size="38" value="opt-38item-3">38</option>
  <option class="opt-39" size="39" value="opt-39item-4">39</option>
  <option class="opt-40" size="40" value="opt-40item-5">40</option>
</select>
  • //select[@id="product-size"]/option[2]
  • //select[@id="product-size"]/option[@size="36"]
  • //select[@id="product-size"]/option[contains(@value,"opt-40")]
  • //select[@id="product-size"]/option[text()="39"]
 
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
  • //select[@name="cars"]
values
  • volvo
  • saab
  • fiat
  • audi
 
<textarea name="message" rows="3" cols="30">
  The cat was playing in the garden.
</textarea>
  • //textarea[@name="message"]
  • //textarea[@rows="3"]
  • //textarea[@cols="30"]
 
<input type="submit" value="Submit">
  • //input[@type="submit"]
  • //input[@value="Submit"]
I have a bike
I have a car
I have a boat
 
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat
  • //input[@type="checkbox"]
  • //input[@name="vehicle2"]
  • //input[@value="Car"]
  • //input[@checked]
 
<button type="button" alert onclick="alert('Hello World!')">Click Me!</button>
  • //button[@type="button"]
  • //button[@alert]
  • //button[@onclick]
 
<button type="button" console onclick="console.log('Hello World!')">Click Me!</button>
  • //button[@type="button"]
  • //button[@console]
  • //button[@onclick]
 
<button type="button" random onclick="console.log('Random integer from 0 to 99 ')">Click Me!</button>
  • //button[@type="button"]
  • //button[@random]
  • //button[@onclick]

Advance XPath

Contains()

Element HTML XPath 
<input type="submit" />
  • //input[contains(@type,"submit")]
  • //input[contains(@type,"sub")]
  • //*[contains(@type,"mit")]
 
<button type="button" name="btnLogin">Login</button>
  • //button[contains(@name,"btn")]
  • //button[contains(text(),"Log")]
  • //*[contains(@type,"button")]
Please enter your shipping address.
 
<label for="address">Address</label>
<input type="text" class="form-control is-invalid" id="address">
<div class="invalid-feedback">
 Please enter your shipping address.
</div>
 label
  • //label[@for="address"]
  • //label[contains(text(),"Address")]
div
  • //*[@class="invalid-feedback"]
  • //div[contains(@class,"invalid")]
 
<button type="button" class="btn-primary">Primary</button>
<button type="button" class="btn-secondary">Secondary</button>
<button type="button" class="btn-success">Success</button>
<button type="button" class="btn-danger">Danger</button>
<button type="button" class="btn-warning">Warning</button>
<button type="button" class="btn-info">Info</button>
<button type="button" class="btn-light">Light</button>
<button type="button" class="btn-dark">Dark</button>
 Select All
  • //button
  • //button[@type="button"]
  • //*[contains(@class,"btn-")]

Using OR & AND

Element HTML XPath 
<form class="form-signin">
  <label for="inputEmail">Email address</label>
  <input type="email" id="inputEmail" placeholder="Email address" >
  <label for="inputPassword">Password</label>
  <input type="password" id="inputPassword" placeholder="Password" >
</form>
  • //form/input[@type="email" or @type="password"]
  • //form/input[@type="email" and @id="inputEmail"]
  • //form/input[@type="email" and @id]
  • //form[@class="form-signin"]/input[@id="inputPassword"]
  • //form[@class="form-signin"]/input[1]
  • //form[@class="form-signin"]/input[2]

starts-with(@attribute,value)

Element HTML XPath 
<button type="button" class="btn-primary">Primary</button>
<button type="button" class="btn-secondary">Secondary</button>
<button type="button" class="btn-success">Success</button>
<button type="button" class="btn-danger">Danger</button>
<button type="button" class="btn-warning">Warning</button>
<button type="button" class="btn-info">Info</button>
<button type="button" class="btn-light">Light</button>
<button type="button" class="btn-dark">Dark</button>
  • //button[starts-with(@class,"btn")]

Events

Element HTML XPath 
<button id="ClickEvents">Click Events</button>
  • //button[@id="click-events-test"]
 
<input type="text" id="FormEvents" class="form-control" placeholder="Form Events Test" />
  • //input[@id="form-events-test"]
  • //tagname[@attribute="value"]

Random Number

M.R.P.: ₹ 850.00
Price: ₹ 549.00
You Save: ₹ 301.00
13-Feb-2023 [00:06:36]
$12,000.00

Speed Test

IFrame

Iframe without src Iframe with src 
<iframe id="iframe-without-src" />
 
<iframe src="https://yari-demos.prod.mdn.mozit.cloud/.../_sample_.summary.html" />