search

thoughtbot / capybara-webkit

A Capybara driver for headless WebKit to test JavaScript web apps
https://thoughtbot.com/open-source
MIT License
1.97k stars 428 forks source link

Issue rendering modal (SweetAlert) in CapybaraWebkit #1056

Closed synth closed 6 years ago

synth commented 6 years ago

We use SweetAlert2 (https://sweetalert2.github.io/) in our application. We recently updated to the latest version of SweetAlert (v7.12.11) and unfortunately all our SweetAlert tests are failing.

A relevant change in the upgrade is SweetAlert's move to Promise objects. We know Capybara-Webkit (or rather QT) doesn't support ES6 (and similarly Promise objects), so we've included a polyfill as per SweetAlert's docs (https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js).

The Swal modal renders correctly if we use other Capybara drivers such as Selenium.

While debugging, I see that the Swal modal is indeed created and added to the DOM but the positioning is off and there might be an issue with the z-index. At the end of the day, capybara-webkit doesn't detect the ".swal2-modal" div, even though I can see the div by using page.evaluate_script.

I've created a sample application that demonstrates the issue: https://github.com/synth/swal-capybara-webkit-bug

The versions I'm on are as follows:

Any advice to tracking this down is appreciated!

twalpole commented 6 years ago

Not only does capybara-webkit not support ES6 but it also doesn't support a lot of modern CSS either (the last QtWebkit release was basically equivalent to a 6 year old version of Safari), so display issues are going to be common with anything that uses modern CSS. In this case it would guess it's the use of flex box for alignment/display of the modal. This is going to be an issue until/if/when annullens version of qtwebkit is supported rather than the last official release of QtWebkit. PRs welcome.

synth commented 6 years ago

so display issues are going to be common with anything that uses modern CSS

:(

Where can we follow/contribute to here or annullens progress? I thought I remember there was a thread somewhere of people discussing alternatives/workarounds? I can't seem to find it now.

We've been loyal Capybara-webkit users for years, and would hate to abandon it. Thank you so much for all your work. Love live capybara-webkit!

synth commented 6 years ago

Oh, think I was thinking of this: https://github.com/thoughtbot/capybara-webkit/issues/887

synth commented 6 years ago

For anyone who might see this, we had success moving to Chrome headless (or selenium_chrome driver) as per this thread: https://github.com/teamcapybara/capybara/issues/1860#issuecomment-305347221

https://github.com/teamcapybara/capybara/blob/adaca2c9c49e403dff37e0405a3982ba4bb2f105/spec/selenium_spec_chrome.rb#L13-L20

twalpole commented 6 years ago

@synth https://github.com/annulen/webkit/tree/qtwebkit-stable Is the repo for annulus qtwebkit. First step is to get it building with a new Qt version and then try building/running specs of capybara-webkit to see what works and what's broken. I've been meaning to do it for a while but just haven't had the time.