cypress-data-cy-highlight

A chrome extension that highlights elements with the data-cy attribute. The elements can be exported to a file for further review. Data-cy is the default attribute to search for but users can enter a custom attribute to search for.

Store Page:

Chrome Web Store

Loading the unpacked plugin (not from the store)

The unpacked plugin is located in the src folder

chrome developer docs

Follow the instructions located at the above url. It's probably a good idea to read through that entire tutorial.

Development

Run the following after cloning this repository:

npm ci
npm run build
npm run start

The plugin uses https://github.com/vercel/serve to host a sample site for testing the plugin. Navigate to localhost:3000 to load the custom site which has elements with a data-cy attribute. Then load the local copy of the plugin by:

In the address bar of chrome, navigate to: chrome://extensions/. Click on "Load Unpacked"

Select the dist folder which includes all the unpacked javascript resources.

Open your chrome extension menu and interact with the cypress-data-cy-highlight extension.

Bundling the extension

Run:

npm run build

This will create a zip file named extension.zip in the root directory of the project. This zip file can be uploaded to the chrome web store for distribution.