Codeceptjs Initialisation

Introduction

Recently I have been tasked with the job of testing lots of web based applications. Historically this has been a manual effort, so to begin the new year I looked at how this might be automated. Having looked at a number of options, I remembered a really cool piece of technology I used for web-scraping.

Codeceptjs is very handy automation tool for web browsers. It includes helpers for WebDriver, Puppeteer and Playwright. The following is a quick intro to get you going.

Install Codeceptjs

1. Initialise npm

1npm init -y

Amend the resulting package.json to include whatever settings required

2. Initialise Codeceptjs

1npx codeceptjs init

Answer the initialisation questions - for example: select Puppeteer, show browser, etc

3. Finally select an initial use case e.g. account, login etc.

NOTE: You can select anything here its just scafolding for the application and can be renamed if required.

4. At this point my local directory looks similar to below:

1.
2├── codecept.conf.js
3├── jsconfig.json
4├── login_test.js
5├── node_modules
6├── output
7├── package.json
8├── package-lock.json
9└── steps_file.js

5. If you want to do threaded automation, add the following package:

1npm i worker-threads

Create a Test

In my example, Codeceptjs created the example login_test.js for me as part of the intialisation process.

1. Edit the codeceptjs.conf.js and amend the url (i.e. line 6) to reference https://google.com

 1     1  exports.config = {
 2     2    tests: './*_test.js',
 3     3    output: './output',
 4     4    helpers: {
 5     5      Puppeteer: {
 6     6        url: 'https://google.com',
 7     7        show: true,
 8     8        windowSize: '1200x900'
 9     9      }
10    10    },
11    11    include: {
12    12      I: './steps_file.js'
13    13    },
14    14    bootstrap: null,
15    15    mocha: {},
16    16    name: 'poc002',
17    17    plugins: {
18    18      pauseOnFail: {},
19    19      retryFailedStep: {
20    20        enabled: true
21    21      },
22    22      tryTo: {
23    23        enabled: true
24    24      },
25    25      screenshotOnFail: {
26    26        enabled: true
27    27      }
28    28    }
29    29  }

2. Edit the login_test.js file to include the following content:

1     1  Feature('login');
2     2
3     3  Scenario('Google Search', ({ I }) => {
4     4    I.amOnPage('https://google.com')
5     5    I.say('Welcome to Google Search')
6     6    I.wait(5)
7     7    I.see('Google Search')
8     8  });

3. Run the script

1npx codeceptjs run --steps

Running the above command will initiate a sandbox environment for the test. The selected browser will be invoked and then it will try to complete the tasks assigned.

• Line 4. Tells the browser to render the page found at https://google.com
• Line 5. Prints out a script comment
• Line 6. Tells the script to wait for 5 seconds
• Line 7. Tells the script to look text in the page rendered by the browser

Conclusion

Codeceptjs is super easy to use and learn. Its combines some super powerful tools into a very simple and extensible interface. I am looking forward to seeing how this solution evolves overtime.