Show HN: Traquer – Records and reproduces user's in-page behavior | Hacker News Reader

Show HN: Traquer – Records and reproduces user's in-page behavior

github.com

100 pointsnenadg23 comments

This is really cool!

How do you plan to handle the selenium replaying? Does it currently just record the x/y position of the cursor events, because if so I guess it needs playback on a browser window of the same dimensions.

I guess it may be possible to have some adaptors for cursor events which can process the clicked element for a framework, i.e. for reactJS it could pick out the classname and use that as the click target for playback in a screen size independent way.

My gut instinct was that this would mean lots of re-recording tests every time you make a change - but really that's much the case with screenshot testing or any e2e testing already! Great work!

Thanks :-)

you can check out https://github.com/nenadg/traquer/tree/master/runner which is test runner that extrapolates from saved events.

Mouse position is irrelevant in selenium cases right now. Right now I'm trying to create basic case in which recorded events would be reproduced in correct sequence, reproducing what we've done on page.

The down side is - what is collected is xpath (just because it is shorter than dom selector), xpath is absolutely vulnerable to changes so your tests will fail after F5 (in case of generated ID's whatsoever).

I need to work on this, any help is welcome :-).

Similar to what ContentSquare.com does too. They just raised $20M.

Disclaimer: I worked there for 2 years (tracker + webapp).

Or the Site Optimization product I maintained from about 2008-2011.

The concept's old as dirt. Our script had to work on IE 5.5, though, so suck it kiddies. ;)

This look really great!!

Is there an example that shows how to actually implement in a page? I'm looking through the github code and it's not immediately obvious how to embed the recorder/replay functionality.

Hey, include minified js and css to your page (get them from repo - https://github.com/nenadg/traquer/tree/master/public), and that would do for now.

See also "Mouse Tracking with Javascript and Perl [2003]": https://pts.50.hu/0304tpj.pdf

I would be really interested to be able to use the playback part of this for unit testing. I have code that can click buttons, but it would be great to have a library I could just load inside a page and then play back a series of events.

I am poking through the source... seems like it should be pretty easy to programmatically build a stream of events to load, but I can't quite find the code that actually plays them back?

Hey, sorry for late response. I've just saw your comment.

You can look at https://github.com/nenadg/traquer/blob/master/public/lib/tra... (core method).

You can find `play` function in it. `play` function calls for `eventsScheduler` that does replay part by calling actions (events) on saved objects in pre-saved time (ie. time you moved your mouse and clicked here and there).

If you have any further questions email me. I've attached my email to my hn profile.

Is this meant as an alternative to Inspectlet? If that's the case, awesome. Their tech is very powerful and useful but so, so expensive for the layman.

I know the community here is very anti-tracking, but I really do like using trackers like this to improve the UX, understand what features people use and how they use them, etc.

FullStory is a vastly better offering than Inspectlet IMO. I rarely see a feature done as poorly as Inspectlet's search/filtering is. Just absolutely terrible. Don't know if I'm the only one on that, or what. If this is half as good though it may be a replacement for both.

I don't have any experience with FullStory or Inspectlet, haven't heard of.

Whole idea about this tool is just attempt to automate `some` of tester's jobs, in example - save scenario, run it again some time later, ideally automate it with selenium/jasmine.

Hey, can you explain how your heatmap handles scrolling? I expect a heatmap to show what elements of a page were interacted with a lot, if scrolling isn't handled correctly, it might look that the user was interacting with another part of the page than he actually was.

Nice catch, interacted elements (if scrolled) should appear on their place, but heatmap is not scrollable.

I guess this is pretty buggy, but I already mentioned that heatmap is pretty naive, and should be taken care of sometime in future.

I saw something really nice with Elm elm-lang.org where one could record the user behavior, Push it to Google Firebase and replay it on a developer machine for debugging.

Do you have a link to that resource? Sounds really awesome. Thanks!

nenadg, got an email address? I'd like to contact your directly?

yeah ofc, me [ a t ] nenadg [ d o t ] com

You should put your contact details and project links in your HN profile.

Similar to what HotJar.com does

Similar, yes. But for free!

Yes, that's it - what HotJar does, but yeah it's free :-)

If you have any idea how to monetize it, I'm all ears.

Tiered monthly pricing based on number of sessions tracked is how I would expect to pay for a service like this.

Would love to see it integrated with an A/B test optimisation tool.

Reply on news.ycombinator.com