Skip to content

Improve SEO targeting QA and testing traffic #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
morvader wants to merge 1 commit into
base: master
Choose a base branch
from
+137 −43
Open

Improve SEO targeting QA and testing traffic #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion HTMLReport/preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exploratory Testing Session Report</title>
<title>Exploratory Testing Session Report — QA Bug & Test Annotation Log</title>
<meta name="description" content="Exploratory testing session report. View bugs, notes, ideas and questions captured during manual QA testing, with annotated screenshots, URLs and timestamps.">
<meta name="keywords" content="exploratory testing, manual testing, QA report, bug report, test session, software testing, quality assurance, screenshot annotation, test documentation">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Exploratory Testing Session Report">
<meta property="og:description" content="QA session report with bugs, notes, ideas and annotated screenshots captured during exploratory testing.">
<meta property="og:type" content="website">
<link rel="stylesheet" href="preview.css">
<script type="module" src="preview.js"></script>
<script src="../lib/chart.umd.js"></script>
Expand Down
168 changes: 128 additions & 40 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,152 @@
# A Chrome Extension for Exploratory Testing
# Exploratory Testing Chrome Extension — QA Bug Reporter & Test Session Manager

A Chrome extension designed for making web exploratory testing easier
> A free Chrome extension for manual and exploratory testing. Capture bugs, ideas, notes and questions with annotated screenshots — without breaking your testing flow.

**Features**
[![Chrome Web Store](https://img.shields.io/badge/Chrome%20Web%20Store-Install-blue?logo=google-chrome)](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj)
[![Version](https://img.shields.io/badge/version-4.1.0-green)](https://github.com/morvader/ExploratoryTestingChromeExtension/releases)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

- Report bugs, ideas, notes and questions easily
- Take screenshots during the session. Keep focused
- URL will be tracked automatically
- See session results in a report
- Export and import sessions
- Export session to JSON, CSV or HTML
---

## What Is Exploratory Testing?

**Exploratory testing** is a manual QA technique where testers simultaneously design and execute tests, learning about the application as they go. It's especially effective for uncovering edge cases, usability bugs, and unexpected behavior that scripted test cases miss.

This extension was built specifically to support exploratory testing sessions: it stays out of your way while you test, and lets you record findings instantly with a single click.

---

## Key Features for QA Testers

| Feature | Description |
|---|---|
| **Bug reporting** | Log bugs instantly with description and screenshot |
| **Annotated screenshots** | Draw arrows, boxes and text directly on screenshots |
| **Notes & ideas** | Capture observations and improvement ideas mid-session |
| **Questions** | Flag questions for developers or product owners |
| **Automatic URL tracking** | Every annotation records the page URL automatically |
| **Session management** | Start, pause, reset or export full testing sessions |
| **HTML test report** | Visual session summary with charts and filterable table |
| **CSV export** | Open your test session data in Excel or any spreadsheet |
| **JSON export/import** | Share or archive full sessions with all metadata |
| **Zero context switching** | Annotate without leaving the page you're testing |

---

## Why Use This for Manual & Exploratory Testing?

- **QA teams** running sprint testing cycles need a fast way to capture findings without filling bug trackers mid-session.
- **Solo testers** doing acceptance testing or regression checks can record everything in one place.
- **UX reviewers** and **product teams** use it to collect notes and ideas during demos or reviews.
- **Bug triage** is easier with screenshots already annotated and linked to the original URL.

---

## Screenshots

**Add a bug, note, idea or question in one click — stay focused on testing**

<img src="./screenshots/new_Annotation.PNG" width="440" alt="Exploratory testing extension popup showing bug, note, idea and question buttons">

**View a full session report with charts, filters and export options**

<img src="./screenshots/report.PNG" width="800" alt="HTML test session report with annotation table, type distribution chart and export buttons">

---

## Installation

Install directly from the **[Chrome Web Store](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj)**.

Or load unpacked for development — see [Development Setup](#development-and-testing) below.

Install from [Chrome Store](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj)
---

## How It Works

1. **Start a testing session** — open the extension popup and begin exploring the application under test.
2. **Record findings instantly** — click Bug / Note / Idea / Question, add a description, optionally capture and annotate a screenshot.
3. **Keep testing** — the extension tracks URLs automatically. All annotations are saved to local storage.
4. **Export your session** — generate an HTML report, export to CSV for your test management tool, or save as JSON.

---

**Annotate any thought while you test easily and take screenshots without changing context**
## Annotation Types

<img src="./screenshots/new_Annotation.PNG" width="440">
| Type | Use case |
|---|---|
| 🐛 **Bug** | Defect or unexpected behavior found during testing |
| 📝 **Note** | Observations, context or things to follow up on |
| 💡 **Idea** | Improvement suggestions or new test scenarios |
| ❓ **Question** | Clarifications needed from devs or product owners |

---

**View session results in a report**
## Export & Reporting

<img src="./screenshots/report.PNG" width="800">
- **HTML Report** — standalone file with embedded screenshots, filterable annotation table and session statistics chart. Shareable with stakeholders without any dependencies.
- **CSV Export** — compatible with Excel, Google Sheets, Jira, TestRail and other test management tools.
- **JSON Export/Import** — full session serialization for archiving, sharing between testers, or re-importing later.

---

## Development and Testing

This section provides instructions for setting up the project locally for development and running tests.
### Prerequisites

- [Node.js](https://nodejs.org/) (includes npm)

### Project Setup

1. **Prerequisites**: Ensure you have [Node.js](https://nodejs.org/) installed (which includes npm).
2. **Clone the Repository**:
```bash
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
```
*(Using a common placeholder format for the repo URL. The user can update this if they wish).*
3. **Install Dependencies**:
```bash
npm install
```
This will install Jest, Babel, and other necessary development dependencies as defined in `package.json`.
```bash
git clone https://github.com/morvader/ExploratoryTestingChromeExtension.git
cd ExploratoryTestingChromeExtension
npm install
```

### Running Tests

The project uses [Jest](https://jestjs.io/) for unit testing.
```bash
npm test # Run all Jest unit tests
npx jest # Run Jest directly
npx jest --watch # Watch mode for TDD
```

> **Known issue:** `test/spec/ExportSessionCSV.test.js` has a syntax error from a Jest migration and will fail. All other test suites pass.

### E2E Tests

```bash
npx playwright test # Run Playwright end-to-end tests
```

1. **Execute Tests**:
```bash
npm test
```
Alternatively, you can run Jest directly:
```bash
npx jest
```
2. **Test Results**: Most tests should pass.
* **Known Issue**: The test suite for `test/spec/ExportSessionCSV.test.js` is currently non-functional due to a syntax error that occurred during the migration to Jest and could not be resolved with available tools. This specific suite will fail or be skipped. All other test suites should pass.
See [TESTING-E2E.md](TESTING-E2E.md) for the full E2E testing guide.

### Build for Chrome Web Store

```powershell
.\genetareZip.ps1 # Creates a timestamped .zip ready for upload
```

---

## Tech Stack

- **Manifest V3** Chrome Extension
- jQuery 1.11.3 + Bootstrap CSS (popup UI)
- Chart.js (session report charts)
- JSZip (screenshot ZIP download)
- Jest 29 + Babel (unit tests)
- Playwright (E2E tests)

---
_PS: I'm not a web designer, so any help with web design or UX will be appreciated._

twitter: @morvader
## Related Topics

`exploratory-testing` · `manual-testing` · `qa-tool` · `bug-reporting` · `chrome-extension` · `test-session-management` · `screenshot-annotation` · `software-testing` · `quality-assurance` · `test-automation`

---

_Contributions welcome. Not a web designer — UI/UX improvements are especially appreciated._

Twitter: [@morvader](https://twitter.com/morvader)
4 changes: 2 additions & 2 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"manifest_version": 3,
"name": "Exploratory Testing Extension",
"name": "Exploratory Testing - QA Bug Reporter",
"version": "4.1.0",
"description": "Chrome extension for exploratory testing",
"description": "Manual testing tool for QA teams. Report bugs, ideas & notes with annotated screenshots. Export sessions as CSV, JSON or HTML.",
"permissions": [
"storage",
"tabs",
Expand Down
Loading