UI Element Automation Practice

Interact with and automate a full catalogue of UI elements — inputs, buttons, checkboxes, radios, dropdowns, sliders, tables, modals, and more — with Selenium, Cypress, or Playwright.

A hands-on playground for UI automation. Interact with each component below, watch its real-time output, and practice locating and driving it with Selenium, Cypress, or Playwright — every element exposes a stable id and data-testid.

Basic Elements

Text Field (Input Box):

Output:

Text Area:

Output:

Button:

Output:

Clicked 0 times

Checkbox (Single):

Single Option

Output:

Unchecked

Checkboxes (Multiple):

Option 1

Option 2

Option 3

Output:

Checked:

Radio Buttons:

Radio 1

Radio 2

Radio 3

Output:

No option selected

Dropdown (Single Select):

Output:

No option selected

Dropdown (Multi-Select):

Output:

No options selected

Interactive Elements

Link (Anchor Tag):Click Me

Output:

Click the link

Image:

Output:

Click the image

Table & Grid:

ID	Name	Age
1	Zui	30
3	Bob	25
2	Charlie	35
5	Ashley	30
4	Nat	25
6	Jim	35

Output:

Click a table header to "sort"

Tooltip:Hover Me

Output:

Hover over "Hover Me"

Slider:

Output:

Slider Value: 50

Progress Bar:

30%

Output:

Progress: 30%

Complex UI Components

Modal & Popup:

Output:

Click "Show Modal"

Date Picker & Calendar:

(This is a basic input for demonstration. Integrate a datepicker library for full functionality)

Output:

No date selected (simulated)

File Upload & Download:

Output:

No file selected
(Download simulated via alert)

Drag and Drop Elements:

Drag Me

Drop Here

Output:

Drag "Drag Me" to "Drop Here"

Iframe:

Output:

Iframe loaded

Advanced UI Elements

Dynamic Content (Simulated):

Initial Content

Output:

Click "Update Content" to see changes

Notifications & Toast Messages:

Output:

Click "Show Notification"

Tabs:

Tab 1

Tab 2

Content of Tab 1

Content of Tab 2

Output:

Active Tab: tab1

Accordion:

Content of Accordion Item #1

Content of Accordion Item #2

Output:

Open an accordion item

Virtual Scrolling (Simulated):

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

Scroll to simulate virtual scrolling

Output:

Scroll Position: 0

How to Automate This UI Elements Page

A showcase of the common controls you will meet in real apps — text fields, checkboxes, radios, single and multi-select dropdowns, a slider, a table you can sort, a modal, a file input, and more. Use it to practise the right interaction for each element type.

The same scenario written for two popular frameworks. These use the stable id and data-testid locators documented in the cheat sheet below.

import { test, expect } from '@playwright/test';

test('interact with the core UI element types', async ({ page }) => {
  await page.goto('https://www.qapractice.com/practice-different-ui-elements');

  // Text input + output mirror
  await page.getByTestId('ui-text-field').fill('automation');

  // Checkbox / radio
  await page.getByTestId('ui-single-checkbox').check();
  await page.getByTestId('ui-radio-Option 2').check();

  // Dropdowns
  await page.getByTestId('ui-single-dropdown').selectOption('India');
  await page.getByTestId('ui-multi-dropdown').selectOption(['Option A', 'Option B']);

  // Range slider (set via fill)
  await page.getByTestId('ui-slider').fill('70');

  // Sort the table by clicking a header
  await page.getByTestId('ui-th-name').click();

  // File upload
  await page.getByTestId('ui-file-upload').setInputFiles('fixtures/sample.pdf');

  // Button increments a counter
  await page.getByTestId('ui-click-button').click();
  await expect(page.getByText(/Clicked 1 times/)).toBeVisible();
});

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class UiElementsTest {
  public static void main(String[] args) {
    WebDriver driver = new ChromeDriver();
    driver.get("https://www.qapractice.com/practice-different-ui-elements");

    driver.findElement(By.id("textField")).sendKeys("automation");
    driver.findElement(By.id("ui-single-checkbox")).click();
    driver.findElement(By.cssSelector("[data-testid='ui-radio-Option 2']")).click();

    new Select(driver.findElement(By.id("singleDropdown"))).selectByVisibleText("India");
    Select multi = new Select(driver.findElement(By.id("multiDropdown")));
    multi.selectByVisibleText("Option A");
    multi.selectByVisibleText("Option B");

    // Sort table + upload a file
    driver.findElement(By.cssSelector("[data-testid='ui-th-name']")).click();
    driver.findElement(By.id("ui-file-upload")).sendKeys("/path/to/sample.pdf");

    driver.findElement(By.id("ui-click-button")).click();

    driver.quit();
  }
}

Every interactive element on this page exposes a stable id and/or data-testid so your scripts don't depend on brittle positions or styling.

Element	id	data-testid	Playwright locator	Selenium locator
Text field	`textField`	`ui-text-field`	`getByTestId('ui-text-field').fill('hello')`	`By.id("textField")`
Text area	`textArea`	`ui-textarea`	`getByTestId('ui-textarea').fill('lines')`	`By.id("textArea")`
Click button	`ui-click-button`	`ui-click-button`	`getByTestId('ui-click-button').click()`	`By.id("ui-click-button")`
Single checkbox	`ui-single-checkbox`	`ui-single-checkbox`	`getByTestId('ui-single-checkbox').check()`	`By.id("ui-single-checkbox")`
Multi checkbox (1/2/3)	`ui-checkbox-option1`	`ui-checkbox-option1`	`getByTestId('ui-checkbox-option2').check()`	`By.id("ui-checkbox-option2")`
Radio option	`ui-radio-<option>`	`ui-radio-<option>`	`getByTestId('ui-radio-Option 2').check()`	`By.cssSelector("[data-testid='ui-radio-Option 2']")`
Single-select dropdown	`singleDropdown`	`ui-single-dropdown`	`getByTestId('ui-single-dropdown').selectOption('India')`	`new Select(driver.findElement(By.id("singleDropdown")))`
Multi-select dropdown	`multiDropdown`	`ui-multi-dropdown`	`getByTestId('ui-multi-dropdown').selectOption(['A','B'])`	`new Select(driver.findElement(By.id("multiDropdown")))`
Anchor link	`ui-link`	`ui-link`	`getByTestId('ui-link').click()`	`By.id("ui-link")`
Clickable image	`ui-image`	`ui-image`	`getByTestId('ui-image').click()`	`By.id("ui-image")`
Sortable table header	`—`	`ui-th-id / ui-th-name / ui-th-age`	`getByTestId('ui-th-name').click()`	`By.cssSelector("[data-testid='ui-th-name']")`
Range slider	`ui-slider`	`ui-slider`	`getByTestId('ui-slider').fill('70')`	`By.id("ui-slider")`
Progress increment button	`ui-progress-increment`	`ui-progress-increment`	`getByTestId('ui-progress-increment').click()`	`By.id("ui-progress-increment")`
Open-modal button	`ui-modal-open`	`ui-modal-open`	`getByTestId('ui-modal-open').click()`	`By.id("ui-modal-open")`
Date input (simulated)	`ui-datepicker`	`ui-datepicker`	`getByTestId('ui-datepicker').fill('2026-08-01')`	`By.id("ui-datepicker")`
File upload	`ui-file-upload`	`ui-file-upload`	`getByTestId('ui-file-upload').setInputFiles('r.pdf')`	`By.id("ui-file-upload")`
Update dynamic content	`ui-update-content`	`ui-update-content`	`getByTestId('ui-update-content').click()`	`By.id("ui-update-content")`
Show notification	`ui-show-notification`	`ui-show-notification`	`getByTestId('ui-show-notification').click()`	`By.id("ui-show-notification")`

Use these as a checklist to build your automation suite. Download them as a Markdown file to keep alongside your test project.

ID	Scenario	Steps	Expected Result
TC01	Text field mirrors input	Type into the Text Field	The Output box shows exactly what you typed.
TC02	Button click counter	Click the "Click Me" button three times	The output reads "Clicked 3 times".
TC03	Single checkbox toggles	Check, then uncheck the single checkbox	Output toggles between "Checked" and "Unchecked".
TC04	Multiple checkboxes	Check Option 1 and Option 3	Output lists "option1, option3".
TC05	Radio group is exclusive	Select a radio option, then another	Only the last selected option is active; output updates.
TC06	Single-select dropdown	Choose a country from the single dropdown	Output shows the selected country.
TC07	Multi-select dropdown	Select two or more options in the multi dropdown	Output lists all selected options.
TC08	Slider value	Drag/set the range slider	Output shows the current slider value (0–100).
TC09	Table sorting	Click the Name column header	The table indicates it is sorted by "name".
TC10	Modal open/close	Click "Show Modal", then Close	The modal opens and then closes; output reflects the state.
TC11	File selection	Choose a file in the file input	The selected file name is displayed.
TC12	Notification toast	Click "Show Notification"	A success toast appears with "Operation completed successfully."