如何在Angular/Protractor端到端测试中使用preview-email？

我之前也碰到过一模一样的问题！Protractor控制的Chrome实例属于自动化测试专用环境，而opn库默认会调用系统默认浏览器打开预览，自然没法关联到测试窗口里。这里分享几个我亲测有效的解决方案：

方案1：绕过opn，直接获取预览HTML内容 #

preview-email本身支持生成预览HTML但不自动打开，我们可以在Express端做环境判断，把预览内容/路径暴露给测试用例：

• 修改Express端代码：在发送邮件的逻辑里，当检测到是测试环境时，禁用opn的自动打开，转而把生成的HTML内容或者文件路径存储/返回：

  const previewEmail = require('preview-email');
  
  async function sendEmailWithPreview(emailOptions) {
    const previewOptions = {
      open: process.env.NODE_ENV !== 'test' // 测试环境下不自动打开
    };
    const previewResult = await previewEmail(emailOptions, previewOptions);
    
    // 测试环境下，把预览的HTML路径存入全局变量或临时接口
    if (process.env.NODE_ENV === 'test') {
      global.testEmailPreviewPath = previewResult.filename;
      // 或者新增临时API供测试调用：
      // app.get('/test/email-preview', (req, res) => res.sendFile(previewResult.filename));
    }
  }
  

• 在Protractor测试中获取并验证：发起请求拿到预览内容，甚至可以注入到当前测试页面查看：

  it('should generate correct email preview', async () => {
    // 触发应用内的邮件发送逻辑
    await element(by.id('send-email-btn')).click();
    
    // 请求Express端的临时接口获取预览HTML
    const previewHtml = await browser.executeAsyncScript((callback) => {
      fetch('/test/email-preview')
        .then(res => res.text())
        .then(html => callback(html));
    });
    
    // 断言邮件核心内容是否符合预期
    expect(previewHtml).toContain('尊敬的用户');
    expect(previewHtml).toContain('您的验证码是：123456');
    
    // 可选：把HTML注入到当前页面（仅调试用）
    await browser.executeScript((html) => {
      document.body.innerHTML = html;
    }, previewHtml);
  });
  

方案2：让opn使用Protractor的Chrome实例 #

如果一定要在测试窗口里打开预览，可以通过Chrome的远程调试端口关联实例：

• 在Protractor配置中开启调试端口：

  exports.config = {
    capabilities: {
      browserName: 'chrome',
      chromeOptions: {
        args: ['--remote-debugging-port=9222'] // 指定固定调试端口
      }
    }
  };
  

• 修改Express端的opn配置：测试环境下指定用这个调试端口的Chrome打开预览：

  const previewOptions = {
    open: process.env.NODE_ENV !== 'test',
    ...(process.env.NODE_ENV === 'test' && {
      app: ['google-chrome', '--remote-debugging-port=9222']
    })
  };
  await previewEmail(emailOptions, previewOptions);
  

不过这个方案有个小局限：调试端口固定的话，同一时间只能运行一组测试，不然会端口冲突，更适合本地调试场景。

方案3：直接验证邮件生成逻辑（跳过打开预览） #

如果你的核心需求是验证邮件内容的正确性，而非打开预览的动作，完全可以跳过打开步骤，直接调用生成逻辑做断言：

// 在测试文件里直接调用preview-email生成HTML，无需走Express接口
const previewEmail = require('preview-email');
const fs = require('fs');

it('should generate correct email content', async () => {
  const emailOptions = {
    from: 'test@example.com',
    to: 'user@example.com',
    subject: '测试邮件',
    html: '<h1>Hello World</h1>'
  };
  
  const previewResult = await previewEmail(emailOptions, { open: false });
  const previewHtml = fs.readFileSync(previewResult.filename, 'utf8');
  
  expect(previewHtml).toContain('Hello World');
  expect(previewHtml).toContain('user@example.com');
});

这个方案最简洁高效，适合批量自动化测试场景。

我个人最推荐方案1，既能在测试中严谨验证内容，又能灵活查看预览效果，完美适配Protractor的自动化环境~

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