Button Automation Practice

Master button interactions in Selenium, Playwright & Cypress — single click, double-click, right-click, disabled state, click-and-hold, coordinates, and computed styles.

Beginner10 min8 scenarios15 test cases

Interactive Scenarios

S01Navigate to Home Page

No navigation yet

S02Get Button X & Y Coordinates

Coordinates: —

S03Get Button Color

Color: —

S04Get Button Height & Width

Size: —

S05Disabled ButtonDISABLED

Button is disabled — no action fires

S06Click and Hold for 1.5 sec

Not held yet

S07Double Click Button

Not double-clicked yet

S08Right Click Button

No action performed yet

Showing 15 test cases

ID	Scenario	Type	Priority
BTN_001	Button is clickable and triggers its action Expected: Result text updates after a single click ✅ positivehigh	positive	high
BTN_002	Button displays the correct label text Expected: Visible label matches the expected string exactly ✅ positivemedium	positive	medium
BTN_003	Single click triggers the correct action Expected: Only the targeted result changes; others stay unchanged ✅ positivehigh	positive	high
BTN_004	Double-click button triggers a double-click action Expected: Result reads "Double clicked!" after a dblclick ✅ positivehigh	positive	high
BTN_005	Right-click button opens the context action Expected: Result confirms the context menu was triggered ✅ positivemedium	positive	medium
BTN_006	Disabled button cannot be clicked Expected: Button is disabled and no action fires ❌ negativehigh	negative	high
BTN_007	Enabled button reports an enabled state Expected: Enabled buttons return isEnabled() === true ✅ positivemedium	positive	medium
BTN_008	Button stays usable across viewport sizes Expected: Button remains visible and clickable on mobile and desktop widths ⚠️ edgemedium	edge	medium
BTN_009	Button is operable via keyboard Expected: Focusing and pressing Enter/Space triggers the action ✅ positivehigh	positive	high
BTN_010	Button is exposed to screen readers Expected: Element has role=button and an accessible name ✅ positivemedium	positive	medium
BTN_011	Hover state is visually distinct Expected: Background/style changes on hover ⚠️ edgelow	edge	low
BTN_012	Result state resets after a page refresh Expected: Reloading restores each result to its initial text ⚠️ edgelow	edge	low
BTN_013	Click-and-hold completes after 1.5 seconds Expected: Holding for 1.5s reports success; early release does not ⚠️ edgemedium	edge	medium
BTN_014	Button does not overlap adjacent elements Expected: Bounding boxes of neighbouring controls do not intersect ⚠️ edgelow	edge	low
BTN_015	Page loads without console errors Expected: No uncaught errors are logged during load ✅ positivehigh	positive	high

Overview

Buttons are one of the most important UI targets in automation. This page walks through the core actions you will use across Playwright, Selenium, and Cypress.

1 · Single Click

Single click is the baseline interaction. Use it to trigger navigation, updates, and normal action buttons.

TypeScript

// Playwright
await page.locator('#clickBtn').click();
await expect(page.locator('#clickResult')).toBeVisible();

2 · Double Click

Double click requires its own framework-specific command. A normal click will not trigger a double-click event.

TypeScript

// Playwright
await page.locator('#doubleClickBtn').dblclick();

3 · Right Click

Right click is useful for context-menu style flows. Framework support differs slightly, but all three can handle it.

TypeScript

// Playwright
await page.locator('#rightClickBtn').click({ button: 'right' });

4 · Disabled State

For disabled controls, assert state instead of forcing interaction. This is more stable and more realistic.

TypeScript

// Playwright
await expect(page.locator('#disabledBtn')).toBeDisabled();

5 · Text Change

Text-change validation is a good way to assert that a button action actually caused a visible UI update.

TypeScript

// Playwright
const before = await page.locator('#toggleBtn').textContent();
await page.locator('#toggleBtn').click();

6 · Keyboard Enter

Keyboard support matters for accessibility and test realism. A focused button should respond to Enter consistently.

TypeScript

// Playwright
await page.locator('#submitBtn').press('Enter');

Method Summary

Quick reference across all three frameworks.

Action	Selenium	Playwright JS	Playwright PY	Cypress
Single click	`element.click()`	`locator.click()`	`locator.click()`	`.click()`
Double click	`actions.doubleClick(el)`	`locator.dblclick()`	`locator.dblclick()`	`.dblclick()`
Right click	`actions.contextClick(el)`	`click({ button: 'right' })`	`click(button='right')`	`.rightclick()`
Disabled assert	`!element.isEnabled()`	`expect(locator).toBeDisabled()`	`expect(locator).to_be_disabled()`	`.should('be.disabled')`
Keyboard Enter	`sendKeys(Keys.ENTER)`	`locator.press('Enter')`	`locator.press('Enter')`	`.type('{enter}')`

FAQ