rrweb integration?

[mmkal]

Hello 👋 - very much liking taiko so far!

An idea occurred to me - instead of creating big, heavy videos as the only way to see what went wrong in a failed test, could it make sense to add a first-class rrweb plugin? It could probably be done in userland, but it'd be great to have a way for taiko to inject the library, provide some saveSnapshot type APIs, and then save a relatively small json file which could then be used to step through a test - and it'd probably be a better debugging experience as well as lower storage/bandwidth costs for those of us storing failure artifacts in GitHub Actions/AWS/whatever.

[saikrishna321]

I like this idea!can you please help me understand if rrweb is implemented how are we going to view the results?

[mmkal]

Honestly I'm not sure as I haven't looked much into how taiko is implemented. But at a high level, as a user. It could be similar to video:

const {rrweb, goto, write, press, click, openBrowser} = require('taiko')

const myTest = async () => {
  try {
    await openBrowser()
    await rrweb.startRecording(`./rrweb/whatever.txt`)
    await goto('https://google.com')
    await write('lasagna recipe')
    await press('Enter')
    await click('Very specific lasagna recipe I would like to see on Google')
  } catch {
    await rrweb.stopRecording()
    const replayer = await rrweb.getReplayer() // returns an rrweb replayer? https://github.com/rrweb-io/rrweb/blob/master/guide.md#replay
    await replayer.play() // ??? something like that?
  }
}

myTest()

Or, if stopRecording() wrote the file to disk similarly to the mp4 generated by the video plugin, it could (initially) be the user's responsibility for running rrweb to replay the events.

[saikrishna321]

I remember doing some work around this! Let me re-look into it @NivedhaSenthil

[NivedhaSenthil]

Taking a high level look.. it seems to be that replay may not be the same always as rrweb captures the events and tries to replay which is very different from the video which is static. But a plugin plugin for rrweb can be really helpful in many other scenarios.

[mmkal]

An idea: maybe instead of a json file, the output could be an html file which has all the rrweb events baked into it in a <script type="application/ld+json">[ ... ]</script> tag. It'd be pretty much the same size (it's just the json + ten or so lines of html/js) and all you'd need to do is open the standalone html file in the browser to view a test replay. It wouldn’t depend on taiko. So taiko could just print the path to the HTML file, and the user can open it themselves even after the process has exited, or a CI system could upload the file to a web server so it could be watched later, etc..

Here's an example: https://jsfiddle.net/5Lxm1f0d