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 a 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 recording you just made.
Click on "Replay" button on 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 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, on 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 3: 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 a 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 recording you just made.
Click on "Replay" button on 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 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, on 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 3: 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: 29/04/2024
Thank you!