Skip to main content

​
Overview

The Click step simulates mouse click interactions with elements on your page. Whether you’re clicking buttons, links, icons, or any interactive element, Click handles standard clicks, right-clicks, and double-clicks to test all your user interactions.

​
When to Use Click

Use Click when you need to:
  • Submit forms: Click submit buttons to process form data
  • Navigate: Click links to move between pages or trigger navigation
  • Trigger actions: Click buttons that open modals, start processes, or change UI state
  • Interact with custom controls: Click tabs, toggles, cards, or custom UI components
  • Access context menus: Right-click to test context menu functionality

​
How It Works

Click finds an element using a CSS selector and simulates a mouse click on it. The step triggers all the same events a real user click would - mousedown, mouseup, click - making it work with both native HTML elements and JavaScript-powered interactive components. You can choose between left click (standard), right click (for context menus), or double-click (for actions that require two quick clicks). The step works with any clickable element, whether it’s a button, link, div with click handlers, or custom component.

​
Using the Click Step

When you add a Click step, you’ll configure:

​
Finding Your Element

Use the element picker to visually select the element you want to click, or enter a CSS selector directly. Make sure your selector targets the actual clickable element, not a wrapper or parent container.

​
Choosing Your Click Type

Left Click (Default) The standard mouse click. Use this for buttons, links, and most interactive elements. Right Click Simulates a context menu click. Perfect for testing right-click menus or custom context actions. Double Click Two quick clicks in succession. Use for actions that require double-clicking like selecting text, opening files, or triggering special behaviors.

​
Anticipate New Tab

Enable this when your click is expected to open a new browser tab or window (e.g., links with target="_blank"). When turned on, Supatest prepares the automation context to capture and attach to the new tab reliably after the click.
  • Use together with a subsequent Switch Tab step
  • Helps avoid flakiness from popup blockers or race conditions
  • Recommended for marketing/help links or any action that opens an external page

​
Real-World Examples

​
Submitting a Login Form

Step 1: Fill
  Locator: input[name='email']
  Text: {{USER_EMAIL}}

Step 2: Fill
  Locator: input[name='password']
  Text: {{USER_PASSWORD}}

Step 3: Click
  Locator: button[type='submit']
  Click Type: Left Click

Step 4: Check URL
  Pattern: /dashboard
Why this works: Fill the form fields then click submit to verify the login flow.

​
Opening a Modal Dialog

Step 1: Click
  Locator: button[data-action='create-new']
  Click Type: Left Click

Step 2: Check Visibility
  Locator: .modal-dialog
  Assertion: Is visible

Step 3: Check Text
  Locator: .modal-title
  Expected Text: Create New Project
Why this works: Click a button to open a modal, then verify the modal appears with the correct content.

​
Testing Context Menu

Step 1: Right Click
  Locator: .file-item[data-name='document.pdf']
  Click Type: Right Click

Step 2: Check Visibility
  Locator: .context-menu
  Assertion: Is visible

Step 3: Click
  Locator: .context-menu-item[data-action='download']
  Click Type: Left Click

Step 4: Check Visibility
  Locator: .download-started-notification
  Assertion: Is visible
Why this works: Right-click to open a context menu, then left-click a menu item to trigger an action.

​
Double-Click to Edit

Step 1: Double Click
  Locator: .editable-cell[data-row='5']
  Click Type: Double Click

Step 2: Check Visibility
  Locator: input.inline-editor
  Assertion: Is visible

Step 3: Fill
  Locator: input.inline-editor
  Text: Updated Value

Step 4: Press Keys
  Locator: input.inline-editor
  Keys: Enter
Why this works: Double-click to enter edit mode, then modify the content and submit. 
Step 1: Click
  Locator: button[data-tab='settings']
  Click Type: Left Click

Step 2: Check Visibility
  Locator: .tab-panel[data-tab='settings']
  Assertion: Is visible

Step 3: Check URL
  Pattern: #settings
Why this works: Click a tab to switch views and verify the UI updates correctly. 
Step 1: Click
  Locator: a[href='/help'][target='_blank']
  Anticipate New Tab: Enabled
  Click Type: Left Click

Step 2: Switch Tab
  Tab: Create new tab "Help Page"

Step 3: Check URL
  Pattern: /help

Step 4: Check Visibility
  Locator: .help-content
  Assertion: Is visible
Why this works: Click a link that opens in a new tab, switch to the new tab, and verify the content loaded.

​
Best Practices

​
Write Stable Selectors

  • Target clickable elements with unique attributes: button[data-action='save']
  • Use data-testid attributes for test stability: [data-testid='submit-button']
  • Avoid brittle selectors based on layout: div:nth-child(3) > button:first-child

​
Choose the Right Click Type

  • Use Left Click for 99% of interactions (buttons, links, cards, icons)
  • Use Right Click specifically for context menu testing
  • Use Double Click only when your UI genuinely requires double-clicking

​
Ensure Elements Are Clickable

  • The element must be visible in the viewport
  • Nothing should cover or overlap the clickable element
  • The element shouldn’t be disabled
  • For dynamically loaded elements, add Wait for Element first

​
Verify Click Results

Always add verification after clicks to confirm the action worked:

​
Handling New Tabs Reliably

  • Enable Anticipate New Tab on Click steps that open new tabs/windows
  • Always follow with a Switch Tab step to make the new tab active
  • Prefer stable selectors on the link/button that opens the tab

​
Troubleshooting

​
Element Not Clickable

Symptom: Test fails saying element can’t be clicked Solution:
  • Verify the element is visible using browser dev tools
  • Check if another element overlays the target (modals, popups, loading screens)
  • Ensure the element isn’t disabled (check for disabled attribute)
  • Add Wait for Element if the element loads dynamically
  • Scroll the element into view if it’s below the fold

​
Click Doesn’t Do Anything

Symptom: Click succeeds but expected action doesn’t happen Solution:
  • Verify you’re clicking the correct element (use element picker to confirm)
  • Check if the element needs to be hovered first
  • Look for JavaScript errors in the browser console
  • Ensure required preconditions are met (logged in, form filled, etc.)
  • Check if the element has event listeners attached (some require page load)

​
Wrong Element Gets Clicked

Symptom: Test clicks a different element than intended Solution:
  • Make your selector more specific to target the exact element
  • Check if multiple elements match your selector
  • Use the element picker to generate a precise selector
  • Add unique data-testid attributes to elements in your app

​
Timing Issues

Symptom: Click runs before the element is ready Solution:
  • Add Wait for Element before the click
  • Wait for loading indicators to disappear
  • Ensure animations complete before clicking
  • For single-page apps, wait for page transitions to finish

​
New Tab Not Opening

Symptom: Links with target="_blank" don’t open new tabs Solution:
  • Verify the link has target="_blank" attribute
  • Check browser popup settings aren’t blocking new tabs
  • Enable Anticipate New Tab on the preceding Click step
  • Add Switch Tab after clicking to interact with the new tab
  • Test manually to confirm the link works outside of automation