Step-by-Step Guide to Automation Framework with CodeceptJS

Prerequisites

1. Node.js: Install Node.js (version 10 or higher) from the official website.
2. npm: Node Package Manager comes with Node.js.

Step 1: Setting Up Your Project

1. Create a new directory for your project and navigate into it:

bash

mkdir codeceptjs-automation
cd codeceptjs-automation        

2. Initialize a new Node.js project:

bash

npm init -y        

3. Install CodeceptJS and Puppeteer (or another supported helper like WebDriver):

bash

npm install codeceptjs puppeteer --save-dev        

Step 2: Initialize CodeceptJS

1. Initialize CodeceptJS:

bash

npx codeceptjs init        

This command will prompt you with several questions. Here’s how you can answer them:

• Where are your tests located? ./tests
• What helpers do you want to use? (Use space to select multiple) 'Puppeteer'
• Where should logs, screenshots, and reports be stored? './output'
• Would you like to enable Typescript? No
• Where would you like to place your step definitions? './steps'

2. Create a test:

bash

npx codeceptjs gt        

Name your test file, e.g., 'example_test.js.'

Step 3: Project Structure

After initialization, your project structure should look like this:

codeceptjs-automation
├── node_modules
├── output
├── steps
├── tests
│   └── example_test.js
├── codecept.conf.js
└── package.json        

Step 4: Configuring CodeceptJS

1. Open 'codecept.conf.js' and configure it:

js

exports.config = {
  tests: './tests/*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      url: 'https://localhost',
      show: true,
      windowSize: '1200x900'
    }
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {},
  name: 'codeceptjs-automation'
}        

Step 5: Writing Your First Test

1. Open tests/example_test.js and write your test:

js

Feature('Example Test');

Scenario('Open a webpage and check title', ({ I }) => {
  I.amOnPage('https://example.com');
  I.see('Example Domain');
});        

Step 6: Running Your Test

To execute your CodeceptJS test, run the following command in your terminal:

bash

npx codeceptjs run --steps        

You should see a browser window open, navigate to https://example.com, and verify the page title.

Step 7: Page Objects

To maintain clean and readable tests, use the Page Object Model (POM). Here’s how you can implement it:

1. Create a directory for page objects:

bash

mkdir pages        

2. Create a page object file, e.g., 'ExamplePage.js' in 'pages':

js

// pages/ExamplePage.js
const { I } = inject();

module.exports = {
  url: 'https://example.com',
  title: 'Example Domain',

  open() {
    I.amOnPage(this.url);
  },

  verifyTitle() {
    I.see(this.title);
  }
};        

3. Modify your test to use the page object:

js

// tests/example_test.js
const ExamplePage = require('../pages/ExamplePage');

Feature('Example Test with Page Object');

Scenario('Open a webpage and check title', () => {
  ExamplePage.open();
  ExamplePage.verifyTitle();
});        

Step 8: Running Tests with Reports

1. Install a reporting plugin, e.g., Mochawesome:

bash

npm install mochawesome --save-dev        

2. Configure reporting in codecept.conf.js:

js

exports.config = {
  tests: './tests/*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      url: 'https://localhost',
      show: true,
      windowSize: '1200x900'
    }
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {
    reporterOptions: {
      reportDir: './output'
    }
  },
  name: 'codeceptjs-automation',
  plugins: {
    screenshotOnFail: {
      enabled: true
    },
    retryFailedStep: {
      enabled: true
    },
    allure: {
      enabled: true
    }
  }
}        

3. Run tests and generate reports:

bash

npx codeceptjs run --reporter mochawesome        

Framework Details:

1. Directory Structure:

• tests: Contains test files.
• pages: Contains Page Object Model files.
• steps: Contains step definitions and custom helper functions.
• output: Contains logs, screenshots, and reports.

2. Configuration:

• Managed through codecept.conf.js where you define helpers, include paths, and plugins.

3. Test Execution:

• Executed using CodeceptJS commands (npx codeceptjs run).

4. Assertions and Verifications:

• Done using built-in methods like see, seeInCurrentUrl, etc.

5. Page Objects:

• Used to encapsulate page-specific information and actions, promoting reusability and maintainability.

Reporting:

• Can be enhanced using plugins like Mochawesome for detailed reports.

Conclusion

This guide provides a comprehensive framework setup for web automation using CodeceptJS. By following these steps, you can create a robust and maintainable test automation framework that leverages CodeceptJS for readable and efficient test scenarios.

Continue exploring CodeceptJS’s documentation and features to build more advanced and robust automation scripts. Happy testing!