Playwright::Error: Element is not attached to the DOM

[adamreisnz]

I am frequently running into this error when using the Capybara Playwright driver to click on elements:

Playwright::Error: Element is not attached to the DOM

It seems more likely to occur when a lot of actions are being taken on the page.

Sample code that causes it:

select_input = page.find("[test-id='someTestId']")
select_input.click
option = select_input.find('li[role="option"]', text: 'foo')
option.click # This will trigger the error

The select input and option all exist on the page 100% and are all clickable.

Is there any way to prevent this error or any viable workarounds?
The suggested workarounds found when googling don't seem to work/apply as we're working through Capybara here.

[bmiller-scholarly]

I'm seeing the same issue. In my case, I'm converting a fairly large test suite from Selenium, and a vast number of our specs fail with this error. It seems to occur mostly when Turbo is driving page state changes by showing modals or slide-overs.

I'm also seeing related "expected to find text" failures that follow the same pattern: Turbo puts up a modal, and then my expect(page).to have_content('foo') assertions fail. Screenshot attached for this one.

When the specs fail, if I look at the screenshot from the test failure, they all have the unattached element clearly visible. I'm curious what we can do ... I'd love to switch over to Playwright because Selenium is flaky.

Here's an example. The assertion: expect(page).to have_content("There are two degrees in this input"). The screenshot, which clearly shows the modal and the expected text:

In both the "not attached" and the "expected to find text" versions, it appears that the DOM elements aren't available or visible to Playwright, even though they're clearly in the DOM. Inspecting for text matches gives the "expected to find text" errors, and attempting to interact with the DOM elements gives the "Element is not attached to DOM" errors.

[ausangshukla]

+1, this is a show stopper.

Error: Malformed value
Call log:
- fill("01/01/2020")
- - attempting fill action
- - waiting for element to be visible, enabled and editable
(Playwright::Error)

[diegomichel]

Same issue here. I found two workarounds depending on the case.

1. If navigating(refreshing) to the same page/route ensure the page/dom changes in someway, in my case I added a flash message so I can assert that the message it's displayed with assert_text, then I'm good to check on other elements of the page.
2. When switching to a different route, I'll use visit instead of using the buttons on the page, this to avoid turbo :sad:

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adamreisnz]

The issue is not resolved yet

[codez]

Another workaround might be to use the playwright page object instead:

page.driver.with_playwright_page do |p|
   p.locator('li[role="option"]', hasText: 'foo').click
end

However, it's quite annoying to write some click calls this way, while most still work using the capybara method.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[YusukeIwaki]

Can anyone provide any example code (or actual public site) for reproducing this issue?