Show HN: Headless Recorder v1.0, get Playwright/Puppeteer scripts without coding | Hacker News Reader

Show HN: Headless Recorder v1.0, get Playwright/Puppeteer scripts without coding

chrome.google.com

135 pointsianaya8927 comments

Chrome DevTools has an experimental feature since Chrome 89 which allows you to record Puppeteer scripts as well: https://developer.chrome.com/blog/new-in-devtools-89/#experi...

Yeah, that is quite new and great. Playwright also has some recording and test playback features. This extension - which I co-authored - is probably still a bit easier to use. And it does both frameworks.

Wow i'm going to have to try this sometime. That looks impressive. Anyone here try it before? How well does it work?

I don't know if it exists anymore or not, but Selenium used to have a FAQ & there was a whole bullet-point declaring how bad/evil/wrong/horrific it would be if the Selenese test-recorder (selenium's companion gui tool) could generate something automateable.

That did not stop ~2008 me from writing a small script to automate playback of, iirc, the HTML table elements that encoded the data & ran it via SeleniumRC against a SeleniumGrid (sometimes we'd use all the laptop's in the office as a load test!!).

I added some variable interpolation into the commands, and QA department had a field day recording activities, & using that output to writing & composing steps & tests.

I'm still extremely salty at the weird dogmatic "gui tools are for human interaction!" anti-automation perspective selenium presented then. Today, there's an HtmlUnit WebDriver project that does just this, I believe. I quickly scanned the archived seleniumhq.org website & web.archive.org but haven't found this, hope I do again some day. It remains one of my earliest & most impressionable memories of dogmatism in software, of someone very loudly declaring that this thing needs to be over here & that one needs to be over there & never ever let them touch. Long story, pardon; this project here is definitely bringing back those memories though! Heck yes GUIs that can help script.

I would think the claim refered to the specificity of how to select links etc.

I think selenium predates jQuery, which as one of the first frameworks used CSS selectors to address DOM nodes. You typically don’t want very specific selectors for your links and buttons to click, so you don’t have to change the test every time you update the HTML code. As I remember the selenium extension produced very specific code there.

But as you mentioned, there is more than one way to work with the generated code.

Headless Recorder 1.0 is a free and open-source Chrome extension that records your browser interactions and generates Playwright/Puppeteer scripts without coding. Easily record, copy, and run your script for testing, monitoring, or scraping

Thanks for this! I've used Headless Recorder not only as a tool for completing tasks, but as an educational aid in learning how Puppeteer/Playwright actually works. Seeing the code it spits out is a huge shortcut in learning to craft your own scripts.

Shameless plug, I did something similar, albeit for pyautogui instead of playwright/puppeteer, and for the whole system instead of just the browser. https://github.com/rmpr/atbswp

How does this differ, besides also being for Puppeteer, from Playwright's CLI codegen feature?

Playwright's CLI is a great tool. I think Headless Recorder brings a better UX and fast recording workflow. It does not need to load a custom browser, just use your own chronium based browser of your choice and start recording with the extension

Why is it called "headless"? I understand the term when it comes to running automated tests, but I don't understand how it can claim to be "headless" when it requires a real browser window in order to execute?

Also what benefit does the extension provide over Playwright's inspector tool?

Both Playwright and Puppeteer can use “headless” mode, which actually does not spin up a full, visual window. This makes running in CI or other test environments very effective.

In that case, "headless" refers to the method those tools use to run their automated tests. In the case of this "Headless Recorder" however, it apparently runs as an extension in a real browser and records real human inputs which implies it must be running "headed". So the question still applies.

I think it requires a "head" to record. But the generated scripts can then be run headless.

Any scripts could run headed or headless, the name doesn’t make sense because of that. Headless is a runtime argument passed to the chromedriver, not a property of the test script itself.

from the comment you're responding to:

> I understand the term when it comes to running automated tests, but I don't understand how it can claim to be "headless" when it requires a real browser window in order to execute?

Hey, it does not claim to be headless. Headless Recorder is the name we picked trying to sound as generic as possible in terms of tools (Puppeteer, Playwright or whatever came up in the future). Headless stands for the code that is being generated and not for the tool

Ok thanks. That makes a bit more sense!

I primarily work with python/golang but wanted to use Puppeteer to automate some tedious form-based stuff. My JS skills are pretty crap and Headless Recorder helped me get about 90 percent of what I needed in probably 10 percent of the time it would've taken me with trial and error.

Playwright has a python api!

Does this tool improve on the codegen feature that is already built into Playwright?

I can't say the generated code is better than Playwright's. What I think it brings a better UX and fast recording flow

Interested in folks' thoughts on how this compares vs. other similar tools, Cypress (with Cypress Recorder) being the main alternative I'm familiar with.

You can use popup windows, you can use webkit, you can use multiple tabs etc

In addition to the above, 1st class support for iFrames and better selectors too.

Reply on news.ycombinator.com