Sharing the common steps across the projects

[peterngtr]

Oftentimes, we find ourselves in situations where we need to reuse the same set of steps across different projects. Consider this scenario: you have a series of steps in automated API tests (Project A), such as registering a new user. Now, in your automated end-to-end (E2E) web tests (Project B), you want to create a new user as a preparation step. Wouldn’t it be convenient if you could reuse the steps you developed in Project A for Project B? If this sounds familiar, let’s explore how CodeceptJS can help us achieve this.

Project A: GitHub - kobenguyent/codeceptjs-rest-demo
Project B: GitHub - kobenguyent/codeceptjs-playwright-fun

In Project A, I will move the steps I want to reuse into a common steps file. Let’s say I place them inside stepObjects/userSteps.ts, which might look like this:

const userSteps = {
  async getUserPerPage(page = 2) {
    return this.sendGetRequest(`/api/users?page=${page}`);
  },

  async getUserById(id: number) {
    return this.sendGetRequest(`/api/users/${id}`);
  }
}

export default userSteps;

To use these steps in Project A, I’ll import them into the steps_file.ts :

import userSteps from './userSteps';

const faker = require('faker');
const FormData = require('form-data');

export = () => {
    return actor({
        async createNewUser(userData?: object) {
            let payload = userData || {
                name: faker.name.firstName(),
                job: 'leader'
            };

            return this.sendPostRequest('/api/users', payload);
        },
        createFormData(key, value) {
            let form = new FormData();
            form.append(key, value);
            return form;
        },
        ...userSteps // Importing the common steps by expanding them within the actor
    });
}

Then use it in your test:

Now, let’s move on to the interesting part – publishing these common steps as a package that we can reuse in other projects, such as Project B. In this tutorial, I will publish this as an npm package called codeceptjs-rest-demo . You can use your preferred package manager.

I’ll compile these steps into JavaScript files within a dist folder. In the package.json , I’ll configure it to include these files in the package:

  "files": [
    "dist/stepObjects/*",
    "README.md"
  ],

After publishing, I can use these steps in Project B as follows:

• First, I’ll install the package: npm i codeceptjs-rest-demo
• Then, using it in Project B is very similar to how we did it in Project A:

import userSteps from 'codeceptjs-rest-demo/dist/stepObjects/userSteps';

export = function() {

  return actor({
    ...userSteps
  });
}

This enables us to use the common steps in our tests within Project B seamlessly.

In conclusion, this approach allows us to centralize and reuse our steps. Any updates or fixes can be made in one place and then propagated to all projects using the package.

Feel free to explore and enjoy this streamlined process!