关于在Cypress中创建基础纯文本测试报告及接入邮件友好型极简HTML报告工具的技术咨询

Great questions! Let's tackle each one step by step:

1. Creating a Basic Plain Text Test Report in Cypress #

Cypress uses Mocha under the hood, so you have a few straightforward options for plain text reports:

• Use Mocha's built-in spec reporter
  This is the simplest out-of-the-box solution—it outputs a clean, human-readable plain text summary directly to your terminal. To enable it, update your cypress.config.js (or .ts) file:

  module.exports = defineConfig({
    e2e: {
      reporter: 'spec',
      // Your other Cypress configs...
    },
  });
  

  When you run cypress run, results will print to the terminal. To save them to a file instead, redirect the output:

  cypress run > test-results.txt
  

• Build a custom minimal plain text reporter
  If you want something even more stripped down (e.g., just test names + statuses plus a final summary), write a tiny custom reporter. Create a file like plain-text-reporter.js in your project:

  module.exports = function (runner) {
    // Log individual test results as they finish
    runner.on('test end', (test) => {
      const statusIcon = test.state === 'passed' ? '✓' : test.state === 'failed' ? '✗' : '⚠';
      console.log(`${statusIcon} ${test.fullTitle()}`);
    });
  
    // Log final summary when all tests finish
    runner.on('end', () => {
      console.log('\n=== Test Summary ===');
      console.log(`Total: ${runner.total} | Passed: ${runner.stats.passes} | Failed: ${runner.stats.failures} | Skipped: ${runner.stats.pending}`);
    });
  };
  

  Then reference it in your Cypress config:

  module.exports = defineConfig({
    e2e: {
      reporter: './plain-text-reporter.js',
      // Your other Cypress configs...
    },
  });
  

2. Minimal HTML Report for Email (Test Name + Status) #

I totally get why Mochawesome feels overkill for this use case—those reports are packed with features you don’t need for a simple email update. Here are three practical, lightweight solutions:

Option 1: Custom Mocha HTML Reporter (Table-Based, Full Control) #

Build your own super simple reporter that generates a clean HTML table with exactly the info you need. This ensures full compatibility with email clients (no external dependencies).

Create a file minimal-html-reporter.js:

const fs = require('fs');

module.exports = function (runner) {
  const testResults = [];

  // Capture each test's name and status
  runner.on('test end', (test) => {
    testResults.push({
      name: test.fullTitle(),
      status: test.state.toUpperCase()
    });
  });

  // Generate HTML report when tests finish
  runner.on('end', () => {
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { border-collapse: collapse; width: 100%; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            .PASS { color: #27ae60; font-weight: bold; }
            .FAIL { color: #e74c3c; font-weight: bold; }
          </style>
        </head>
        <body>
          <h2>Cypress Test Results</h2>
          <table>
            <tr>
              <th>Test Name</th>
              <th>Status</th>
            </tr>
            ${testResults.map(result => `
              <tr>
                <td>${result.name}</td>
                <td class="${result.status}">${result.status}</td>
              </tr>
            `).join('')}
          </table>
          <p><em>Generated on: ${new Date().toLocaleString()}</em></p>
        </body>
      </html>
    `;

    fs.writeFileSync('./minimal-test-report.html', html);
    console.log('Minimal HTML report saved to ./minimal-test-report.html');
  });
};

Update your Cypress config to use this reporter:

module.exports = defineConfig({
  e2e: {
    reporter: './minimal-html-reporter.js',
    // Your other Cypress configs...
  },
});

Option 2: Trim Down Mochawesome (If You Want to Stick With It) #

If you already have Mochawesome set up, you can strip out all the extra fluff with a config file. Create mochawesome.config.js:

module.exports = {
  reportTitle: 'Cypress Test Results',
  showPassed: true,
  showFailed: true,
  showPending: false,
  showSkipped: false,
  charts: false,
  code: false,
  inlineAssets: true, // Critical for email—embeds CSS/JS directly
  reportPageTitle: 'Cypress Test Results',
};

This turns off charts, code snippets, and extra metadata, leaving a much cleaner report that works well in emails.

Option 3: Use Cypress JSON Results to Generate HTML #

Run tests to get a JSON results file, then convert it to a minimal HTML report with a simple Node script:

1. Save test results to JSON:

   cypress run --reporter json > test-results.json
   

2. Create generate-email-report.js:

   const fs = require('fs');
   const results = JSON.parse(fs.readFileSync('./test-results.json', 'utf8'));
   
   const html = `
     <!DOCTYPE html>
     <html>
       <head>
         <style>
           body { font-family: sans-serif; padding: 1rem; }
           table { width: 100%; border-spacing: 0; }
           td, th { padding: 0.5rem; border-bottom: 1px solid #eee; }
           th { background: #f5f5f5; }
           .passed { color: #27ae60; font-weight: bold; }
           .failed { color: #e74c3c; font-weight: bold; }
         </style>
       </head>
       <body>
         <h3>Test Summary: ${results.stats.passes} Passed, ${results.stats.failures} Failed</h3>
         <table>
           <tr><th>Test</th><th>Status</th></tr>
           ${results.tests.map(test => `
             <tr>
               <td>${test.title.join(' > ')}</td>
               <td class="${test.state}">${test.state.charAt(0).toUpperCase() + test.state.slice(1)}</td>
             </tr>
           `).join('')}
         </table>
       </body>
     </html>
   `;
   
   fs.writeFileSync('./email-report.html', html);
   

3. Run the script after your test suite:

   node generate-email-report.js
   

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