Host your Automation Report on GitHub Pages with Github Actions.

Before proceeding further let’s look why need to host our Automation report to Github Pages and what benefit it can add to your arsenal/Automation Activities.

Google Photos

If you go to the official site of GitHub Pages you will find below description.

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website

With Github Pages we get a subdomain as github.io. To host your site first and foremost thing is we need to have a Github account and a repository which will have our Automation code to run the Test Cases. Secondly, your site will be name as <username>.github.io

Note: Repository need to be public to host a site with Github Pages.

Now coming to our main purpose how it can help us in Automation testing. We all as an automation Tester knows the pain of sharing our daily status report to the management of the automation progress we have done be it daily/weekly. Normally we use extent report/allure report and send that report via Email to the management to see the current status of our Automation Progression/Regression. But, what if we don’t need to have that pain of sending to management we can leverage Github Pages to host our Automation Report and send that link so now whenever management want he can just browse through the URL and he can get the latest update. Isn’t this Fantastic !!

Now let’s dive into it.

Here I will be showing a demo project with below technical Stack with Github Actions ( we will see that in later sections ).

Internal

Step 1:

1. Open up a IDE of your choice and setup a Maven free ArchType Project.
2. Add all the required dependency as mention above in your pom.xml with the maven failsafe plugin. You can use Maven SureFire plugin also.
3. Now setup extent.properties at your src/test/resources folder like below.

Internal Images

4. Setup your extent-config.yml as below in the same folder structure.

Internal imges

5.Now as we are doing the BDD way using Cucumber so ,we will need to define a runner class to run the cucumber feature. Here we are using Junit as our runner class if someone need TestNG they can opt for same. In runner class add below line in plugin to generate extent report in test-output folder as we define in extent.properties file.

Internal Images

6. Now add the feature file and scenarios the one you want to run and their
implementation.

Note: More Details around Cucumber6 adapter Plugin can be found here.

Step 2:

Now once we are done with the coding we need to push our code to GitHub.Make sure we push test-output folder also to the Github as that will be main source of hosting our automation report. For that first create account if not already created and create new repository. Now push your code to Github.

Step 3:

Now comes the crucial part , if you have followed the blog properly by this time you will have test-output folder generated as below which will have index.html file under spark Folder.

Internal image

Now after this go to your Github repository and go to the pages section from the setting menu. It will look like below.

Github Pages

Now select the Source as your master branch and then click on save.Then you will get the below message .

Your site is published at https://<username>.github.com/branchname/

This above message means you are ready with your Github Pages.

Now let see what is Github action and how it will help us in hosting to our automation report.

In Simple language Github Actions helps us in automating our workflow with the help of CI/CD through which we can build,test and deploy directly from our github code.

First of all now go to your Github repository and click on Actions tab as below.

Internal Images

Once you click on it you will get below page.

Internal Image

Here we need to select Java with maven Project . Github will autodetect that your code contains maven and Java and it will show suggestion for same.We need to select below option.

Internal Images

Now click on Set up this workflow and you will be moving towards generating a .yml file which will drive our automation Test case to run and host our automation report.

Now update your .yml file with below contents.

maven.yml file

As you see above what we are doing is whenever there is a new push or Pull request to master this workflow will get execute. In the workflow we are setting up JDK 1.8 which will run on ubuntu and then execute our test script with the help of maven .

In Maven run you can pass your own maven command which you need to execute.

Now at the bottom of the workflow we have Deploy pages, this will help us in hosting our index.html file which is inside test-output folder on the gh-pages branch.Make sure you give correct path of your index.html file.

Here we are using gh-pages to host our automation report.Once you run your workflow for the first time this branch will not be present so run once the workflow and you will see gh-pages branch is made. Now again go to the pages section of your repository and change the source branch of gh-pages as below and now again run it.

gh-pages

Now wait for the magic to happen !!.

You will see in sometime that your Github page is hosting your automation report as below.

Automation report.

Thanks for reading this and if you find it useful please like it and follow me for more blog in future !!

You can connect to me on linkedln or checkout my portfolio