WebdriverIO |如何在nodemailer发送的电子邮件正文中显示带有css的wdio-timeline-reporter或wdio-html-reporter生成文件的html内容答案

【问题标题】：WebdriverIO | how to show html content of wdio-timeline-reporter or wdio-html-reporter generated file with css in the email body sent by nodemailerWebdriverIO |如何在nodemailer发送的电子邮件正文中显示带有css的wdio-timeline-reporter或wdio-html-reporter生成文件的html内容
【发布时间】：2021-10-15 19:47:45
【问题描述】：

我正在尝试发送文件的 html 内容（下图中的 report.html），并且该文件在浏览器中完美打开，因为从文件夹中打开它时 css 的引用工作正常。但是，当我尝试使用 nodemailer 将此文件作为 html 正文发送时，它只会丢失其所有样式，并且在电子邮件中我只是收到一封纯文本电子邮件，如下所示。

谁能告诉我如何告诉 nodemailer 该文件的所有 css 都存在于 html-reports 文件夹中，并且它应该出现在与在浏览器中打开时相同的电子邮件正文中。

如果有人使用 WDIO 并通过电子邮件分享任何此类信息，请与我分享此信息。

我正在使用最新版本的 WDIO 顺便说一句，即。 V7.7（黄瓜框架）

基本上我想实现以下用例-

运行测试 html 报告后会出现所有黄瓜场景通过/失败/跳过以及错误跟踪
我想在电子邮件正文中分享此信息，而不是作为附件，并且我的电子邮件正文应正确设置样式

非常感谢！

【问题讨论】：

标签： node.js typescript npm nodemailer webdriver-io

【解决方案1】：

要实现您提到的结果，您必须使用internal CSS，它位于report.html 的head 部分，位于style 元素内。

因此，如果您有指向外部 CSS 的链接，您希望将其替换为 report-styles.css 中的实际 CSS，并将其放置在样式元素中。

report-styles.css：

h1 {
  color: blue;
}
p {
  color: red;
}

report.html之前：

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="report-styles.css">
 </head>
 <body>

  <div>Your report</div>

 </body>
</html>

用文件中的实际 CSS 替换 CSS 链接

report.html 之后：

<!DOCTYPE html>
<html>
 <head>
  <style>
    h1 {
     color: blue;
    }
    p {
     color: red;
    }
  </style>
 </head>
 <body>

   <div>Your report</div>

 </body>
</html>

然后您可以将report.html 添加到您的电子邮件中，所有样式都将在那里，而无需引用该外部文件。

这将需要您在报告完成后和发送电子邮件之前进行一些额外的编码。

您可以使用 gulp 之类的东西为您进行替换或编写您自己的代码进行替换。

gulp.js example:

var gulp = require('gulp');
var replace = require('gulp-replace');
var fs = require('fs');

function getCSSFilename(linkTag) {
  var hrefValue = /href\=\"([A-Za-z0-9/._]*)\"/g;
  var cssFilename = linkTag.match(hrefValue);
  cssFilename = cssFilename[0].replace("href=\"", "").replace("\"", "");
  return cssFilename;
}

gulp.task('inject-styles', function () {
  return gulp.src("./report/report.html")
      .pipe(replace(/<link rel="stylesheet" href="[^"]*"*>/g, function(linkTag) {
          var style = fs.readFileSync(`.${getCSSFilename(linkTag)}`, 'utf8');
          return '<style>\n' + style + '\t</style>';
      }))
    .pipe(gulp.dest('./report'));
});

希望这足以让您知道如何实现您所描述的目标。

【讨论】：