Selenium JavaScript生成HTML报告：实现内嵌可折叠JSON超链接需求

Instead of linking to local files, you can embed the JSON directly in your HTML report and use vanilla HTML/CSS/JavaScript to create expandable/collapsible sections. This keeps everything self-contained, no external dependencies, and works perfectly on Jenkins Linux.

Here's how to implement it step by step:

1. Update Your Report HTML Structure #

For each passed test result, replace the local file link with a toggle button and a hidden div containing your formatted JSON. Here's a sample snippet you can generate programmatically:

<div class="test-result passed">
  <h4>Test Case: {{testName}}</h4>
  <p>Status: <span class="status passed">Passed</span></p>
  <!-- Toggle button -->
  <button class="toggle-btn">Show JSON Details</button>
  <!-- Hidden JSON content -->
  <div class="json-container hidden">
    <pre>{{formattedJson}}</pre>
  </div>
</div>

When generating this in JavaScript, replace {{testName}} with your test's name, and {{formattedJson}} with the result of JSON.stringify(yourTestData, null, 2) to get nicely indented, readable JSON.

2. Add Inline CSS for Styling #

Include this CSS in the <head> of your report to handle visibility and clean styling:

<style>
.test-result {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.status.passed {
  color: #2ecc71;
  font-weight: bold;
}

.toggle-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
}

.toggle-btn:hover {
  background-color: #2980b9;
}

.json-container {
  margin-top: 10px;
}

.json-container pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
}

.hidden {
  display: none;
}
</style>

3. Add Vanilla JavaScript for Toggle Functionality #

Include this script at the end of your report (right before </body>) to make the buttons work:

<script>
// Add click event listeners to all toggle buttons
document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const jsonContainer = btn.nextElementSibling;
    // Toggle the hidden class to show/hide content
    jsonContainer.classList.toggle('hidden');
    // Update button text to reflect current state
    btn.textContent = jsonContainer.classList.contains('hidden') 
      ? 'Show JSON Details' 
      : 'Hide JSON Details';
  });
});
</script>

4. Integrate with Your Selenium JavaScript Report Generation #

When building your report string in code, replace your existing local file link logic with the toggle button and JSON container. For example:

// Sample code snippet (adjust to match your existing report generation flow)
function generateTestResultHtml(test) {
  const formattedJson = JSON.stringify(test.details, null, 2);
  return `
    <div class="test-result passed">
      <h4>Test Case: ${test.name}</h4>
      <p>Status: <span class="status passed">Passed</span></p>
      <button class="toggle-btn">Show JSON Details</button>
      <div class="json-container hidden">
        <pre>${formattedJson}</pre>
      </div>
    </div>
  `;
}

Why This Works for Jenkins #

• No local file dependencies: All JSON content is embedded directly in the single HTML report file.
• Self-contained: CSS and JavaScript are inline, so you don't need to manage external assets.
• Cross-platform compatibility: Works seamlessly on Linux (Jenkins) just as it does on your local machine, since it's pure HTML/CSS/JS.

You can publish this self-contained HTML report directly in Jenkins using standard plugins without worrying about cross-platform file path issues or missing local files.

内容的提问来源于stack exchange，提问作者Rohit