6 ms·

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

135 points by ianaya89 5y ago

ianaya89 5y ago
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
- pineconewarrior 5y ago
  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.
spuz 5y ago
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?
- tnolet 5y ago
  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.
  - spuz 5y ago
    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.
    - nicoburns 5y ago
      I think it requires a "head" to record. But the generated scripts can then be run headless.
      - monkpit 5y ago
        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.
  - marcellus23 5y ago
    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?
    - ianaya89 5y ago
      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
      - spuz 5y ago
        Ok thanks. That makes a bit more sense!
theptip 5y ago
Interested in folks' thoughts on how this compares vs. other similar tools, Cypress (with Cypress Recorder) being the main alternative I'm familiar with.
- wdb 5y ago
  You can use popup windows, you can use webkit, you can use multiple tabs etc
- yc3763 5y ago
  In addition to the above, 1st class support for iFrames and better selectors too.
defied 5y ago
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/#experimental_features https://developer.chrome.com/blog/new-in-devtools-89/#experi...
- tnolet 5y ago
  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.
- adkadskhj 5y ago
  Wow i'm going to have to try this sometime. That looks impressive. Anyone here try it before? How well does it work?
gvkhna 5y ago
Hey HN! Sorry for the shameless plug. If you’re interested in no-code recording and deployment, check out https://Superadmin.so https://Superadmin.so. We’re pioneering a Visual AI for better change detection. And no scripts to manage!
- SeriousM 5y ago
  This is not a shameless plug, it's unrelated advertisement.
  - cat199 5y ago
    "Superadmin is the easiest way for teams to get setup with visual browser testing quickly, and orchestrate massively parallel tests with private infrastructure." seems pretty related to me
rektide 5y ago
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.
- rmetzler 5y ago
  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.
Xen0byte 5y ago
I haven't used Puppeteer in a while, mostly because it's obsolete now that Playwright exists, but for Playwright you can do the exact same thing from the Playwright CLI, without having to install some browser extension. The main command is "playwright codegen". More info here: https://playwright.dev/dotnet/docs/cli https://playwright.dev/dotnet/docs/cli
veidr 5y ago
Does this tool improve on the codegen feature that is already built into Playwright?
- ianaya89 5y ago
  I can't say the generated code is better than Playwright's. What I think it brings a better UX and fast recording flow
twalla 5y ago
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.
- ngai_aku 5y ago
  Playwright has a python api!
chana_masala 5y ago
How does this differ, besides also being for Puppeteer, from Playwright's CLI codegen feature?
- ianaya89 5y ago
  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
RMPR 5y ago
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 https://github.com/rmpr/atbswp

135 points by ianaya89 5y ago

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

pineconewarrior 5y ago
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.

spuz 5y ago

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?

tnolet 5y ago
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.
- spuz 5y ago
  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.
  - nicoburns 5y ago
    I think it requires a "head" to record. But the generated scripts can then be run headless.
    - monkpit 5y ago
      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.
- marcellus23 5y ago
  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?
  - ianaya89 5y ago
    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
    - spuz 5y ago
      Ok thanks. That makes a bit more sense!

theptip 5y ago

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

wdb 5y ago
You can use popup windows, you can use webkit, you can use multiple tabs etc
yc3763 5y ago
In addition to the above, 1st class support for iFrames and better selectors too.

defied 5y ago

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/#experimental_features https://developer.chrome.com/blog/new-in-devtools-89/#experi...

tnolet 5y ago
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.
adkadskhj 5y ago
Wow i'm going to have to try this sometime. That looks impressive. Anyone here try it before? How well does it work?

gvkhna 5y ago

Hey HN! Sorry for the shameless plug. If you’re interested in no-code recording and deployment, check out https://Superadmin.so https://Superadmin.so. We’re pioneering a Visual AI for better change detection. And no scripts to manage!

SeriousM 5y ago
This is not a shameless plug, it's unrelated advertisement.
- cat199 5y ago
  "Superadmin is the easiest way for teams to get setup with visual browser testing quickly, and orchestrate massively parallel tests with private infrastructure." seems pretty related to me

rektide 5y ago

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.

rmetzler 5y ago
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.

Xen0byte 5y ago

I haven't used Puppeteer in a while, mostly because it's obsolete now that Playwright exists, but for Playwright you can do the exact same thing from the Playwright CLI, without having to install some browser extension. The main command is "playwright codegen". More info here: https://playwright.dev/dotnet/docs/cli https://playwright.dev/dotnet/docs/cli

veidr 5y ago

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

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

twalla 5y ago

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.

ngai_aku 5y ago
Playwright has a python api!

chana_masala 5y ago

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

ianaya89 5y ago
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

RMPR 5y ago

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 https://github.com/rmpr/atbswp