​
Overview

The Check Visibility step allows you to verify whether elements are visible or hidden on your page. It supports both positive assertions (element is visible) and negative assertions (element is not visible), making it essential for testing UI state and conditional content.

​
Form Fields

Field NameTypeRequiredDescription
LocatorstringYesCSS selector for the element to check
Assertion TypetoggleNoIs visible (default) vs Is not visible

​
Form Configuration

​
Locator Field

  • Text input field for entering CSS selectors
  • Supports element picker for visual selection
  • Should target the specific element whose visibility you want to verify

​
Assertion Type Toggle

  • Is visible (default, toggle enabled): Verifies the element is visible and displayed
  • Is not visible (toggle disabled): Verifies the element is hidden or not present

​
Examples

​
Verify Element is Visible

  • Locator: .success-message
  • Assertion Type: Is visible

​
Verify Element is Hidden

  • Locator: .loading-spinner
  • Assertion Type: Is not visible

​
Check Modal Dialog Visibility

  • Locator: [data-testid='confirmation-modal']
  • Assertion Type: Is visible

​
Verify Error Message Hidden

  • Locator: .error-banner
  • Assertion Type: Is not visible

​
Check Navigation Menu State

  • Locator: .mobile-menu
  • Assertion Type: Is not visible

​
Best Practices

​
Locator Selection

  • Use specific, stable CSS selectors for the target element
  • Prefer data-testid attributes for better test reliability
  • Ensure the locator uniquely identifies the element you want to check

​
Visibility Testing Strategy

  • Use “Is visible” to confirm elements appear when expected (success messages, content after actions)
  • Use “Is not visible” to confirm elements are hidden when expected (loading states, error conditions cleared)
  • Consider the difference between “not present” vs “hidden” in your application

​
Timing Considerations

  • Add wait conditions for elements that show/hide based on user actions
  • Consider animation and transition timing when checking visibility
  • Account for elements that toggle visibility based on dynamic conditions

​
Common Issues

​
Element Not Found vs Hidden

  • The step distinguishes between elements that don’t exist and elements that are hidden
  • Hidden elements (CSS display: none, visibility: hidden) are considered “not visible”
  • Elements not in the DOM are also considered “not visible”

​
Timing Problems

  • Elements may take time to show/hide due to animations or loading
  • Add appropriate wait conditions before visibility checks
  • Consider using Wait for Element step before visibility verification

​
CSS Display States

  • Elements with opacity: 0 may still be considered visible
  • Elements outside viewport may still be considered visible
  • Check your application’s specific hiding mechanisms

​
Dynamic Content

  • Elements that show/hide based on user actions may need timing adjustments
  • Consider responsive design changes that affect visibility
  • Account for conditional rendering in modern web applications

​
Visibility States

​
Considered Visible

  • Element exists in DOM and has visible dimensions
  • Element is not hidden by CSS (display: none, visibility: hidden)
  • Element may be outside viewport but still counts as visible

​
Considered Not Visible

  • Element does not exist in the DOM
  • Element has CSS display: none
  • Element has CSS visibility: hidden
  • Element has zero dimensions (height and width)
  • Wait for Element - For waiting on elements before checking visibility
  • Check Text - For verifying content of visible elements
  • Click - For interacting with visible elements