How to customize the reports for serenity BDD

Question

I wish to change the CSS and logos in Serenity reports. Also I want to add some custom text or links to some tests in the Serenity reports.Like there is an excel report gets generated and I wish to provide a link of it in the test step in the report. What is the best way to achieve this?

I have been looking for an answer for some time now and there does not seem to be any research done in this regard anywhere. I would suggest you start with _serenity-report-resources-x.x.xx.jar_ and familiarize yourself with how **Serenity** builds its reports. Also, make sure to check out [this](http://stackoverflow.com/questions/38913415/serenity-reports-logo-change/38917386#38917386) for how to change the logo. — JDelorean, Aug 19 '16 at 10:56

score 5 · Answer 1 · answered Feb 02 '18 at 09:38

I found a better and cleaner way to customise the Serenity reports. Basically, we can generate our own Serenity-reports-resources project with a different version number and configure our project to use our customised reports resources build instead of the official reports resources. The setps to do this are as follows:

Download sources from:

https://github.com/serenity-bdd/serenity-core.git

Modify build Gradle settings to generate your own "serenity-report-resources" jar file. Open the "build.gradle" file. 2.1 Add "mavenLocal()" to the repositories:
```
buildscript {
    repositories {
        mavenLocal()
        .....
```
2.2 Add Maven publish plugin
```
apply plugin: 'maven-publish'
```
2.3 Change the subproject version number. Replace the line:
```
version = rootProject.version
```
for
```
version = '0.0.0.1'
```
Note: use the version number that you want in order to track changes of your reporting site.
Run
```
mvn clean build
```
for the subproject "serenity-report-resources"
3.1 Run
```
publishing / publishToMavenLocal
```
to install your reporting site as a new maven dependency in the local repository. Publish or deploy this build where you need it when running test in other environments.
Configure your project to not include the official "serenity-report-resources" dependency and add yours instead.

4.1 In the dependencies section add the serenity-core without the reports.

<dependency>
    <groupId>net.serenity-bdd</groupId>
    <artifactId>serenity-core</artifactId>
    <version>${serenity.version}</version>
    <exclusions>
        <exclusion>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-report-resources</artifactId>
        </exclusion>
    </exclusions>
</dependency>

4.2 Add your custom reports dependency. Use the same version number that you used before.

<dependency>
    <groupId>net.serenity-bdd</groupId>
    <artifactId>serenity-report-resources</artifactId>
    <version>0.0.0.1</version>
</dependency>

4.3 Configure the serenity plugin dependencies to use your custom reports build.

<!-- Serenity plugin -->
<plugin>
    <groupId>net.serenity-bdd.maven.plugins</groupId>
    <artifactId>serenity-maven-plugin</artifactId>
    <version>${serenity.maven.version}</version>
    <dependencies>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-core</artifactId>
            <version>${serenity.version}</version>
            <exclusions>
                <exclusion>
                    <groupId>net.serenity-bdd</groupId>
                    <artifactId>serenity-report-resources</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
                <artifactId>serenity-report-resources</artifactId>
                <version>0.0.2</version>
        </dependency>
    </dependencies>
    <executions>
        <execution>
            <id>serenity-reports</id>
            <phase>post-integration-test</phase>
            <goals>
                <goal>aggregate</goal>
            </goals>
        </execution>
    </executions>
</plugin>

Now when you run tests with the "SerenityRunner" it should find the resources of your custom reports build instead of the official serenity reports build.

It would be better if we could just configure the location of resources needed to generate reports as static or system property from the same framework. Let see what I can do :-)

I hope it helps, Keep on hacking

score 3 · Answer 2 · answered Jan 29 '18 at 09:50

One hacky way to customise the CSS and Images is using the Maven Resources Plugin as below.

         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.4</version>
            <executions>
                <execution>
                    <id>copy-web.xml</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <overwrite>true</overwrite>
                        <outputDirectory>${basedir}/target/site/serenity/images</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/main/resources/images</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

Pace your images in "src/main/resources/images". i.e your logo with the name "serenity-logo.png", because the HTML code has this name. You can add CSS files as well with the relative path to the CSS file to be replaced.

After running the tests just run the command "mvn process-resources". This will replace files and then you have a site with your images and CSS files customised.

This is not the best solution but is a quick fix to see how your reports would look like.

How to customize the reports for serenity BDD

2 Answers2