Chrome Recorder

Chrome Recorder is a chrome extension that can record the user interactions, take screenshots and replay the actions. Chrome Recorder also can mock XHR calls with a HAR file

You can install the extension via Chrome web store. After the installation, please restart the Chrome then you can launch this extension and upload the sample test - getbootstrap.json by clicking Open Test Cast JSON button and click Run test button to run the test.

User interactions tab record the user interactions, take screenshots and replay the actions

Open saved test case

Open Test Cast JSON : Browse a test cast JSON file and upload the file

Save the test case

Save Test Cast JSON : Save the test cast JSON file

Create a new test case

  1. input the url, window type and window size
  2. click Open url to open the url. (Please do not resize the window. If you want to change the size, please input the window size again and open a new window)
  3. click Record events to start the events recording

    Now the extension will capture click, input the document level scroll events. You can click Capture screenshot alt + shift + c to take a screenshot as a checking point of the testing case.

    In case of that the click event handler stops the default browser behavior, the Chrome Recorder cannot receive the click event. You can turn on the cursor position by clicking View cursor alt + shift + v . Now the Chrome Record can capture the click event, however it will not trigger the actual click event. You need to click View cursor alt + shift + v again to turn it off and click the element.

  4. click Wait for alt + shift + w to get an element for waiting. The test case will pause the test process until the selected element shows up.
  5. click Stop / Resume button to stop / resume the events capture
  6. click Remove all to clear all the events

Edit an event

Set as baseline
Set the actual screenshot as the baseline image. (only available for the screenshot)
Play
play the event. (only available when the url is open and event capture is stopped)
Play below
play all the events below. It is a good way to test the delay/wait time and events sequence. You can stop the test by clicking Stop test at any time. (only available when the url is open and event capture is stopped)
Flag
highlight the click/input/wait for element position on the page. (only available when the url is open)
View
view the JSON of an event
Edit
edit the event
Delay
The wait time before an event
Wait
The wait time after an event
Frame index
The iframe index
Remove
remove an event
Drag & Drop
Drag and drop items to change the event orders

Run the test case

Click Run test to run the test in a new window. You can stop the test by clicking Stop test at any time

Click Clean test results to erase the test results.

XHR mock tab use har as the mock data to mock the XHR request

Open HAR file

Open HAR : Browse a HAR file and upload the file.

You can click to filter the HAR file

You can use Chrome Developer tools To get the HAR: Bring up Chrome Developer tools, click Network, right click and select Save as HAR with content

Save the HAR file

Save HAR : Save the HAR file

Add parameter exceptions

During the XHR mock, the tool will find the response in the HAR by the request method, url and parameters. You can sepecify some parameter exceptions here (separate by ,) that will be omitted.

Start XHR mock

Click Start xhr mock to start the XHR mock. The tool starts to check all the xhr requests. If the request method, url and parameters are matched with an entry in the XHR file, the response will be replaced by the response content of this entry.

Stop XHR mock

Stop xhr mock

Remove an entry