Set Up Jekyll Code
Important
All of these instructions should be completed in the gh-pages branch.
|- _data
|- coverage
|- playwright-reports
|- branches
|- .gitkeep
|- coverage
|- playwright-reports
|- branches
|- .gitkeep
|- main
|- .gitkeep
The .gitkeep files can be empty files, they are needed to make sure that those files are always in git even if there is no reports inside them.
Open the file Gemfile. Comment out the minima gem--the default theme for new jekyll projects. Add the jekyll-report-dashboard gem--a custom gem created specifically for use in this project. Using the gem removes the necessity of manually copying and pasting from the instructions. If you do not want to use the theme, the files are all available in the gem repository.
# additional Gemfile code
# This is the default theme for new Jekyll sites. You may change this to anything you like.
# gem "minima", "~> 2.5"
gem "jekyll-report-dashboard"
# additional Gemfile code
Run the install command to download the gem locally.
bundle installBecause this theme is relying on tailwind css the normal theme mechanics won’t work, and it is necessary to copy the files from where the gem is installed locally. Run this command to copy the files from the theme directory to your current directory.
rsync -aivP $(bundle info --path jekyll-report-dashboard)/ .Note
If you want to include traces in your Playwright report, you cannot have *.js in the exclude section of _config.yml.
Open the file _config.yml and add the following configurations.
theme
Comment out theme: minima and add theme: jekyll-report-dashboard or replace minima with jekyll-report-dashboard.
nav_pages
Add the pages you want to see in the top nave to the nav_pages list. They will appear in the order listed below. The list below will add navigation buttons for "Coverage Report", “Playwright Reports”, and “Release Notes”.
coverage
Add configurations for coverage limits. The coverage limits should match the coverage limits in your test configuration. These will allow the system to color code the results based on their relation to the coverage limits. Values that are greater than or equal to the limit will be green, values that are within 10% of the limit will be yellow, and values under that will be red.
defaults
Jekyll uses the defaults configuration to define default values for the application. The settings configuration below will use the layout release-note for all of the posts added to the _posts/releases/ directory.
# additional configuration code
#theme: minima
theme: jekyll-report-dashboard
nav_pages:
- coverage.markdown
- playwright-reports.markdown
- releases.markdown
coverage:
lines: 90
functions: 90
statements: 90
branches: 90
defaults:
- scope:
path: "_posts/releases/*"
type: "posts"
values:
layout: "release-note"Make any changes that you would like to your project, the default theme will produce a site that looks like this (once some data and posts are added).
Periodically, there are updates to the jekyll-report-dashboard theme. Run the following command to update all of the installed gems.
bundle updateIf changes are reported to the jekyll-report-dashboard gem, then you can use the command from above to copy the changes into your current directory.
Warning
This command will OVERWRITE any of these files that have been changed locally in your project, if you are trying to keep local changes review the changes using git and copy over the local changes you want to keep before merging the updates.
rsync -aivP $(bundle info --path jekyll-report-dashboard)/ .