End to end testing with NodeJS using CodeceptJS with real world example— Part 1 : Understanding the basics

CodeceptJS is a modern end to end testing framework with a special BDD-style syntax. The tests are written as a linear scenario of the user’s action on a site.

Understanding the Architecture

CodeceptJS is a javascript wrapper around different automation frameworks for both Web & Mobile Testing.

Web Testing:

• WebDriverIO — Next-gen browser and mobile automation test framework for Node.js.
• Protractor — end to end testing for Angular
• Nightmare — A high-level browser automation library for automating Electron apps.
• Playwright — Node.js library to automate Chromium, Firefox and WebKit with a single API
• Puppeteer — Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

Mobile Testing:

• Appium — Appium is an open source test automation framework for use with native, hybrid and mobile web apps.
• Detox — Gray box end-to-end testing and automation framework for mobile apps (by Wix)

Hence you have access to all the above mentioned frameworks, in a single stable implementation.

Installing CodeceptJS

Please refer this link for detailed installation guide.

CodeceptJS requires Node 12+ versions to work.

Open a directory where you want to install CodeceptJS tests. If it is an empty directory — create a new NPM package with

npm init -y

Install CodeceptJS with NPM:

npx codeceptjs init

• Please choose Puppeteer when asked for choosing the helpers. (We will explore each and every driver in the upcoming chapters).
• Press ENTER for all the other options in the wizard.

Understanding the directory Structure

codecept.conf.js

CodeceptJS configuration is set in codecept.conf.js file.

Here is an overview of some of the available options with their defaults:

• tests: "./*_test.js" - pattern to locate tests. Allows to enter glob pattern
• grep: — pattern to filter tests by name
• include: {} - actors and page objects to be registered in DI container and included in tests. Accepts objects and module require paths
• timeout: 10000 - default tests timeout
• output: "./output" - where to store failure screenshots, etc
• helpers: {} - list of enabled helpers
• multiple: {} - multiple options, see Multiple Execution
• bootstrap: "./bootstrap.js" - an option to run code before tests are run. See Hooks
• require: [] - array of module names to be required before codecept starts. See Require

It’s okay. We will see most of them with their practical uses.

_tests.js

This is the file where you write your tests.

steps_file.js

During initialization you were asked to create a custom steps file. If you accepted this option, you are now able to use the custom_steps.js file to extend I. See how the login method can be added to I:

module.exports = function() {
  return actor({

    login: function(email, password) {
      this.fillField('Email', email);
      this.fillField('Password', password);
      this.click('Submit');
    }
  });
}

jsconfig.json

This file has nothing to do with the codeceptJS Project. It helps you configure the javascript settings for your project.

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service like linting for example.

Refer this link for all the different kind of configurations available.

Make an observation 💡

1. If you go to codecept.conf.js , you will see that codecept has added Puppeteer in the helpers object. This happens as we provided puppeteer as our helper during the installation wizard.

Enable IntelliSense in VS Code for CodeceptJS

To get autocompletion when working with CodeceptJS, use Visual Studio Code or another IDE that supports TypeScript Definitions.

Generate step definitions with:

npx codeceptjs def

Create a file called jsconfig.json in your project root directory, unless you already have one.

{
  "compilerOptions": {
    "allowJs": true,
  }
}

Writing our first test

As we have choosen Puppeteer as our default helper, the tests will use Puppeteer as their underlying tool to automate the browser. Puppeteer by default uses chromium as the browser to automate, and if you observed, it automatically downloaded the chromium browser when setting up the project.

Nagivate to _test.js and add the following code to the file.

Feature('Google Landing Page');
Scenario('Open Google', ({ I }) => {
   I.amOnPage('https://google.com'); // opens google.com
   I.seeElement('//*[@name="q"]');
   I.fillField('//*[@name="q"]','Github');
});

Execute the test using the following command

npx codeceptjs run

This runs all tests from current directory. You should be able to see the test case execution in chromium web browser, and see the test case as passed.

To see the list of all available commands for Puppeteer, fire the following command

npx codeceptjs listTiT

Congratulations🎉🎉. You just executed your first test case using CodeceptJS & Puppeteer.

The code can be found here at this repository 🐱

See you in the next article, where we learn about different locators strategies, wait strategies, different web operations available for automation and much more.