Steps

Steps are the building blocks of your tests.

Each test is composed of one or more steps, and each step can have its own status, description, attachments and even nested steps.

Built-in hooks

The simplest steps to start with are the built-in hooks in Jest: beforeAll, beforeEach, afterEach and afterAll.

This way, you will see the name and status of each hook in the report.

Docblocks

beforeAll(async () => {
  /**
   * Launch the browser for all tests
   */
});

beforeEach(async () => {
  /**
   * Visit the page before the test starts
   */
});

afterEach(async () => {
  /**
   * Take a screenshot after each test
   */
});

afterAll(async () => {
  /**
   * Close the browser after all tests
   */
});

DSL

import { $Description } from 'jest-allure2-reporter/api';

$Description('Launch the browser for all tests')
beforeAll(async () => {
  // ...
});

$Description('Visit the page before the test starts')
beforeEach(async () => {
  // ...
});

$Description('Take a screenshot after each test')
afterEach(async () => {
  // ...
});

$Description('Close the browser after all tests')
afterAll(async () => {
  // ...
});

Preview

TODO: add screenshot

Custom steps

Custom steps add more structure to your tests and make them easier to read and understand. You can add additional information to the report such as step description, parameters, attachments, etc.

Moreover, custom steps can be nested, which allows you to create a tree-like structure of your tests.

Wrapping functions

There are several ways to turn your functions into steps:

• allure.step function – best for anonymous, one-time steps.
• allure.createStep function – best for reusable functions.
• @Step decorator – best for reusable class methods.

step

Using allure.step function is the simplest way to define a step:

import { allure } from 'jest-allure2-reporter/api';

test('Login test', async () => {
  await allure.step('Open login page', async () => {
    // ...
  });

  await allure.step('Enter credentials', async () => {
    allure.parameter('login', 'admin');
    // ...
  });

  await allure.step('Submit the form', async () => {
    // ...
  });
});

The drawback of this approach is that you can't reuse steps in other tests. Besides, adding parameters is going to be a bit verbose.

createStep

A more advanced technique is to wrap your functions with allure.createStep, which allows you to reuse steps in other tests and add parameters:

import { allure } from 'jest-allure2-reporter/api';

export const open = allure.createStep('Open login page', async () => {
  // ...
});

export const enterCredentials = allure.createStep(
  'Enter credentials',
  ['Login'],
  async (login, password) => {
    // ...
  }
);

export const submit = allure.createStep('Submit the form', async () => {
  // ...
});

@Step

For aspect-oriented programmers, there is a decorator-based approach. It works only with class methods, but otherwise it's similar to allure.createStep:

import { Step } from 'jest-allure2-reporter/api';

class LoginPageObject {
  @Step('Open login page')
  async open() {
    // ...
  }

  @Step('Enter credentials', ['Login'])
  async enterCredentials(login, password) {
    // ...
  }

  @Step('Submit the form')
  async submit() {
    // ...
  }
}

Preview

TODO: add screenshot

Status override

In some cases, you might want to have control over the step status and its status details. Furthermore, you might want to make the status conditional and programmatic, and here's how:

logStep

import { allure } from 'jest-allure2-reporter/api';

test('Login test', async () => {
  try {
    // ...
  } catch (error) {
    await allure.step('Unexpected error (Recoverable)', () => {
      await allure.attachment(
        'screenshot.png',
        page.screenshot({ fullPage: true },
      );

      if (isRecoverable()) {
        allure.status('skipped', {
          message: error.message,
          trace: error.stack,
        });
      } else {
        throw error;
      }
    });
  }
});

Preview

TODO: add screenshot