Merge pull request #131 from mean-weasel/feat/screenshot-modes

Add configurable screenshot modes

Author: neonwatty

.prettierignore

@@ -9,6 +9,7 @@ node_modules/
 playwright-report/
 test-results/
 coverage/
+.playwright-cli/
 
 # Lock files
 package-lock.json

docs/website/configuration.mdx

@@ -136,6 +136,37 @@ Every feedback submission automatically captures the following system informatio
 
 This information is included in every GitHub Issue body under a "System Info" section, giving your team the context they need to reproduce and fix bugs.
 
+## Screenshot Behavior
+
+Control how screenshots are collected during the feedback flow.
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-screenshot` | `"optional"` | Screenshot mode: `"optional"`, `"auto"`, or `"required"` |
+| `data-screenshot-scale` | `"2"` | Minimum pixel ratio for screenshot captures |
+
+### Screenshot Modes
+
+- **`optional`** -- Shows the screenshot checkbox checked by default. Users can choose full page, element, area, annotate, or skip.
+- **`auto`** -- Automatically captures a full-page screenshot after the form is submitted, without showing the manual screenshot picker.
+- **`required`** -- Requires a screenshot before submission. Users can choose full page, element, or area, but cannot skip the screenshot step.
+
+```html
+<!-- Automatically attach a full-page screenshot -->
+<script
+  src="https://bugdrop.neonwatty.workers.dev/widget.js"
+  data-repo="owner/repo"
+  data-screenshot="auto"
+></script>
+
+<!-- Require a screenshot before submitting feedback -->
+<script
+  src="https://bugdrop.neonwatty.workers.dev/widget.js"
+  data-repo="owner/repo"
+  data-screenshot="required"
+></script>
+```
+
 ## Custom Icon and Label
 
 ### Custom Icon

docs/website/getting-started.mdx

@@ -35,7 +35,7 @@ That is it. No servers to run, no databases to manage, no user accounts required
 ## Key Features
 
 - **One-line installation** -- Add a single script tag and BugDrop is live on your site
-- **Automatic screenshots** -- Users can attach screenshots captured client-side with html2canvas
+- **Configurable screenshots** -- Screenshots can be optional, automatic, or required
 - **System info capture** -- Browser, OS, viewport, language, and URL are automatically included
 - **GitHub-native** -- Issues land directly in your repository with proper labels and formatting
 - **Shadow DOM isolation** -- The widget never conflicts with your site's CSS

e2e/widget.spec.ts

@@ -2376,3 +2376,102 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     await expect(annotationCanvas).toBeVisible({ timeout: 30000 });
   });
 });
+
+test.describe('Screenshot Mode Configuration', () => {
+  const STUB_PNG =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+  async function setupInstalledApp(page: Page) {
+    await page.route('**/api/check/**', async route => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ installed: true }),
+      });
+    });
+  }
+
+  async function setupSuccessfulSubmit(page: Page) {
+    let payload: Record<string, unknown> | null = null;
+    await page.route('**/feedback', async route => {
+      payload = route.request().postDataJSON();
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ success: true, issueNumber: 1, issueUrl: '#', isPublic: false }),
+      });
+    });
+    return () => payload;
+  }
+
+  async function mockSuccessfulCapture(page: Page) {
+    await page.addInitScript(`window.__bugdropMockToPng = function() {
+      window.__autoCaptureCount = (window.__autoCaptureCount || 0) + 1;
+      return Promise.resolve('${STUB_PNG}');
+    };`);
+  }
+
+  async function openForm(page: Page) {
+    const host = page.locator('#bugdrop-host');
+    await expect(host.locator('css=.bd-trigger')).toBeVisible({ timeout: 5000 });
+    await host.locator('css=.bd-trigger').click();
+
+    const getStartedBtn = host.locator('css=[data-action="continue"]');
+    await expect(getStartedBtn).toBeVisible({ timeout: 5000 });
+    await getStartedBtn.click();
+
+    const titleInput = host.locator('css=#title');
+    await expect(titleInput).toBeVisible({ timeout: 5000 });
+    await titleInput.fill('Screenshot mode test');
+    return host;
+  }
+
+  test('auto mode captures and submits a screenshot without the manual screenshot step', async ({
+    page,
+  }) => {
+    await setupInstalledApp(page);
+    await mockSuccessfulCapture(page);
+    const getPayload = await setupSuccessfulSubmit(page);
+
+    await page.goto('/test/?screenshot=auto');
+    const host = await openForm(page);
+
+    await expect(host.locator('css=#include-screenshot')).not.toBeAttached();
+    await host.locator('css=#submit-btn').click();
+
+    await expect(host.locator('css=.bd-success-icon')).toBeVisible({ timeout: 10000 });
+    await expect(host.locator('css=[data-action="capture"]')).not.toBeAttached();
+    await expect(host.locator('css=#annotation-canvas')).not.toBeAttached();
+
+    const payload = getPayload();
+    expect(payload?.screenshot).toBe(STUB_PNG);
+    expect(
+      await page.evaluate(
+        () => (window as Window & { __autoCaptureCount?: number }).__autoCaptureCount
+      )
+    ).toBe(1);
+  });
+
+  test('required mode removes the opt-out path and requires a capture before submit', async ({
+    page,
+  }) => {
+    await setupInstalledApp(page);
+    await mockSuccessfulCapture(page);
+    const getPayload = await setupSuccessfulSubmit(page);
+
+    await page.goto('/test/?screenshot=required');
+    const host = await openForm(page);
+
+    await expect(host.locator('css=#include-screenshot')).not.toBeAttached();
+    await host.locator('css=#submit-btn').click();
+
+    await expect(host.locator('css=[data-action="skip"]')).not.toBeAttached();
+    await host.locator('css=[data-action="capture"]').click();
+
+    await expect(host.locator('css=#annotation-canvas')).toBeVisible({ timeout: 10000 });
+    await host.locator('css=[data-action="done"]').click();
+
+    await expect(host.locator('css=.bd-success-icon')).toBeVisible({ timeout: 10000 });
+    expect(getPayload()?.screenshot).toEqual(expect.stringMatching(/^data:image\/png;base64,/));
+  });
+});

public/test/index.html

@@ -604,7 +604,7 @@ <h2>How It Works</h2>
         var script = document.getElementById('bugdrop-script');
         if (!script) return;
         var params = new URLSearchParams(location.search);
-        var mapping = { theme: 'data-theme', bg: 'data-bg' };
+        var mapping = { theme: 'data-theme', bg: 'data-bg', screenshot: 'data-screenshot' };
         Object.keys(mapping).forEach(function (key) {
           var v = params.get(key);
           if (v != null) script.setAttribute(mapping[key], v);