Introduction to CodeceptJS

CodeceptJS is an end-to-end testing framework for web applications, providing an easy way to write and maintain tests with a highly readable syntax. It uses the concept of “page objects” to encapsulate the interaction with web elements, dramatically improving test code maintainability.

Installation

  npm install codeceptjs --save-dev
  npm install puppeteer --save-dev

Basic Configuration

Generate a basic configuration file:

  npx codeceptjs init

Examples of Commonly Used APIs

Setting Up a Test Scenario

  Feature('My Awesome Test');
  Scenario('test something', ({ I }) => {
    I.amOnPage('https://example.com');
    I.see('Example Domain');
  });

Working with Forms

  Scenario('submit a form', ({ I }) => {
    I.fillField('username', 'tester');
    I.fillField('password', 'password');
    I.click('Login');
    I.see('Welcome, tester');
  });

Navigating Pages

  Scenario('navigate through pages', ({ I }) => {
    I.amOnPage('https://example.com');
    I.click('More Information');
    I.see('More Info');
  });

Working with Puppeteer

  Scenario('drag and drop', async ({ I }) => {
    I.amOnPage('https://example.com/drag-and-drop');
    I.dragAndDrop('#draggable', '#droppable');
    I.see('Dropped!');
  });

Assertions

  Scenario('check texts and attributes', ({ I }) => {
    I.amOnPage('https://example.com');
    I.see('Example Domain');
    I.dontSee('Not Here');
    I.seeElement('#someElement');
    I.dontSeeElement('#nonExistentElement');
  });

App Example Using Different APIs

  Feature('User Registration and Login');

  Scenario('User can register', ({ I }) => {
    I.amOnPage('https://example.com/register');
    I.fillField('email', 'user@example.com');
    I.fillField('password', 'password123');
    I.click('Register');
    I.see('Registration Successful');
  });

  Scenario('User can login', ({ I }) => {
    I.amOnPage('https://example.com/login');
    I.fillField('email', 'user@example.com');
    I.fillField('password', 'password123');
    I.click('Login');
    I.see('Welcome, user@example.com');
  });

Hash: aa541acd9b125bce93b39640b70d931e444e355b46f6767e81a12bc062b2d6d6