Record user actions into manual steps with screenshots and page performance timings

Latest Version

Version
0.45.28
Update
May 10, 2023
Size
107KiB
Developer
Category
Users
4,000+
Rating
4.5 ★
Manifest Version
3
Web Store Status
Languages Support
English (UK)
See more
Permissions
Storage
Tabs
UnlimitedStorage
See more

Chrome Step Recorder Extension

**What's new**
-> Added keyboard shortcut to capture current state - Default is Ctrl+Shift+1 to snap the screen but Chrome let's you manages these shortcuts here: chrome://extensions/shortcuts
-> Manifest v3 - behind the scenes google extension stuff
-> Few other bugs squashed
-> Export steps now write annotations too

Key Features:
- Automatically record detailed user actions and screenshots from manual interaction with web pages.
- Captures events, object identifiers, URLs, titles, detailed page timings and screenshots.
- Once ready, view the detailed results, press ctrl+s and create a single, detailed flat file of test evidence of every action undertaken in the browser.
- Annotate your steps to add further detail and track questions, bugs or ideas

Why?
As a tester, I'm forever capturing test evidence for steps that are undertaken. This is especially tricky when doing exploratory testing and trying to recreate any issues.
This extension is the solution to creating highly detailed test evidence files with no effort.
Do your test, save the results web page and upload it to whichever management tool is used.


Use cases:
** Manual test execution evidence capture
** Exploratory test tracking
** SME/Business process/data capture - they do it, you can harvest their knowledge
** Story-booking the execution of automation (have the extension turned on while automation runs)
** Encourage non-testers to capture the best level of detail possible


Instructions:
1. Install the extension
2. Click the extension and open the popup (strongly recommend pinning the extension!)
3. Click the slider to turn on recording - the icon adds a red dot.
4. Create a new tab and do your test actions!
5. At any point, open the extension and press \"Peek Steps\" to see a subset of has been recorded.
6. For any checkpoints, open the popup and press \"Capture Current State\" to snap a pic of the application or press Ctrl+Shift+1 (shortcut changeable at chrome://extensions/shortcuts). This is especially useful for the final state of the application.
7. When complete, click the slider to stop recording (you can turn it on and off as many time as required) and click \"Open Detailed Results Tab\". On the detailed results tag you can annotate your steps. Type #bug, #question or #idea to add colour to field.
8. Review the steps, press ctrl+s and save the detailed results web page Or press ctrl+p to print to a PDF
9. Ready for the next test? - Open the popup and press Clear Steps and start recording again!

*The extension should not record password entries by filtering element 'type=password' - but please validate result files before saving.


Accessibility – we have used the Chrome Lighthouse accessibility tool to assess this extension and have achieved a score of 100/100. We are always considering accessibility as part of our digital experience. If you have any accessibility concerns please contact us via https://shiftleft.today/accessibility-statement
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Chrome Step Recorder", "version": "0.45.28", "description": "Record user actions into manual steps with screenshots and page performance timings", "action": { "default_popup": "popup.html", "default_icon": { "1": "icon1.png" } }, "icons": { "16": "icon1.png", "128": "icon128.png" }, "permissions": [ "storage", "tabs", "unlimitedStorage" ], "host_permissions": [ "" ], "background": { "service_worker": "background.js" }, "manifest_version": 3, "content_scripts": [ { "run_at": "document_idle", "matches": [ "" ], "js": [ "storage.js", "content.js" ] } ], "commands": { "shortcut_screenshot": { "suggested_key": { "windows": "Ctrl+Shift+1", "mac": "Command+Shift+1", "linux": "Ctrl+Shift+1" }, "description": "Capture Current State keyboard shortcut", "global": false } }}
Read more

How to download and manually install Chrome Step Recorder extension for Chrome

Looking for a way to install Chrome Step Recorder extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Chrome Step Recorder extensions manually, this article outlines two simple methods to effortlessly install Chrome Step Recorder extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Chrome Step Recorder extension and manually install through Drag &Drop

If you ever need to manually install a Chrome Step Recorder extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Chrome Step Recorder Extension by clicking the "Download CRX" button on the website.

Look for the Chrome Step Recorder extension you wish to install. Go to the website and download the Chrome Step Recorder extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Chrome Step Recorder extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Chrome Step Recorder extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Chrome Step Recorder extension for Chrome and install in Developer Mode

This is another method to install Chrome Step Recorder extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Chrome Step Recorder extension file

Select and download the Chrome Step Recorder extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Chrome Step Recorder extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Chrome Step Recorder extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Chrome Step Recorder extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Chrome Step Recorder extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Testsigma Recorder Extension · Developer Tools 4,000+ 16 ★ 1.85MiB

icon

Tango: Create how-to guides with screenshots Extension · Productivity 4,000+ 347 ★ 1.76MiB

icon

Scribe: AI Documentation, SOPs & Screenshots Extension · Productivity 4,000+ 676 ★ 763KiB

icon

Chromium browser automation Extension · Developer Tools 4,000+ 209 ★ 136KiB

icon

Steps Recorder by Flonnect Capture Extension · Productivity 4,000+ 4 ★ 981KiB

icon

TestCase Studio Extension · Developer Tools 4,000+ 180 ★ 782KiB

icon

MagicHow: Documentation, Screenshots & SOPs Extension · Productivity 4,000+ 5 ★ 3.94MiB

icon

Record/Replay Extension · Developer Tools 4,000+ 9 ★ 2.44MiB

icon

Flowster Capture: screenshots, training, SOPs Extension · Productivity 4,000+ 7 ★ 192KiB

icon

SpiraCapture - Exploratory Testing Tool Extension · Developer Tools 4,000+ 3 ★ 2.53MiB

icon

Recorder Action Extension · Developer Tools 4,000+ 3 ★ 63.78KiB

icon

Katalon Recorder (Selenium tests generator) Extension · Productivity 4,000+ 263 ★ 6.23MiB

icon

Dubble — Free Step-by-Step Guide Creator Extension · Productivity 4,000+ 23 ★ 8.93MiB

icon

Exploratory Testing Chrome Extension Extension · Developer Tools 4,000+ 22 ★ 270KiB

icon

Stepsy: create step-by-step guide with screenshots Extension · Productivity 4,000+ 25 ★ 7.49MiB

icon

Wildfire Extension · Productivity 4,000+ 93 ★ 23.27MiB

icon

testRigor’s Test Case Recorder Extension · Developer Tools 4,000+ 8 ★ 82.58KiB

icon

Selenium Click Recorder (RPA bot) Extension · Developer Tools 4,000+ 8 ★ 1.46MiB

icon

Minerva — Create How-To Guides in Seconds Extension · Productivity 4,000+ 17 ★ 458KiB

icon

DeploySentinel Recorder Extension · Developer Tools 4,000+ 13 ★ 686KiB

icon

Cypress Recorder Extension · Developer Tools 4,000+ 10 ★ 202KiB

icon

BlazeMeter | The Continuous Testing Platform Extension · Developer Tools 4,000+ 159 ★ 2.17MiB

icon

Bug Magnet Extension · Developer Tools 4,000+ 61 ★ 39.66KiB

icon

Automation Extension · Developer Tools 4,000+ 10 ★ 33.59KiB

User reviews

icon

Staging Site (ID: 0000006b08af8391) Voted 2 ★ - Updated 01/18/2023 Load time is not capturing correctly. It is capturing just previous step Load time in the Next event. Please look into this.

icon

John Alexander (ID: 00000059e0b45f50) Voted 5 ★ - Updated 02/03/2021 Simple to install, powerful in what it achieves. I especially like the screenshot feature :)

icon

David Rigler (ID: 000000a84614d12e) Voted 5 ★ - Updated 01/25/2021 This is a powerful addition to Chrome that helps testers, business analysts and process capture in general.