Seeking Guidance on Implementing Allure Step Annotations with Serenity/JS

[waleedKhalidCalrom]

I am using serenityjs + jasmine + webdriverIO
here is wdio Config code

import type { WebdriverIOConfig } from '@serenity-js/webdriverio';
import { login } from './login';
import isCi = require('is-ci');
/*eslint no-unused-vars: ["error", { "vars": "local" }]*/
import path = require('path');
import fs = require('fs');
import * as os from "os";

// Run tests in headless mode on CI and non-headless otherwise
// Set to true/false to override
const shouldBeHeadless = process.env.HEADLESS || isCi;
const systemId = process.env.SYSTEM_ID || 'Aviate';
export const config: WebdriverIOConfig = {

    // =========================
    // Serenity/JS Configuration
    // =========================

    // Enable Serenity/JS framework adapter
    // see: https://serenity-js.org/api/webdriverio/
    framework: '@serenity-js/webdriverio',

    serenity: {
       
        runner: 'jasmine',

        // Configure reporting services
        // see: https://serenity-js.org/handbook/reporting/
        crew: [
            '@serenity-js/console-reporter',
            ['@serenity-js/serenity-bdd', { specDirectory: 'spec' }],
            ['@serenity-js/web:Photographer', { strategy: 'TakePhotosBeforeAndAfterInteractions' }],
            ['@serenity-js/core:ArtifactArchiver', { outputDirectory: 'target/site/serenity' }],
        ]
    },

    specs: ['./spec/azure/*.spec.ts'],
    suites: {
        productTests: [
            './spec/azure/product/**/system-access.ts'
        ],
        
    },

    maxInstances: 2,
    injectGlobals: true,
    capabilities: [{
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: [
                '--no-sandbox',
                '--disable-infobars',
                '--disable-gpu',
                '--disable-dev-shm-usage',
                '--start-maximized',
                'disable-extensions'
            ].concat(shouldBeHeadless ? ['--headless'] : []),
        },
    }],
  
    baseUrl: process.env.BASEURL || 'http://localhost:8080/',
   
    reporters: [
        'dot',
        ['junit', {
            outputDir: 'target/junit',
            outputFileFormat: function (options) { // optional
                console.log('Global file name is:' + global.specFileName);
                return `AcceptanceTests_${global.specFileName}_${options.cid}.xml`;
            }
        }],
        ['video', {
            saveAllVideos: true,
            videoSlowdownMultiplier: 3,
        }],
        ['allure', {
            outputDir: `./_results_/${systemId}-allure-raw`,
            disableWebdriverStepsReporting: true,
            disableWebdriverScreenshotsReporting: true,
            addConsoleLogs: false,
            issueLinkTemplate: 'https://dev.azure.com/calromltd/InclusiveTour/_workitems/edit/{}',
            tmsLinkTemplate: 'https://dev.azure.com/calromltd/InclusiveTour/_workitems/edit/{}',
            reportedEnvironmentVars: {
                os_platform: os.platform(),
                os_release: os.release(),
                os_version: os.version(),
                node_version: process.version,
            },
        }],
    ],

    // Jasmine config, see https://serenity-js.org/api/jasmine-adapter/interface/JasmineConfig
    jasmineOpts: {
        ui: 'bdd',
        defaultTimeoutInterval: 60000,
    },

   
    onPrepare: async function () {
        const dir = path.join(process.cwd(), 'target/junit');
        if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir, { recursive: true });
        }
    },
    
    beforeSession: function (config, capabilities, specs) {
        if (specs) {
            global.specFileName = specs[0].split('/').pop().split('.')[0];
        }
    },
    
    before: async function (capabilities, specs, browser) {
        global.params = {
            fakegds: {
                enabled: true,
                record: false,
            }
        };
    },
   

    
    onComplete: function () {
        const { spawn } = require('child_process');
        const reportError = new Error('Could not generate Allure report');
        const customOutputFolder = `${systemId}-allure-report`;

        const generation = spawn('allure', ['generate', `_results_/${systemId}-allure-raw`, '--clean', '-o', customOutputFolder]);

        return new Promise<void>((resolve, reject) => {
            const generationTimeout = setTimeout(() => reject(reportError), 50000); // 30s timeout

            generation.on('error', (err) => {
                clearTimeout(generationTimeout);
                return reject(new Error(`Allure report generation failed with error: ${err.message}`));
            });

            generation.on('exit', function (exitCode) {
                clearTimeout(generationTimeout);

                if (exitCode !== 0) {
                    return reject(reportError);
                }

                console.log('Allure report successfully generated');
                resolve();
            });
        });
    },
   
};

Allure report working fine but it not showing the task and interaction as steps in allure report
if is set disableWebdriverStepsReporting: false, then it shows the steps but not as per interactions and tasks

[jan-molak]

Hey @waleedKhalidCalrom! Allure automatically reports Serenity/JS tasks and interactions in Playwright Test-based implementations. That's because Serenity/JS uses Playwright Test test.step API under the hood, and Allure can pick that up.

Since WebdriverIO lacks a similar mechanism, to achieve the same level of integration we'll need #2580 to be implemented.

Please upvote it if you're interested in this functionality, and if there's enough interest in the community, I'll look into implementing it. Alternatively, if you have the capacity, I'd be happy to walk you through implementing it yourself and contributing back to Serenity/JS.

[waleedKhalidCalrom]

Hey @jan-molak thanks for noticing!
Currently, I have managed to add steps to the Allure report by utilizing Serenity/JS domain events. This implementation is similar to how steps are displayed in the @serenity-js/console-reporter. It seems to be working well so far.

Below is the code I’m using to integrate step information into the Allure reporter with Serenity/JS:

import { Stage, StageCrewMember } from '@serenity-js/core';
import { DomainEvent, TaskStarts, InteractionStarts, InteractionFinished, TaskFinished } from '@serenity-js/core/lib/events';
import { Outcome, ExecutionSuccessful, ExecutionFailedWithError, ExecutionCompromised, ExecutionSkipped } from '@serenity-js/core/lib/model';
import allure from '@wdio/allure-reporter';
import { Status } from 'allure-js-commons';

export class AllureReporterCrewMember implements StageCrewMember {
    private stage?: Stage;

    assignedTo(stage: Stage): StageCrewMember {
        this.stage = stage;
        return this;
    }

    notifyOf(event: DomainEvent): void {
        switch (event.constructor) {
            case TaskStarts:
                this.handleTaskStarts(event as TaskStarts);
                break;
            case InteractionStarts:
                this.handleInteractionStarts(event as InteractionStarts);
                break;
            case InteractionFinished:
                this.handleInteractionFinished(event as InteractionFinished);
                break;
            case TaskFinished:
                this.handleTaskFinished(event as TaskFinished);
                break;
            default:
                break;
        }
    }

    private handleTaskStarts(event: TaskStarts): void {
        allure.startStep(`${event.details.name.value}`);
    }

    private handleInteractionStarts(event: InteractionStarts): void {
        allure.startStep(`${event.details.name.value}`);
    }

    private handleInteractionFinished(event: InteractionFinished): void {
        allure.endStep(this.getAllureOutcome(event.outcome));
    }

    private handleTaskFinished(event: TaskFinished): void {
        allure.endStep(this.getAllureOutcome(event.outcome));
    }

    private getAllureOutcome(outcome?: Outcome): Status {
        switch (true) {
            case outcome instanceof ExecutionSuccessful:
                return Status.PASSED;
            case outcome instanceof ExecutionFailedWithError:
                return Status.FAILED;
            case outcome instanceof ExecutionCompromised:
                return Status.BROKEN;
            case outcome instanceof ExecutionSkipped:
                return Status.SKIPPED;
            default:
                return Status.BROKEN; // Handle undefined or unexpected cases
        }
    }
}

wdio.config settings

crew: [
            new AllureReporterCrewMember(),
            '@serenity-js/console-reporter',
            ['@serenity-js/serenity-bdd', { specDirectory: 'spec' }],
            ['@serenity-js/web:Photographer', { strategy: 'TakePhotosBeforeAndAfterInteractions' }],
            ['@serenity-js/core:ArtifactArchiver', { outputDirectory: 'target/site/serenity' }],
        ]