Create Playwright Dashboards

Important

All of the files in this section should be created in the gh-pages branch.

Create Playwright Branch List Snippet

Create the file _includes/playwright-branch-list.html to display Playwright report summaries for all of the branches. This is an example of what we are using.

Tip

_includes/playwright-branch-list.html

This snippet loops through all of the branches and displays the latest Playwright report summary for each branch.

{% if site.data.playwright-reports.branches.size > 0 %}
 <!-- if there are branches in the data, display the summaries for the branches -->
 {% for branch in site.data.playwright-reports.branches %}
   <!-- loop through the branches and assign the key as the branch_name -->
   {% assign branch_name = branch[0] %}
   <!-- capture creates a link using the branch_name -->
   {% capture branch_link %}/playwright-reports/branches/{{branch_name}}{% endcapture %}
   <div class="branch-header">
     <h3>{{ branch_name }}</h3>
     <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
     <a href="{{ branch_link | relative_url }}">View Previous Runs</a>
   </div>

   <!-- use the custom key_list filter to get all of the run_ids in the branch, then reverse the list and get the first one -->
   {% assign latest_run_id = site.data.playwright-reports.branches[branch_name] | key_list | reverse | first %}
   {% assign data = site.data.playwright-reports.branches[branch_name][latest_run_id] %}
   <!-- capture creates a link to the actual report file-->
   {% capture report_link %}/playwright-reports/branches/{{branch_name}}/{{latest_run_id}}.html{% endcapture %}
   <!--
     Include the html snippet in `_includes/playwright-summary.html` with the parameters the `branch_name` variable as `branch`,
     the `latest_run_id` variable as `run_id`, the `data` variable as `data`, and the `report_link` variable as `url`.
   -->
   {% include playwright-summary.html branch=branch_name run_id=latest_run_id data=data url=report_link %}
 {% endfor %}
{% else %}
 <!-- if there are no branches in the data, display a message that there is nothing to display -->
 <div>There are currently no branch reports.</div>
{% endif %}

Create Playwright Branch Index Layout

Create the directory _layouts, if it doesn’t already exist. Create the file _layouts/playwright-branch.html to display Playwright report information for a specific branch.

Tip

_layouts/playwright-branch.html

This layout retrieves all the runs for the branch and displays the Playwright report summaries newest to oldest.

---
layout: default
---

<!-- use the custom key_list filter to get the run ids for the branch and sort them by newest to oldest -->
{% assign run_ids = site.data.playwright-reports.branches[page.branch] | key_list | reverse %}
{% for run_id in run_ids %}
 <!-- loop through the run ids -->
 {% assign data = site.data.playwright-reports.branches[page.branch][run_id] %}
 <!-- capture creates a link using the page.branch variable and the run id -->
 {% capture report_link %}/playwright-reports/branches/{{page.branch}}/{{run_id}}.html{% endcapture %}
 <!--
   Include the html snippet in `_includes/playwright-summary.html` with the parameters the `page.branch` variable as `branch`,
   the `run_id` variable as `run_id`, the `data` variable as `data`, and the `report_link` variable as `url`.
 -->
 {% include playwright-summary.html branch=page.branch run_id=run_id data=data url=report_link %}
{% endfor %}

Create Playwright Branch Index Generator

Create the file _plugins/playwright-branch-index-generator.rb to automatically generate an index.html, using the Playwright branch layout above for each branch. The file will be created inside the branch specific file, for instance /playwright-reports/branches/[branch_name]/index.html.

module Jekyll
  class BranchIndex < Page
    def initialize(site, base, dir, branch)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
			
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'playwright-branch.html')
      self.data['branch'] = branch
    end
  end

  class BranchIndexGenerator < Generator
    safe true

    def generate(site)
      if site.layouts.key? 'playwright-branch'
        dir = "/playwright-reports/branches"
        site.data["playwright-reports"]["branches"].each_key do |branch|
          Jekyll.logger.info "Branch Index: Generating index for #{branch}"
          site.pages << BranchIndex.new(site, site.source, File.join(dir, branch), branch)
        end
      end
    end
  end
end

Create Playwright Branch Page

Create the file playwright-branches.markdown to display Playwright report summaries for all of the branches. It will be accessible at /playwright-reports/branches. This is an example of what we are using.

Tip

playwright-branches.markdown

This example uses the snippet created above to list the latest summaries for each branch.

---
# the header for the page
title: "Playwright Reports for Branches"
# the link to page https://jekyllrb.com/docs/permalinks/
permalink: playwright-reports/branches/
---

<div>
 <!-- Include the html snippet in `_includes/playwright-branch-list.html` -->
 {% include playwright-branch-list.html %}
</div>

Create Playwright Index Page

Create the file playwright-reports.markdown to display the Playwright report summary for main and the latest summaries for each branch. It will be accessible at /playwright-reports. This is an example of what we are using.

Tip

playwright-reports.markdown

This example uses the Playwright summary snippet to display the Playwright report summary for main and the Playwright branch list snippet to display the latest Playwright reports for each branch.

---
# the header for the page
title: "Playwright Reports"
# the link to page https://jekyllrb.com/docs/permalinks/
permalink: playwright-reports/
---

<div>
 <h2>Main</h2>
 <!-- Get the data from `_data/playwright-reports/main.json` and assign it to a variable called `data`. -->
 {% assign data = site.data.playwright-reports.main %}
 <!-- 
   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 class="branch-reports">
   <h2>Latest Reports from Branches</h2>
   <!-- Include the html snippet in `_includes/playwright-branch-list.html` -->
   {% include playwright-branch-list.html %}
 </div>
</div>

Update the Index Page to Display Playwright Reports

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

Tip

index.markdown

---
---

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

   <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 playwright.css styling to the Playwright pages. Also add the playwright-reports.markdown to the header_pages. Optionally, if you are link back to the run in your GitHub repository, add github_url with the link to your repository.

#... previous configurations

# add a link to your repository if you want to be able to link your run ids back to the action in the repo
github_url: "https://github.com/FearlessSolutions/publish-playwright"

# 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:
  - playwright-reports.markdown

defaults:
  -
    scope:
      path: ""
      type: "pages"
    values:
      layout: "page"
  -
    scope:
      path: "index.markdown"
    values:
      custom_css: [site,playwright]
  -
    scope:
      path: "playwright-*.markdown"
      type: "pages"
    values:
      custom_css: [site,playwright]
  -
    scope:
      path: "playwright-reports/branches/*"
      type: "pages"
    values:
      layout: "playwright-branch"
      custom_css: [site,playwright]