diff --git a/README.md b/README.md index c636a8d..5cff195 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,35 @@ node index.js sample-recordings/simple-recorder.json ![Screenshots of Script](/assets/images/wpt-recorder-script.png) Paste this script into WPT custom script and see the magic happening +

+ +## Steps to obtain Chrome user flow recordings + +Refer to [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/) for more information on Chrome Recorder + +

#Open the Recorder panel

+ +- Open DevTools. +- Click on More options --> More tools > Recorder. + +![Screenshots of Script](/assets/images/open_dev-1.png) + +

#Export the JSON

+ +--- +**NOTE** +- At the moment, Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts. +- Make sure that your recording plays back correctly in Chrome before feeding it into The Recorder Script (To obtain the expected outcome) + +--- + +After you are done with the recording + +- Click on export icon and select "Export as a JSON file" + +![Screenshots of Script](/assets/images/export-json.png) + +Once that is done, feed the JSON into the recorder script to generate the [WPT custom script](#usage) ## Currently Supported Recorder Commands @@ -39,15 +68,9 @@ Paste this script into WPT custom script and see the magic happening --- **NOTE** - - - - - - +- At the moment, Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts. +- There are some websites having issues with chrome recorder, this issue will be resolved with time as Google developers improve Chrome + --- diff --git a/assets/images/export-json.png b/assets/images/export-json.png new file mode 100644 index 0000000..efab8de Binary files /dev/null and b/assets/images/export-json.png differ diff --git a/assets/images/open_dev-1.png b/assets/images/open_dev-1.png new file mode 100644 index 0000000..9b93c7c Binary files /dev/null and b/assets/images/open_dev-1.png differ