testing-library/testing-library-recorder-extension

Support code view highlight in Recorder

jecfish opened this issue · 6 comments

jecfish commented

Chrome 110 launches a new "Show code and highlight" feature.

How to test
You can test this feature with the latest Chrome Canary

  1. Open a recording in the Recorder, click "Show code".
  2. Hover over each step, the code should highlight accordingly.

Action required

  1. Your extension needs to update to the latest Puppeteer Replay.
  2. Rebuild & publish a new version to Web Store
  3. That's all!

If your extension doesn't have Puppeteer Replay as dependency, you can implement the [sourcemaps] (https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68) yourself to make it work.

my gif has pretty low res.
ezgif-4-33a0309279

nickmccurdy commented

Thanks, this looks like it would be handy! Is there any implementation documentation or code sample for it yet?

jecfish commented

Hi Nick, it will work once you upgrade the @puppeteer/replay dependency in this project and rebuild. There's no extra implementation needed.

To see how we build it, this is the code: https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68

nickmccurdy commented

Is this a side effect of importing the library or do I need to call stringify?

OrKoN commented

@nickmccurdy source maps get added by the stringify function and you already call it https://github.com/testing-library/testing-library-recorder-extension/blob/main/src/RecorderPlugin.ts#L13 so no changes in the code are needed (only need to update to the latest replay version).

  • 👍1
nickmccurdy commented

Ah, I got confused because I forgot about how the extension gets registered, thanks!