​
Overview

The Wait for Element step allows you to pause test execution until an element meets certain conditions. This is essential for handling dynamic content, loading states, and ensuring elements are ready for interaction before proceeding with subsequent steps.

​
Form Fields

Field NameTypeRequiredDescription
LocatorstringYesCSS selector for the element to wait for
ConditiondropdownYesThe condition to wait for (visible, hidden)
TimeoutnumberNoMaximum time to wait in milliseconds

​
Form Configuration

​
Locator Field

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

​
Condition Dropdown

Available wait conditions:
  • Visible - Wait for element to become visible and interactable
  • Hidden - Wait for element to disappear or become hidden
  • Exists - Wait for element to exist in the DOM

​
Timeout Field

  • Numeric input for maximum wait time in milliseconds
  • Default timeout is typically 30 seconds (30000ms)
  • Adjust based on expected loading times

​
Examples

​
Wait for Content to Load

  • Locator: #main-content
  • Condition: Visible
  • Timeout: 10000

​
Wait for Loading Spinner to Disappear

  • Locator: .loading-spinner
  • Condition: Hidden
  • Timeout: 15000

​
Wait for Dynamic Element

  • Locator: [data-testid='search-results']
  • Condition: Visible
  • Timeout: 8000

​
Wait for Modal to Close

  • Locator: .modal-overlay
  • Condition: Hidden
  • Timeout: 5000

​
Wait for Form Validation

  • Locator: .error-message
  • Condition: Visible
  • Timeout: 3000

​
Best Practices

​
Timeout Strategy

  • Set reasonable timeouts based on expected loading times
  • Consider network latency and server response times
  • Use shorter timeouts for fast interactions, longer for data loading
  • Account for animation and transition durations

​
Condition Selection

  • Use Visible when waiting for content to appear before interaction
  • Use Hidden when waiting for loading indicators to disappear
  • Use Exists when you only need the element in DOM, not necessarily visible

​
Locator Selection

  • Use specific, stable CSS selectors
  • Prefer data-testid attributes for better reliability
  • Ensure locators uniquely identify the target element

​
Common Issues

​
Timeout Errors

  • Verify the locator correctly targets the intended element
  • Check if the element actually appears/disappears as expected
  • Increase timeout for slower loading content
  • Ensure network connectivity and server availability

​
Wrong Condition

  • Visible condition requires element to be both present and displayed
  • Hidden condition is met when element doesn’t exist OR is hidden
  • Exists only checks DOM presence, not visibility

​
Race Conditions

  • Use appropriate wait conditions before interactions
  • Chain wait steps before actions that depend on element state
  • Consider multiple elements that may affect the wait condition

​
Performance Considerations

  • Avoid unnecessarily long timeouts that slow down test execution
  • Use the most specific wait condition possible
  • Consider breaking complex waits into multiple smaller waits

​
Use Cases

​
Loading States

  • Wait for page content to fully load
  • Wait for AJAX requests to complete
  • Wait for dynamic data to populate

​
UI Transitions

  • Wait for animations to complete before interaction
  • Wait for modals to open/close
  • Wait for collapsible content to expand/collapse

​
Form Interactions

  • Wait for validation messages to appear
  • Wait for form submission feedback
  • Wait for field-specific loading states
  • Wait for new page content after navigation
  • Wait for single-page app route changes
  • Wait for progressive content loading
  • Check Visibility - For verifying element visibility after waiting
  • Check Text - For verifying content after element appears
  • Click - For interacting with elements after waiting