建议@description的markdown文档中支持流程图

cenfun / monocart-reporter

A playwright test reporter (Node.js)

https://cenfun.github.io/monocart-reporter/

MIT License

200 stars 11 forks source link

建议@description的markdown文档中支持流程图 #89

Closed jiawen94 closed 8 months ago

jiawen94 commented 8 months ago

你好晨风：我最近在使用customFieldsInComments的特性，在测试报告中展示文档信息的功能很有用。不过我有时候会把流程图和网络拓扑图也加入到注释里面，这似乎需要mermaid的支持。比如以下写法⬇️

graph LR;
  A(ipsec subnet A)<-.->B(ipsec a);
  B(ipsec a)<-- ipsec tunnel -->C(ipsec b);
  C(ipsec b)<-.->D(ipsec subnet b)

目前测试报告还不支持这种写法的展示，请问是否有计划丰富markdown的功能？

cenfun commented 8 months ago

看起来是个非常不错的功能但看了一下mermaid的npm包，有22M之大，https://www.npmjs.com/package/mermaid?activeTab=code 当然运行时能不需要这么大，但也不大可能打包进monocart-reporter里面因为我不是很熟mermaid，简单看了下他的使用，也许有办法 1，在线方案，就是只保存原始的markdown内容，然后渲染时，通过参数传到iframe去绘图，iframe里面需要自行实现 2，在生成报告前，提前将markdown内容生成svg，其实就是一张图片，然后在报告里直接显示图片，这样没有交互功能不知道你有什么想法

cenfun commented 8 months ago

发现一种新方案就是，自定义库的地址

<!DOCTYPE html>
<html lang="en">
  <body>
    <pre class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
    </pre>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    </script>
  </body>
</html>

默认可以使用cdn，也可以传入自己的地址，甚至本地地址

jiawen94 commented 8 months ago

方案1:目前看应该效果是最好的，但是实现可能是最难的。不建议在这种期望型需求上耗费太多精力。方案2:虽然没有方案1效果好，但“有“比“没有”好方案3:如果渲染图表，这个依赖外部的库，对于离线似乎不是很友好（要本地额外部署？）所以我觉得：如果方案1能简单实现，那最好，如果比较麻烦，方案二也是可以的

cenfun commented 8 months ago

测试了，方案3其实是最好的，它对原来的报告破坏最小，用起来最简单，加载js不需要部署，cdn或者本地文件都可以，加载js没有任何跨域问题，正在实现和测试中

cenfun commented 8 months ago

try new version monocart-reporter@2.3.0

Enable Mermaid

// playwright.config.js
module.exports = {
 reporter: [
    ['monocart-reporter', {  
        name: "My Test Report",
        outputFile: './test-results/report.html',
        mermaid: {
            // mermaid script url, using mermaid CDN: https://www.jsdelivr.com/package/npm/mermaid
            scriptSrc: 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js',
            // mermaid config: https://mermaid.js.org/config/schema-docs/config.html
            config: {
                startOnLoad: false
            }
        }
    }]
]
};

Write Mermaid code in markdown:


/**
* @description Sequence diagram for Monocart Reporter
```mermaid
flowchart LR

A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

*/
test('case description', () => {

});

jiawen94 commented 8 months ago

谢谢，效果很棒！另外，请问下 startOnLoad: false这个参数是什么含义

cenfun commented 8 months ago

mermaid 的一个配置，startOnLoad应该没啥用，就是加载完是否自动渲染，详情见这里 https://mermaid.js.org/config/setup/modules/mermaidAPI.html 好像可以定义很多图的样式什么的