Host your Automation Allure Report on GitHub Pages with GitHub Actions.
Tags: githubactions, githubpage, automation, testing
Published: 2023-05-27 05:07:52

We all have heard of or used Allure Report in our day-to-day life. Additionally, GitHub Actions and GitHub Pages are also commonly used by many people in their daily lives. Will integrate all of them and learn something new. First of all, let's recap what these three are.

## Allure Report

An Allure report is an open-source framework designed to create interactive and visually appealing test reports. These reports are generated automatically by test automation frameworks such as Selenium, Appium, and TestNG.

## GitHub Pages

GitHub Pages is a static site hosting service offered by GitHub that allows developers to publish web content directly from a GitHub repository. It takes HTML, CSS, and JavaScript files.

## GitHub Actions

GitHub Actions is a platform that allows developers to automate software workflows related to building, testing, and deploying their code. It can be used to automate the process of generating and publishing Allure reports on GitHub Pages.

## **In this document, you will learn how to host your automation Allure report on GitHub Pages using GitHub Actions.**

When using GitHub Pages, you receive a subdomain in the format of `github.io` for hosting your website. In order to host your site, the first requirement is to have a GitHub account and a repository containing the automation code to execute the test cases. Your site will be named as `<username>.github.io/<repository name>`

It's important to note that the repository needs to be public in order to host a site with GitHub Pages.

Now, let's talk about how it can help us. As an automation tester, we know how frustrating it is to share our daily progress reports with management. Usually, we use tools like Extent Report or Allure Report and send these reports by email to show how our automation work is going, whether it's happening every day or every week.

But there's a problem with using Allure Report. We have to send a whole folder called "allure-results" and run a command to see it, which is a lot of extra work. But what if we didn't have to go through all that trouble? We can use GitHub Pages instead. We can put our automation reports there and just give management a link. So whenever they want to see our latest progress, they can easily click on the link and check it out. Isn't that amazing?

Now, let's get started and explore it further.

In this demonstration, I will present a project that utilizes the following technical stack along with the use of GitHub Actions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhm5j3owru4hb62j9wbq.png)

Now, let's take a look at the entire process step by step.

# **Step 1:**

1. Open up a IDE of your choice and setup a Maven Project.
2. Add all the required dependencies as mentioned above in your pom.xml file.
3. Write you tests in a Java Class.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o01escx2g8hxgk14vv5.png)

4.Run your test file.

After successfully running your test, you will see a folder named allure-results.

# **Step 2:**

After you finish writing your code, you should upload it to GitHub. If you don't have a GitHub account, you need to create one first. Once you have an account, create a new repository and then upload your code to GitHub.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8u2if2eazx88albytym.png)

# **Step 3:**

1.Go to Action Tab. You have two options: either create a workflow using the suggested one, or set up your own workflow. Since you're using the Maven build tool, if you choose the suggested option, make sure to select Java with Maven.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uli8ioutm2jdabkjzpbg.png)

2.You can choose to click on the setup workflow either by yourself or using Java with Maven. Change the file name to whatever you want (I changed it to ci.yml) and copy and paste the provided code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sppict8ulf1t6lka3gqv.png)

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

**Ensure that the branch you are using matches the one where you uploaded your code.** I uploaded my code to the main branch, so the displayed value is "main." If the branches don't match, it won't function properly and the build will fail.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu2qew2li653jvb5a1tx.png)

3.Once you've pasted the code, commit the changes. Then, navigate to the action tab where you will find the workflow you created. You'll notice that the workflow is set to run automatically. Once it finishes running, you will receive an error message. If you select the workflow with the error, you will be able to view the error message or information it is displaying.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fulmc8sdmvhw9adakmhb.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kqa43bluiaat86qhrq2.png)

Okay, How can I resolve this problem?

Navigate to the Repository Settings, Action → General → Check Read and Write Permissions option, and save the changes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvigzdjs9cjm0fq17eup.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3tb3p9k6kfpj9djvx44.png)

4.Next, navigate back to the Action tab and select the workflow. Then, click on it to rerun the job that previously failed. You will be able to observe the build process completing successfully.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7mmi66xeazpbgdqkd41.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6058dswjxfkxzykp4g37.png)

5.Now, when you open the code tab of your repository, you will find two branches. Initially, there was only one branch. The second branch is for the GitHub pages of the report, where it stores the report and its history. To proceed further, go to the settings of your repository and then click on "Pages." Choose the gh-pages branch and save your selection by clicking on the save button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ye49aya00nlc7inwbtj.png)

6.If you go to the action tab, you will find that the "pages build and deployment" workflow is currently running. Once the deployment is successful, click on the workflow, and you will find the link to your GitHub pages where the allure report is available. By clicking on that link, you will be able to view the report.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sleuxl7htdkmmelbvqcj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibho9b96fzgyqk5uuik0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nchfkemy2er6ljcwns2x.png)

If you now add test cases and push the new code to your repository, after the workflow finishes running, you will be able to see the updated report at the same link.

Repository Link: https://github.com/SMShoron/allure-report-gh-page

[ci.yml code](t.ly/8be2o)

Thanks for reading this and if you find it useful please Like and Share it.

Happy learning 😊

You can connect to me on [*LinkedIn*](https://www.linkedin.com/in/sisadia/)