Skip to main content
The Chrome Extension is how you capture real UI elements and send them into Samelogic. This guide covers setup, capture workflows, and best practices so your data is clean and reusable.

​
What you need

  • A Samelogic account and project
  • The Chrome Extension installed
  • Access to the environment you want to capture (prod, staging, or test)

​
Install and sign in

  1. Install the Chrome Extension from the Chrome Web Store.
  2. Sign in with your Samelogic account.
  3. Select the project where captures should land.

​
Capture an element

  1. Open the target page in Chrome.
  2. Click the Chrome Extension icon and start capture mode.
  3. Hover to preview the highlight and confirm the right element.
  4. Click to capture the element and its hierarchy.
  5. Review selectors and stability score before saving.

​
Review selector quality

Stable selectors reduce flaky tests and regressions.
  • Prefer data attributes (data-testid, data-qa) when available.
  • Avoid dynamic classes that change per build.
  • Use fallback selectors when the stability score is low.

​
Add context before saving

Add enough detail so other teams can reproduce the issue quickly.
  • Name the element clearly (feature + location).
  • Add tags for product area or release.
  • Attach notes describing the behavior you observed.

​
Save and share

  • Save to the correct project or workspace.
  • Share the element link in a ticket or Slack thread.
  • Attach to a bug report if you are in triage.

​
Best practices

  • Capture from stable environments when possible.
  • Use consistent naming conventions across teams.
  • Keep captures focused on the smallest element that reproduces the issue.

​
Troubleshooting

  • If capture fails, check for iframe or cross-origin restrictions.
  • If selectors are unstable, add or request data-test attributes.
  • If the overlay is misaligned, try a hard refresh and retry.