Closed Lillecarl closed 5 years ago
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!
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!
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
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('#navplain-header > #nav > .navcontainer > #search-form > #search-button') await page.click('#navplain-header > #nav > .navcontainer > #search-form > #search-button')
await page.waitForSelector('#nav > .navcontainer > #search-form > .searchform-fields > #submit-button') await page.click('#nav > .navcontainer > #search-form > .searchform-fields > #submit-button')
await navigationPromise
await browser.close() })()
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.
@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.
@tnolet that cleared up alot! Puppeteer recorder recognized the keyboard when hitting the TAB key after typing your input.
Closing this for now. just use TAB as the final key to record keyboard input.
It would be good if puppeteer-recorder inserted await page.keyboard.press('Tab')
in these instances.
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).
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.
@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.
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:
Here are some alternatives that I've tried and why they fail:
<>
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 caresnpm remove -g @testim/testim-cli
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.
Hi @zmorris thanks for your feedback.
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:
chrome-extension://djeegiggegleadkkbgopoonhjimgehda/options.html
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.
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! :)