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)