Create Code Coverage Dashboard - FearlessSolutions/publish-playwright GitHub Wiki

Create Coverage Index Page

Create the file coverage.markdown to display the coverage report summary for main. It will be accessible at /coverage-report. This is an example of what we are using.

Tip

coverage.markdown

This example uses the coverage summary snippet to display the coverage report summary for main.

---
# the header for the page
title: "Code Coverage Report"
# the link to page https://jekyllrb.com/docs/permalinks/
permalink: coverage-report/
---

<div>
 <!-- Get the data from the `total` field in `_data/coverage/coverage-summary.json` and assign it to a variable called `total`. -->
 {% assign total = site.data.coverage.coverage-summary.total %}
 <!-- Include the html snippet in `_includes/coverage-summary.html` with the parameters "main" as `branch` and the totals from the data as `total`. -->
 {% include coverage-summary.html branch="main" total=total %}
</div>

Update the Index Page to Display Code Coverage Reports

Open index.markdown and add the code coverage reports. This is an example of what we are using.

Tip

index.markdown

---
---

<div class="reports">
 <div class="main-reports">
   <h2>Main</h2>

   <h3>Code Coverage</h3>
   <!--
     Jekyll provides access to YAML, JSON, CSV, and TSV in the `_data` directory using `site.data`. It supports retrieving data nested in directories, files, and objects. https://jekyllrb.com/docs/datafiles/

     Get the data from the `total` field in `_data/coverage/coverage-summary.json` and assign it to a variable called `total`.
   -->
   {% assign total = site.data.coverage.coverage-summary.total %}
   <!--
     Jekyll uses includes to create reusable snippets of html code. Data can be passed through to the snippet using parameters. https://jekyllrb.com/docs/includes/
   
     Include the html snippet in `_includes/coverage-summary.html` with the parameters "main" as `branch` and the totals from the data as `total`.
   -->
   {% include coverage-summary.html branch="main" total=total %}

   <!-- Playwright dashboard added earlier -->
   <h3>Playwright</h3>
   <!-- Get the data from `_data/playwright-reports/main.json` and assign it to a variable called `data`. -->
   {% assign data = site.data.playwright-reports.main %}
   <!-- Jekyll uses Liquid filters to provide helper functions. https://jekyllrb.com/docs/liquid/filters/ -->
   <!--
     Include the html snippet in `_includes/playwright-summary.html` with the parameters "main" as `branch`,
     the data variable as `data`, and "/playwright-reports/main.html" as `url`.
   -->
   {% include playwright-summary.html branch="main" data=data url="/playwright-reports/main.html" %}
 </div>

 <div class="branch-reports">
   <h2>Latest Reports from Branches</h2>
   <!-- Include the html snippet from `_includes/playwright-branch-list.html` -->
   {% include playwright-branch-list.html %}
 </div>
</div>

Update Styling in Configurations

Open _config.yml to add the following to the defaults, which will apply our coverage.css styling to the coverage pages. Also add the coverage.markdown to the header_pages.

#... previous configurations

# If you want to link only specific pages in your header, use this and add the path to the pages
# in order as they should show up.
header_pages:
  - coverage.markdown
  - playwright-reports.markdown # previously added

defaults:
	#... previous default configs
  -
    scope:
      path: "index.markdown"
    values:
      custom_css: [site,playwright,coverage] # added the playwright css in previous steps
  -
    scope:
      path: "coverage.markdown"
    values:
      custom_css: [site,coverage]
	#... playwright default configs
⚠️ **GitHub.com Fallback** ⚠️