Doc Detective Companion

A browser extension to find short, unique CSS selectors for use in Doc Detective tests.

Install

Get the extension from your browser's applicable store, or build and install development versions:

• Chrome/Edge: Chrome Web Store
• Firefox: Firefox Add-ons
• Safari: Unavailable on the Mac App Store. (If someone wants to sponsor yearly Apple Developer registration fees, contact me.) Build a local development version.

Use

To find CSS selectors,

1. Click the Doc Detective Companion icon in your browser. A dialog appears in your browser window.

2. Click an element on your page. A CSS selector for the element appears in the Doc Detective Companion dialog.

   Note: Doc Detective Companion attempts to prevent standard browser click events (like following hyperlinks) while the dialog is active. Some websites use non-standard click event behaviors and may continue to perform tasks as they typically do.

3. When you're done, click the Doc Detective Companion icon again. The dialog disappears, and standard click event behaviors resume.

Future updates

• Build Doc Detective test actions based on CSS selectors.
• Build entire Doc Detective tests based on CSS selectors.
• Build entire Doc Detective tests based on browser interactions.

Develop

This extension was created with Extension CLI.

Available Commands

Commands	Description
npm run start:chrome	Build extension for Chromium-based browsers and watch file changes. Extension files appear in ./dist. Load as an unpacked extension.
npm run start:firefox	Build extension for Firefox and watch file changes. Extension files appear in ./dist. Load as a temporary extension, selecting the manifest.json file.
npm run start:safari	MacOS only. Build extension for Safari. Must run again to update for file changes. Requires Xcode. Requires Safari to run unsigned extensions.
npm run build:chrome	Generate release version for Chromium-based browsers.
npm run build:firefox	Generate release version for Firefox.
npm run publish	Generate release versions and publish to Chrome Web Store and Firefox Addons. Requires necessary credentials in ./.env.
npm run publish:chrome	Generate release version and publish to Chrome Web Store. Requires necessary credentials in ./.env.
npm run publish:firefox	Generate release version and publish to Firefox Addons. Requires necessary credentials in ./.env.