HN Explorer

Show HN: Visual debugger for Rails system tests (github.com)

131 points by waveywhy ↗ HN
Hey all, I've been working on this side project to get a Cypress.io-like experience, but for Ruby developers. It's plug-n-play with Capybara system tests, with the following features: - visualize assertions/commands as they happen - view all API requests, errors, and logs in the timeline - pause/continue on any step - rewind through history with a recorded video

This is brand new, so looking for people to start trying it out and leave feedback.

13 comments

[ 3.3 ms ] story [ 47.3 ms ] thread
tomhallett
Very cool! Will definitely check it out.

Random question: when you "pause" a test, is it actually pausing the capybara/rspec test such that I can have a breakpoint/debugger/REPL experience to try out various capybara/rspec code?

The reason I ask: one of the slowest/annoying parts of writing capybara tests is the context jump between "this is the css selector i get from chrome dev tools" and "this is the capybara/rspec code which I use in my tests". While they are similar, there are differences which slow things down: locating buttons based on text (vs css), case sensitivity issues with text, ambigious matches, wanting to use nested "find" calls [ie: find(css: ".modal").click_button("Close")], trying to use page objects vs selectors directly in tests, etc.

Often times my first attempt is "close" but not quite right, which compounds when you hit that on most steps of the user's flow.

super stretch goal: if you are using page objects in your rails app, if the page objects where written in a way that "cyperful" could parse them, you COULD have a feature where cyperful could highlight the page objects on the page. So instead of showing me css selectors, you draw a box around a page/section object.

I know that Playwright was doing some cool stuff with their "Pick Locators" and it allowing you to test playwright locators in the tool, not sure if this ever got extended to Page Objects or not. https://playwright.dev/docs/test-ui-mode#pick-locator

waveywhy
> is it actually pausing the capybara/rspec test such that I can have a breakpoint/debugger/REPL experience to try out various capybara/rspec code

That's a good idea. The actual method of pausing is with a ruby Queue#pop within the same thread that the actual ruby test source code is running in. I'm not sure the exact mechanism, but I assume you could run a binding.pry instead, as long as you can "cancel" it from another thread.

benblue
I write system tests like this with the REPL often. I just change the Capybara driver from its usual headless_chrome to chrome and put a debugger (or pry) breakpoint in the RSpec example. From there I just "drive" from the REPL, testing my finders/matchers and building up the test example as I go. As you suggest, being able to use dev tools directly in the browser being driven by Capybara is massively helpful during this stage.
tomhallett
at one point i started to make a gem called "dora" where you could "explore" the page with methods around the capybara driver, but never finished it. for example: page.find_blog_posts.highlight_all would draw a blue box around each "blog_post" element.
block_dagger
If this avoids save_and_open_screenshot loops, it will be very valuable for reducing debug grind. Will take a look.
mooktakim
This could be a nice UI to let you create the test visually.
waveywhy
I like this idea, it's even on my future roadmap: "Record browser interactions to save as ruby code"

Is there an example of a tool doing this well?

lgreiv
Slightly different approach, but appears to have the same overarching goals: https://github.com/bullet-train-co/magic_test

„Magic Test allows you to write Rails system tests interactively through a combination of trial-and-error in a debugger session and also just simple clicking around in the application being tested, all without the slowness of constantly restarting the testing environment.“

I will keep an eye on both now, probably they will compliment each other at some point in time.

stirkac
wow, this is awesome, thanks for sharing!
lbotos
Side question: What tool are they using to get "resolution independent" zoom on the video?

I noticed the UI stayed crisp on zoom and had me wondering. (I don't do video work so maybe it's common in AE)