1

I would like to capture user behavior in a Web Page (Has, html, css, js scripts) on a given window (x,y) (x1,y1) and playback later of the time.

Currently, we take screenshots but the storage is huge for each user on each form. Is there a way to make it simplified format and play it back later?

It is only the front end rendering needed, not worried about the underlying backend scripts.

Currently web page is using vue framework, anything in vue would be great too.

Kannaiyan
  • 12,554
  • 3
  • 44
  • 83

1 Answers1

1

You could store each mouse (x, y) coordinate and corresponding mouse clicks etc. possibly look to replicate the user input via injection. See How to simulate a mouse click using JavaScript?

Alternatively, you may just need to optimize your current image-based recording process. How about storing only visual differences between UI interactions - only those areas that have changed?

Thulis
  • 51
  • 4
  • How to capture all the graphics and key inputs associated with the interaction? – Kannaiyan Jul 20 '18 at 17:58
  • You shouldn't need to capture the graphics if you know the initial html served for that page and the page reacts to user input the same way each time (i.e state is reproducible and consistent for the same inputs). To capture input, jQuery has nice functionality. See https://stackoverflow.com/questions/2878983/capture-key-press-without-placing-an-input-element-on-the-page – Thulis Jul 20 '18 at 18:04
  • That is a complicated problem, rendering the same html after years of capturing? Content / scripts comes from 100 different apps. If we need to capture all the html, css, javascript associated with that window, it will be a huge storage than a screenshot. – Kannaiyan Jul 20 '18 at 18:07
  • So you didn't mention these constraints in your original question. Sounds like you are seeking to record not your own pages but those belonging to some outside source. In that case, you may just need to optimize your current image-based recording process. How about storing only visual differences between UI interactions - only those areas that have changed? – Thulis Jul 22 '18 at 21:16