Skip to main content

​
Overview

The Check Visibility step verifies whether elements on your page are visible or hidden. It’s essential for testing UI states, conditional content, loading indicators, modals, and any interface element that toggles between visible and hidden states.

​
When to Use Check Visibility

Use Check Visibility when you need to:
  • Verify modals and dialogs appear: Confirm confirmation dialogs, alerts, or overlays display when expected
  • Check loading states: Ensure loading spinners appear during operations and disappear when complete
  • Test conditional UI: Verify elements show or hide based on user actions or application state
  • Validate responsive behavior: Check that mobile menus, dropdowns, or collapsible sections work correctly
  • Confirm error states: Verify error banners appear when needed and clear when resolved

​
How It Works

Check Visibility finds an element using a CSS selector and determines if it’s visible to a user. An element is considered visible if it exists in the page and isn’t hidden by CSS properties like display: none or visibility: hidden. Unlike Check Text which verifies what content an element contains, Check Visibility only cares about whether the element can be seen. This makes it perfect for testing UI state changes, animated elements, and conditional content that appears or disappears.

​
Using the Check Visibility Step

When you add a Check Visibility step, you’ll configure:

​
Finding Your Element

Use the element picker to visually select your target element, or enter a CSS selector directly. Make sure your selector identifies the specific element whose visibility you’re testing - not a parent container that might always be visible.

​
Choosing Your Assertion

Check Visibility supports two types of verification: Is Visible (Default) Confirms the element appears on the page and isn’t hidden. Perfect for verifying that content, messages, or UI elements display when they should. Is Not Visible Confirms the element is either hidden or doesn’t exist in the page. Ideal for checking that loading states clear, error messages disappear, or modals close properly.

​
Real-World Examples

​
Confirming a Modal Opens

Step 1: Click
  Locator: button[data-action='delete']

Step 2: Check Visibility
  Locator: [data-testid='confirmation-modal']
  Assertion: Is visible
Why this works: After clicking a delete button, verify that the confirmation dialog appears.

​
Verifying Loading State Clears

Step 1: Click
  Locator: button[type='submit']

Step 2: Check Visibility
  Locator: .loading-spinner
  Assertion: Is visible

Step 3: Wait for Element
  Locator: .success-message

Step 4: Check Visibility
  Locator: .loading-spinner
  Assertion: Is not visible
Why this works: Confirm loading indicators appear during operations and disappear when complete.

​
Testing Error Message Display

Step 1: Fill
  Locator: input[name='email']
  Text: invalid-email

Step 2: Click
  Locator: button[type='submit']

Step 3: Check Visibility
  Locator: .email-error-message
  Assertion: Is visible
Why this works: Verify that validation errors appear when users enter invalid data.

​
Checking Mobile Menu State

Step 1: Click
  Locator: .hamburger-menu-button

Step 2: Check Visibility
  Locator: .mobile-navigation
  Assertion: Is visible

Step 3: Click
  Locator: .close-menu-button

Step 4: Check Visibility
  Locator: .mobile-navigation
  Assertion: Is not visible
Why this works: Test that responsive navigation elements toggle correctly.

​
Verifying Success Banner Appears

Step 1: Click
  Locator: button[data-action='save']

Step 2: Check Visibility
  Locator: .success-banner
  Assertion: Is visible

Step 3: Check Text
  Locator: .success-banner
  Expected Text: Changes saved successfully
Why this works: Combine visibility checks with text verification for comprehensive testing.

​
Best Practices

​
Write Specific Selectors

  • Target the exact element you’re testing: [data-testid='confirmation-modal']
  • Avoid parent containers that might always be visible: .modal-wrapper
  • Use stable selectors that won’t break with layout changes

​
Choose the Right Assertion

  • Use “Is visible” to confirm elements appear when they should
  • Use “Is not visible” to confirm elements hide when they should
  • Remember: “Is not visible” passes whether the element is hidden OR doesn’t exist

​
Understand Visibility States

Elements are considered visible when:
  • They exist in the DOM
  • They have visible dimensions (height and width)
  • They’re not hidden by CSS (display: none, visibility: hidden)
Elements are considered not visible when:
  • They don’t exist in the DOM at all
  • They have display: none or visibility: hidden
  • They have zero dimensions
Note: Elements can be visible even if they’re outside the viewport or have opacity: 0.

​
Handle Timing Correctly

  • Add Wait for Element steps before visibility checks for dynamic content
  • Account for CSS animations and transitions
  • For elements that toggle quickly, ensure your test timing matches the UI behavior

​
Combine with Other Steps

Check Visibility works great with other steps:
  • After a Click, verify the expected UI change occurred
  • Before a Fill, confirm the input field is visible
  • Use Check Text after visibility checks to verify content

​
Troubleshooting

​
Unexpected “Not Visible” Results

Symptom: Test says element is not visible when you can see it Solution:
  • Check if the element has opacity: 0 or is positioned off-screen (still considered visible)
  • Verify your selector targets the right element (use the element picker)
  • Check if animations or transitions affect visibility detection

​
Timing Issues

Symptom: Visibility check runs before the element appears or hides Solution:
  • Add a Wait for Element step first
  • Account for CSS transition/animation duration
  • For fast UI changes, ensure your test sequence matches the timing

​
Hidden vs. Non-Existent

Symptom: Unsure whether element is hidden or missing entirely Solution:
  • Both hidden and non-existent elements pass “Is not visible” checks
  • Use browser dev tools to check if element exists in the DOM
  • Consider whether your test should differentiate between hidden and missing

​
Parent Container Confusion

Symptom: Visibility check passes but the wrong element is being tested Solution:
  • Ensure your selector targets the specific element, not a wrapper
  • Use the element picker to confirm you’re selecting the right element
  • Check that the element you’re testing actually changes visibility
  • Wait for Element - Wait for elements before checking visibility
  • Check Text - Verify content of visible elements
  • Click - Interact with visible elements
  • Fill - Enter text into visible input fields