❗ DEPRECATED ❗ : Not compatible with Manifest V3 https://developer.chrome.com/docs/extensions/mv3/intro/

Fd Cypress Recorder

Before you get started Note that since the inception of this project a lot of other projects with similar functionality has been created. One very promising project is Microsoft Playwright which now comes with a CLI-tool which allows you to spawn a browser process within which you can record your interactions and have it output Playwright scripts. I can highly recommend it. Playwright supports cross-browser testing on Mac, Windows and Linux. It is actively being developed and backed by one of the largest software companies out there with an amazing track-record in OSS. End Message

Fd Cypress Recorder is a minimal plugin which records user interactions with a website. The interactions are then converted to Cypress test code which you can copy and paste into a Cypress test. The plugin only automatically record click on anchors and buttons. If you want to do some custom actions, e.g. click on span, you can open up the context menu to record custom actions.

Installation

Via Chrome Web Store: https://chrome.google.com/webstore/detail/fd-cypress-recorder/amleackadkomdccpbfginhnecfhhognj

Via Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/fd-cypress-recorder/lpfepmjegidkfonehkgfgipioceoccmc

Or manually:

From zip-file

Compile the plugin yourself
1. Clone this repository.
2. npm i
3. npm run webpack
4. In your Chrome or Edge Chromium browser you can then load an unpacked extension using the fd-cypress-recorder folder.

Usage

Open the website you want to test
Click the Fd Cypress Recorder extension icon to open the popup
Press Record and the scenario recording starts
1. Make sure the website has focus
2. Press ALT+c or alternatively CTRL+right mouse click to open up a context menu with extra test options
3. Interact with your website
Click the Fd Cypress Recorder extension icon to open the popup
Click Stop to stop recording.
Optional:
1. Fill in the Test suite name and Description.
2. You can now save these interactions as a template by pressing the + button
3. Click Show events to see the recorded interactions in a list.
4. You can remove or re-order the interactions as you see fit.
Copy the code from the text area and paste it into a Cypress test file.
Run the Cypress test.

Extension options

Right-click the extension icon to open the browser context-menu.
Click Extension options to open the options screen for the extension.

Prioritize attribute as unique selector

According to the best practices of Cypress.io one should have data-* attributes on elements. You can configure the Fd Cypress Recorder extension to prioritize attributes as unique DOM Selector to accomodate this best practice. This is turned off by default so you need to go to the Extension options to turn this option on.

Templates

Fd Cypress Recorder has the option to save your current interactions as a template. The philosophy behind this is to provide the user the ability to start recording from a certain point. For instance when you want to record various scenarios for which the user needs to be logged in then you can record all actions necessary to log in and save these interactions as template. The next time you can decide to go to the page which comes after login and load the saved template and continue from there. Alternatively you can also decide to navigate to a whole different page and load the template. You can open the Context Menu and use the Visit current url option to record this navigation step.

Load templates

Click on the name of the template to load it. This action will overwrite your current interactions if you have any.

Append templates

Click on the [+] button next to the template name to load and append the template interactions to your current existing interactions. This is useful if you have created your templates as small building blocks which can succeed each other. I.e. cookiewall accept + login + click article. This allows greater flexibility when it comes to rewriting templates. If for instance your cookiewall has changed and the test needs to be rewritten you now only have to change that particular template and you can then join all other relevant templates together quickly to replace the failing test.

Remove template

Click on the [x] button next to the template name to delete the template completely. This action can not be undone.

Context Menu

Functionality provided by the context menu, records the corresponding interactions.

Click

Dispatches the click event to the element. Use this function on elements other than a or button which has a custom click interaction. Note: a and button already have click handlers so this menu-item would cause a double interaction entry. You can easily remove the double interaction through the plugin popup Show events view.

Enter text

This allows you to enter text into text fields. The field must have focus in order for this to work correctly.

Hover

Triggers the mouse hover interaction.

Wait

This allows you to wait a number of milliseconds before the next event triggers in the test.

Attributes...

Opens another context menu with extra options to assert the HTML attributes on the hovered element. All attributes existing on the hovered element are shown in the following context menu. And each attribute gives you the following options:

Contains: Check if attribute contains given text.
Equals: Check if attribute value equals current value.
Exists: Check if attribute exists

Contains text

Checks if the hovered element contains given text.

Count...

Counts the recurrence of the currently hovered element type within it's parent. Note: it can often be difficult to select the correct container element.

Equals(n): Check that element of type within parent equals this number.
Equals...: Check that element of type within parent equals given number.
Greater...: Check that element of type within parent is greater than given number.
Less...: Check that element of type within parent is less than given number.

Exists

Checks if hovered element exists.

Match current URL

Uses the current URL as value to create a check if the current URL is the same. This is useful when you have recorded multiple interactions and some interactions causes you to navigate to another URL. You can use this option to check if you have landed on the expected URL.

URL contains

Check if current URL contains given text. This is useful if you want to check if after a series of interactions the URL contains a certain text. You'll use this functionality instead of Match current URL in the event the URL contains dynamic portions which are unpredictable. With this functionality you can assert the static portion of the URL.

Visit current URL

Use this function if you want to navigate to a certain URL not caused by another interaction like a click on an anchor or via submitting a form.

Fork for other Testing frameworks

This plugin is mainly a recorder. The literal code generation is handled in Dictionary.ts. If you think the recording functionality and interface is useful and want to re-use it for the purpose of generating code for other Testing frameworks then you only need to modify Dictionary.ts for it.

In short: Fork this repository and modify Dictionary.ts to return the corresponding code for the testing framework of your choice add a backlink in README.md crediting this repository and you're done.

Disclaimer

As with all extensions, Fd Cypress Recorder has an impact on the user-experience while using your browser. And also because of its ability to listen for keyboard and mouse interactions it is recommended that you disable this plugin when you're not making use of it.