“Element is not visible” Error

Error: “Element is not visible”
Code: element-not-visible

This error indicates that a specific element on your web page is present in the DOM but not visible to the CheckView bot while testing your website. The element could be hidden, off-screen, or obscured by other elements. This can cause automated tests in Checkview.io to fail when trying to interact with the element.

Troubleshooting Steps:

  1. Verify Element Visibility
    • Check CSS Properties: Use the browser’s developer tools to inspect the element’s CSS properties. Look for properties such as display: none, visibility: hidden, or opacity: 0 that might be causing the element to be invisible to the bot.
    • Positioning Issues: Ensure the element is not positioned off-screen or covered by other elements. Check properties like position, z-index, and overflow to diagnose positioning issues.
  2. Check Element State
    • Dynamic Content: If the element is part of dynamic content (e.g., AJAX-loaded content), ensure that the content has fully loaded before attempting to interact with the element.
    • Conditional Visibility: Some elements are only visible under certain conditions (e.g., after a user action). Make sure the necessary conditions are met for the element to be visible.
  3. Ensure Proper Loading
    • Page Load Time: If the element is supposed to appear after the page loads, make sure the page fully loads before the test checks for the element. Increasing the wait time can sometimes help.
    • JavaScript Errors: Check for any JavaScript errors in your browser’s console that might be preventing the element from appearing.
  4. Scroll to the Element
    • Off-Screen Elements: If the element is off-screen, it might need to be scrolled into view. Ensure that the test environment scrolls to the element location before attempting interaction.
    • Check for Overlapping Elements
  5. Z-index and Positioning: Inspect the z-index and positioning of nearby elements to ensure they are not overlapping and obscuring the target element.
    • Hide Obscuring Elements: Temporarily hide elements that might be overlapping and obscuring the target element during the test.
    • Use Alternative Selectors
    • Robust Selectors: Sometimes, the issue might be with the selector used to identify the element. Ensure that the selector is robust and accurately targets the desired element.

Additional Tips

  • Increase Wait Time: Adjust the wait time settings in Checkview.io to allow more time for the element to become visible.
  • Simplify Page Content: If possible, simplify the page content during testing by disabling non-essential plugins or features that might interfere with element visibility.
  • Consistent Test Environment: Ensure that the test environment mirrors the production environment as closely as possible. Differences in configurations can affect element visibility.
  • Visibility Utility Functions: Create utility functions within Checkview.io to check for element visibility and handle common visibility issues.
  • Professional Help: If visibility issues persist, consider consulting with a web development expert or a testing specialist for a thorough analysis and tailored solutions.