How to record a login sequence with Chrome DevTools recorder?
Puppeteer, in combination with the Chrome DevTools Recorder, offers a seamless way to capture the login sequence of any web application. Follow these steps to record the login sequence for uploading to our dashboard.
Open Google Chrome
To open a new incognito window, either:
Use the keyboard shortcut Ctrl + Shift + N (Windows/Linux) or Cmd + Shift + N (Mac)
Click on the three dots in the top-right corner, then select New incognito window
Right-click on any part of the web page and select Inspect from the context menu or go click on the 3 dots on the top-right corner of Chrome, go to More tools and then click on Developer tools
Alternatively, you can use the keyboard shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac)
In the DevTools panel, click on the three dots icon
Go to More tools and then Recorder
Do not logout of the application before clicking on "End recording" because that will record the logout event as well.
In the DevTools, you should now see a Recorder panel
Click on the Recorder panel, and a recording UI will appear
Now navigate to your login page and after that click on Create a new recording button in the DevTools recorder
Give it an appropriate name and click on Start recording
Manually perform the login actions on the web page (e.g., enter username and password, click login)
Click on the End recording button in the recording UI to stop the recording
Close the Google Chrome instance and reopen it again in Incognito mode
Open the Recorder in Chrome DevTools and select the recording you just made
Click on the Replay button in the top-right corner of the Recorder panel
If everything goes well, you will be logged into your web application
In case your web application is a bit slower, you can try changing the replay settings to throttle the network requests or set a higher timeout for puppeteer
To do this:
Click on the replay settings button on the left just below the name of the recording in the Recorder UI
Configure the changes and click Replay again
In the Recorder panel, in the top-left corner you will see an icon to download the recorded file, click that.
Select JSON to download it as a JSON file.
Log in to your Astra dashboard.
Open the scanner setup flow and go to Step 4: Login Recording
Upload the Puppeteer JSON file you saved in the previous step.
That's it! You have successfully recorded the login sequence and exported it as a Puppeteer JSON file for easy integration with your dashboard. Happy recording!
Step 1: Open Chrome in Incognito Mode
Open Google Chrome
To open a new incognito window, either:
Use the keyboard shortcut Ctrl + Shift + N (Windows/Linux) or Cmd + Shift + N (Mac)
Click on the three dots in the top-right corner, then select New incognito window
Step 2: Access Recorder in DevTools
Right-click on any part of the web page and select Inspect from the context menu or go click on the 3 dots on the top-right corner of Chrome, go to More tools and then click on Developer tools
Alternatively, you can use the keyboard shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac)
In the DevTools panel, click on the three dots icon
Go to More tools and then Recorder
Step 3: Record Login Sequence
Do not logout of the application before clicking on "End recording" because that will record the logout event as well.
In the DevTools, you should now see a Recorder panel
Click on the Recorder panel, and a recording UI will appear
Now navigate to your login page and after that click on Create a new recording button in the DevTools recorder
Give it an appropriate name and click on Start recording
Manually perform the login actions on the web page (e.g., enter username and password, click login)
Click on the End recording button in the recording UI to stop the recording
Step 4: Verify The Recording
Close the Google Chrome instance and reopen it again in Incognito mode
Open the Recorder in Chrome DevTools and select the recording you just made
Click on the Replay button in the top-right corner of the Recorder panel
If everything goes well, you will be logged into your web application
In case your web application is a bit slower, you can try changing the replay settings to throttle the network requests or set a higher timeout for puppeteer
To do this:
Click on the replay settings button on the left just below the name of the recording in the Recorder UI
Configure the changes and click Replay again
Step 5: Export Recorded Sequence as Puppeteer JSON
In the Recorder panel, in the top-left corner you will see an icon to download the recorded file, click that.
Select JSON to download it as a JSON file.
Step 6: Upload Puppeteer JSON File to Your Dashboard
Log in to your Astra dashboard.
Open the scanner setup flow and go to Step 4: Login Recording
Upload the Puppeteer JSON file you saved in the previous step.
That's it! You have successfully recorded the login sequence and exported it as a Puppeteer JSON file for easy integration with your dashboard. Happy recording!
Updated on: 01/10/2024
Thank you!