Getting started with CodeceptJS!

Automating test cases is the best way to cover a wide range of tests in a short period of time. Even though all scenarios cannot be covered through automation, it can help us test the more frequent and repetitive tasks.

There are various automation tools that help us with writing tests. Today I’m going to show you how easy it is to use CodeceptJS framework to write tests.

CodeceptJS is a back-end testing framework which uses other tools like Puppeteer, Selenium etc. to test the website functionality on the front-end.

The tests are written in JavaScript and it is a framework which is easy to understand as the tests are written from a users perspective.

CodeceptJS -The <<Actor>>

There is an actor (represented as I) which contains actions taken from helpers. A test is written as a sequence of actions performed by the actor.

For example, let’s look at the sample script I’ve written to get a better idea about how the structure of the script is going to look like.

As you can see:

1. Each line is a test step and it follows one by one.
2. Each line is an actor invoking a task.
3. It is easy to read.
4. Available as the «I» object.
5. Actions are methods on the «I» object.

Sample actions:

• I.click()
• I.see()
• I.fillField()

How to start off with CodeceptJS?

There are different types of helpers that can be used to run the tests depending on your requirements. For example, if you want cross browser support you should choose the Selenium-based WebDriver or Protractor.

Let’s start easy! Puppeteer is a great way to start if you need fast end to end tests in the Chrome browser since it doesn’t require any additional tools to be installed. No Selenium required!

Before starting off we should have NodeJs (https://nodejs.org/) downloaded and installed.

Installing CodeceptJS

To start off with the tests, first we create a new folder. We are going to create all the JavaScript modules inside this folder. It would be the project in which we will be using CodeceptJS.

I’m going to use VSCode to show you the coding, but feel free to use any IDE of your choice!

Open the folder in VSCode and open a new terminal to run the NodeJs commands.

Let’s start by having NodeJs create the project. Run npm init -y

This will create the package.json file which will define project properties, description, author & license information, scripts etc.

Now run npm install codeceptjs to install CodeceptJS

Since we are going to run the tests in Puppeteer, lets install Puppeteer using the command npm install puppeteer

If you notice the package.json file now, you can see that the versions of CodeceptJS and Puppeteer would be added.

Initializing a CodeceptJS project

Let’s initialize CodeceptJS inside the project folder now. Execute the command npx codeceptjs init

CodeceptJS will prompt you with options that will help you prepare and configure a test environment. Yes, it is that easy ;)

So, here are the questions it’s going to ask you:

1. Where are your tests located? By default, it will give you the option to create it without a folder structure but for best practice it’s better to create one! I’ve mentioned the folder name as “exampleTests”, so a folder will be created for all the test files.
2. What helper do you want to use? It will list all the available helper options.You just have to choose the one you want. In my case its Puppeteer.
3. Where should logs, screenshots, and reports to be stored? You can leave this as default.
4. Would you like to extend the “I” object with custom steps? Choose yes as this is how we are going to write our tests.
5. Where would you like to place custom steps? You can leave this as default.
6. Language? Choose the language you prefer.
7. Base URL of site to be tested? Here you will have to provide the URL to the site you are going to test. For this blog’s purpose I will be using this testing site : https://s2.demo.opensourcecms.com/orangehrm/symfony/web/index.php/auth/login
8. Show browser window? I’m going to say yes to show you how cool this is going to look like, but you could always say no if you don’t need it.

It will look like the following after entering all the details for the environment.

Writing the tests and running them

Now we have done all the setup, it’s time to write tests.

Run the command npx codeceptjs gt to start with you first test.

It will prompt back the following questions:

1. Filename of the test?
2. Feature which is being tested?

Make sure a proper naming convention is used to name the file to follow the best coding practices. I will name it Login as I will be testing the login feature.

You can now notice a Login_test.js file created in exampleTests folder.

Now we are going to write two simple tests in the Login_test.js file and execute it

As you can see in the code snippet, I’ve used both the element’s ID and the text in the element to locate them. You can use either way and there are many other options as well to locate them, which makes the CodeceptJS framework easier to use. We use assertions like ‘I.see’ to check if the actual and expected results are the same. You can find more information here: https://codecept.io/basics

To run this test , run the command npx codeceptjs run — steps

In the screenshot above you can see that the results are also displayed step by step. When something goes wrong, it will stop and notify the tester the exact place where the error is and help them with the debugging process to fix it.

Let me tweak the second scenario a bit and show you what happens when the test fails.

Now the assertion is wrong. Lets looks at the result when we run this test.

You can see what the actual error is and what we are expecting in the test. In the output folder you will find a screenshot of the browser window when the error occurred.

Now you see how easy it is to use CodeceptJS for end to end testing. Hope this article makes your life a little bit easier! :)

Happy testing! :)

GitHub repo : https://github.com/dharshib/CodeceptJSDemo

About the Author

Dharshini Baskaran is software Quality Assurance Engineer at 99X Technology.