I am encountering difficulties when trying to test Bootstrap 4 menus using Capybara.
Here is a snippet of the navigation menu:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown" >
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="userDropdown">
User
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<%= link_to 'logout', logout_url, method: :post, class: 'dropdown-item'%>
</div>
</li>
</ul>
</div>
While in debug mode, the following code almost works:
find('#userDropdown').execute_script('$(this).dropdown("toggle")')
click_on 'logout'
The issue arises because during debugging, the browser seems to lag behind. A simple action like selecting a non-existent element helps bring it up to speed.
Once the browser catches up, the actions perform as expected.
However, during testing, I encountered a
Selenium::WebDriver::Error::StaleElementReferenceError: stale element reference: element is not attached to the page documentclick_on 'logout' line.
A workaround that I found effective (for now) is:
find('#userDropdown', visible: false).execute_script('$(this).dropdown("toggle")')
click_on 'logout'
Although similar to the previous approach, adding the visibility attribute resolved the issue, revealing that the original error message was misleading. However, this solution feels too hardcoded...