search

cypress-io / cypress-chrome-recorder

Export Cypress Tests from Google Chrome DevTools' Recorder
MIT License
226 stars 18 forks source link

Support code view highlight in Recorder #49

Open jecfish opened 1 year ago

jecfish commented 1 year ago

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

jecfish commented 1 year ago

@jordanpowell88 fyi, PR #46 should already enable this feature. Do update it to the latest Puppeteer Replay version (PR https://github.com/cypress-io/cypress-recorder-extension/pull/8, https://github.com/cypress-io/cypress-recorder-extension/pull/7) when you publish a new version again.