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
- Initialise npm
1npm init -y
Amend the resulting package.json to include whatever settings required
- Initialise Codeceptjs
1npx codeceptjs init
Answer the initialisation questions - for example: select Puppeteer, show browser, etc
- 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.
- 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
- 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.
- 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 }
- 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 });
- 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.