Not recording keystrokes

[Lillecarl]

Hi!

I just came across this plugin and it worked like a charm.

One thing I noticed though is that it doesn't record keyboard input, which would be great (i added my own page.type code in where necessary, but it'd be good if you could enable the plugin to record keystrokes for you.

Thanks for this great plugin, helped me as a non webdev generate reliable selectors for my little automation task! :)

[tnolet]

Hi @Lillecarl thanks for bringing this to my attention. Would you mind writing a bit more in what behaviour you would expect and what the outcome would be? If you provide that, we can start turning this into a feature request and start working on it. Thanks!

[Lillecarl]

The behaviour could work in different ways, but if you think about it this extension has the possibility of becoming a "professional" version of iMacros, where you use it for automation of forms filling or whatever that you want to have done a gazillion times. It's just a minor inconvenience, but recording keyups and keydowns would also make sure that you replicate exactly what the user did.

To be fair, if you're competent enough to install node you should be able to write your own page.type calls, but convenience is not to be neglected.

Thanks for the quick reply!

[toastcrunch]

Puppeteer Recorder In Action:

1)User clicks record
2)User goes to the URL CNN.com
3)Clicks on search bar to input search text
4)User types in Washington DC
4)User clicks search
5)User stops recording

Puppeteer Recorder Output:

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()

const navigationPromise = page.waitForNavigation()

await page.goto('https://www.cnn.com/')

await page.setViewport({ width: 1142, height: 836 })

await navigationPromise

await page.waitForSelector('#nav__plain-header > #nav > .nav__container > #search-form > #search-button')
await page.click('#nav__plain-header > #nav > .nav__container > #search-form > #search-button')

await page.waitForSelector('#nav > .nav__container > #search-form > .search__form-fields > #submit-button')
await page.click('#nav > .nav__container > #search-form > .search__form-fields > #submit-button')

await navigationPromise

await browser.close()
})()

When running code through VSC

Puppeteer seemed to acknowledge every action besides the keyboard input, No.3. As the playback successfully interacted with the search bar, and the click search function. No user keyboard input was recorded.

[tnolet]

@jonathanOHZ thanks for adding to the discussion. Just to be sure we are talking about the same thing, did you try hitting the TAB key after typing into the search input?

Puppeteer recorder now only records text inputs if you end them with an explicit TAB. Not ideal, but this whole recording on user input is trickier than it seems.

[toastcrunch]

@tnolet that cleared up alot! Puppeteer recorder recognized the keyboard when hitting the TAB key after typing your input.

[tnolet]

Closing this for now. just use TAB as the final key to record keyboard input.

[ephetic]

It would be good if puppeteer-recorder inserted await page.keyboard.press('Tab') in these instances.

[ngduc]

I spent 2 hours on this.
Please put this in the front page (Chrome extension) about pressing Tab to make it record.
Also, it doesn't work when you need to test Search boxes (pressing Enter).

[tnolet]

I spent 2 hours on this.

Please put this in the front page (Chrome extension) about pressing Tab to make it record.

Also, it doesn't work when you need to test Search boxes (pressing Enter).

Hi @ngduc sorry to hear that, but in the Readme, under usage it says literally how to use it. Bullet point 2.

Usage

Click the icon and hit Record.
Hit tab after you finish typing in an input element.

[ngduc]

@tnolet a normal user like me reads Chrome Ext page first (screenshot), they will give up if they have to google to get to the readme file to troubleshoot it. Good extension anyway! (I think cypress recorder was built on this one)

Somehow it works for "cypress recorder" without pressing Tab.

[zmorris]

I just want to add that this isn't really a debate. If every single user fails to record their very first test, then it doesn't matter what the instructions say. You're battling human nature. On that note, I just want to list the small bugs/features that I've hit so far:

1. Not confirming after the user clicks the 🔁 restart button is devastating
   1. UX fallacy: never assume that you know how much work it took for the user to arrive at present state
   2. A better pattern is infinite undo or a history
2. Requiring tab keypress for text entry isn't going to fly
   1. UX fallacy: never assume that the user has read the instructions
   2. As the risk of forgetting to press tab grows with the size of the recording, so does the risk of ruining it

Here are some alternatives that I've tried and why they fail:

1. Cypress Recorder
   1. UI is quite poor
   2. Doesn't seem to really work on my Mac with Chrome 92
   3. We want Puppeteer, Playwright or Selenium/Webdriverio, not Cypress
2. Testim Recorder
   1. Requires sign-in to use (this is a nonstarter)
   2. Likely spies on us due to their backend server tie-in
   3. https://app.testim.io/#/signin doesn't work on my Mac in Safari 14 (this is just sloppy and doesn't bode well)
   4. I spent 10 minutes trying to figure out how to save my test recording as Puppeteer format and finally figured out to click the <> button which shows an alert: "A dev kit connection agent is required in order to export tests into code. Please run the following command from your terminal:". Even though it looks like they put a lot of work into their app, this level of intrusion is a nonstarter for developers. much less the nontechnical users who might be recording tests. I went through the hassle and although the code was clean and recognized the q selector on the Google home page I was testing with, I couldn't find anywhere to export as Puppeteer. apparently they removed this feature and wasted an hour of my time, and now only offer to save as JavaScript or TypeScript in their own proprietary format. maybe they enable the Puppeteer and Playwright tabs for paying users.. who knows, who cares
   5. for these reasons and more, the most important command for Testim appears to be:

      npm remove -g @testim/testim-cli
      

3. Chrome DevTools Recorder I had high hopes for this one since it's from Chrome, but unfortunately it has the worst GUI and UX decisions of anything that I've tried. The recorder is buried down inside DevTools and has no copy-paste functionality. It doesn't even show the actual JavaScript code, just the events. So the user has to save the script instead. The generated Puppeteer code is pretty ok, but wraps each event in its own scope so ends up being about 7 times more verbose than handwritten code

I would suggest that what you actually have here is the first viable web browser recording tool for nontechnical people. Something like this should have existed back in the mid-1990s but was blocked by various companies that didn't want things like WYSIWYG editors or people making their own websites. That unfortunate thinking led us to where we are today with online gated community echo chambers and DRM in our media codecs (instead of say, WebM and Ogg Theora/Vorbis) so even Wikipedia doesn't work in many browsers. I could talk about these various tragedies for, well, forever. If web developers aren't woke by this point, then they haven't been paying attention!

If anyone knows any other viable browser recording tools, please let us know. I hope you take these words to heart and fix Checkly's, because we all really want to use it.

[ianaya89]

Hi @zmorris thanks for your feedback.

• restart confirmation: I think you have a point, in the other side we tried to make the recording flow as fast as possible and we found that people wanted that as well (record, copy and restart). We will bring the discussion up and evaluate if worth adding that new behaviour.
• tab keypress: is something I have in the roadmap and I am experimenting with possible workarounds to remove that.

[zmorris]

Hey thanks for your quick reply. It's funny, whenever I ask or or tell the internet something, the state of reality changes like that scene in The Matrix when the cat walks by again and they get deja vu and realize that "they changed something" in the simulation.

I just discovered that I can change the key from tab (9) to enter (13), which will probably work for most of our use cases:

1. Visit Headless Recorder's settings at chrome-extension://djeegiggegleadkkbgopoonhjimgehda/options.html
2. At the top in the Recorder section, click Record Key Stroke and press enter or return to change it from 9 to 13

As a quick-fix, I'd recommend changing that setting to an array to allow saving both tab (9) and enter (13). That way text inputs will "just work" for the vast majority of people, and if they need to record characters typed individually, they can press tab for now.