Feat: Added a copy to clipboard feature for copying the test id.

src/layout/css/style.scss

@@ -116,6 +116,35 @@ span.xpassed,
   }
 }
 
+.col-testId {
+  .copy-btn {
+    margin-left: 8px;
+    padding: 2px 4px;
+    border: $border-width solid #ccc;
+    border-radius: 3px;
+    background-color: transparent;
+    cursor: pointer;
+    font-size: $font-size-text;
+    line-height: 1;
+    vertical-align: middle;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: #f6f6f6;
+      border-color: #999;
+    }
+
+    &:active {
+      background-color: #e6e6e6;
+    }
+
+    &.copied {
+      background-color: #e6e6e6;
+      border-color: #999;
+    }
+  }
+}
+
 /*------------------
  * 2. Extra
  *------------------*/

src/pytest_html/basereport.py

@@ -282,9 +282,12 @@ def _process_report(self, report, duration, processed_extras):
             for extra in data["extras"]
             if extra["format_type"] in ["json", "text", "url"]
         ]
+        escaped_test_id = escape(test_id, quote=True)
         cells = [
             f'<td class="col-result">{outcome}</td>',
-            f'<td class="col-testId">{test_id}</td>',
+            f'<td class="col-testId">{escaped_test_id}'
+            f'<button class="copy-btn" data-test-id="{escaped_test_id}"'
+            f' title="Copy test ID" aria-label="Copy test ID">&#x1F4CB;</button></td>',
             f'<td class="col-duration">{formatted_duration}</td>',
             f'<td class="col-links">{_process_links(links)}</td>',
         ]

src/pytest_html/scripts/main.js

@@ -66,10 +66,14 @@ const renderContent = (tests) => {
     } else {
         rows.forEach((row) => {
             if (!!row) {
-                findAll('.collapsible td:not(.col-links', row).forEach(addItemToggleListener)
+                findAll('.collapsible td:not(.col-links)', row).forEach(addItemToggleListener)
                 find('.logexpander', row).addEventListener('click',
                     (evt) => evt.target.parentNode.classList.toggle('expanded'),
                 )
+                const copyBtn = find('.copy-btn', row)
+                if (copyBtn) {
+                    copyBtn.addEventListener('click', handleCopyTestId)
+                }
                 newTable.appendChild(row)
             }
         })
@@ -78,6 +82,49 @@ const renderContent = (tests) => {
     table.replaceWith(newTable)
 }
 
+const handleCopyTestId = (evt) => {
+    evt.stopPropagation()
+    const button = evt.currentTarget
+    const testId = button.dataset.testId
+
+    const copyToClipboard = () => {
+        // Try modern Clipboard API first
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            return navigator.clipboard.writeText(testId)
+        }
+
+        // Fallback for older browsers / file:// contexts
+        const textArea = document.createElement('textarea')
+        textArea.value = testId
+        textArea.style.position = 'fixed'
+        textArea.style.left = '-999999px'
+        document.body.appendChild(textArea)
+        textArea.select()
+
+        try {
+            document.execCommand('copy')
+            document.body.removeChild(textArea)
+            return Promise.resolve()
+        } catch (err) {
+            document.body.removeChild(textArea)
+            return Promise.reject(err)
+        }
+    }
+
+    try {
+        copyToClipboard().then(() => {
+            button.classList.add('copied')
+            setTimeout(() => {
+                button.classList.remove('copied')
+            }, 500)
+        }).catch(() => {
+            // Silently fail if clipboard API unavailable
+        })
+    } catch (_err) {
+        // Silently fail on unexpected errors
+    }
+}
+
 const renderDerived = () => {
     const currentFilter = getVisible()
     possibleFilters.forEach((result) => {