JavaScript End 2 End Testing for Mere Mortals

My name is Vladimir, I live and work in Ukraine. I am a beginning QA engineer, and sooner or later I will have to face such concept as "test automation" because for me it is necessary for my further development in this professional field. And on the way to the implementation of this stage, I've encountered many problems. And one of the most important problems, in my opinion, for a beginner Automator is the lack of understanding of where to start.
 This is probably the problem that every newcomer faces when starting to learn test automation. This post is for those of you who were also dreaming of testing automation but did not know where to start.
I will show you a real example of how to write the first test using minimal knowledge of JavaScript. This will be browser testing of a simple application. To run and create tests, I will use the CodeceptJS framework, because this is still the simplest and most understandable, as for a beginner, a test framework that I've found.

CodeceptJS is a modern 'end to end' testing framework with a special BDD-style syntax. The test is written as a linear scenario of a user's action on a site. CodeceptJS is a multi-backend testing framework. It can execute tests using Webdriverio, Puppeteer, Protractor, Nightmare (for our testing, Google Chrome Puppeteer will be used as a driver for browsers). It's very simple since you just describe your actions on the site and then you execute them.

Step 1. Node.js Installation
First, install Node.js v.12.4.0. I've tried running tests at 10.16 - nothing happened. Therefore, I recommend the 12.4.0 version.
! I use Windows 7 in this tutorial. But it should work on Windows 10, Linux, and Mac as well!

Step 2. The installation of CodeceptJS with Puppeteer
Run the "Node.js command prompt" and in the command line enter "npm install codeceptjs puppeteer". The installation of CodeceptJS with Puppeteer begins.

npm install codeceptjs puppeteer

Step 3. Initializing CodeceptJS in the current directory
Run the command "npx codeceptjs init" (Initialize CodeceptJS in the current directory by running it).

npx codeceptjs init

Step 4. Answer simple questions
Decide on defaults, when asked to select helpers - choose Puppeteer. When asked to specify the URL, specify http://jspears.github.io/subschema ( I've chosen this application because it is simple and uses React.).

Step 5. Create the first test in your root directory
When everything is installed, create your first test using the command "npx codeceptjs gt" and enter the name of your test.

npx codeceptjs gt

A file is generated in your root directory (the name of your test.js). For example - "login.js"

Step 6. First Test Code
Tests are written from a user's perspective. There is actor object (represented as 'I') contains action methods taken from helpers
OR: represents user's actions. A test is written as a sequence of actions performed by an actor.
Open a generated file in your favorite javascript editor. For example, I am using Visual Studio Code.
Your first test will look something like this:

Scenario ('try react app', (I) => {
I.amOnPage ('/');
// This is command to open a webpage (accepts relative or absolute url)
I.click ('Login');
// This is command to locate a button or link and click on it
pause ();
// This command is prescribed when writing or debugging a test
});

Step 7. The validation of written code
Run a test using the command "npx codeceptjs run --steps"

npx codeceptjs run --steps

The output should be similar to this:
open login page and print value -
try react app
• I am on page "/"
• I click "Login"

Step 8. Start a test browser
Puppeteer starts a browser without opening a window. To see the browser, edit "codecept.json config" and set "show: true" value for Puppeteer:

exports.config = {
tests: './*_test.js',
output: './output',
helpers: {
Puppeteer: {
url: 'http://jspears.github.io/subschema',
show: true,
}
},
include: {
I: './steps_file.js'
},
bootstrap: null,
mocha: {},
name: 'User'
}

Step 9. Rerun the browser
One more time, enter the command "npx codeceptjs run --steps".
On the screen, we have a browser and terminal windows. In the terminal, the test has stopped running and waiting for commands from us.

Step 10. Receiving test data
While the pause () command is being executed in our code, we can enter any commands in the terminal window and watch how they are executed while the browser is running.
 To get the test data, you need to enter "I.fillField" commands in the terminal window and, simultaneously, you can also watch the test execution in an open browser.
 It turns out to be not so difficult, for this test it is not necessary to use locators like XPath, codeceptjs perfectly recognizes fields with labels like "User Name", "Password", "Repeat Password". Unlike Selenium, where you need to spend extra time on the recognition of fields with the help of "locators" so that our test would work.
Now, you see that our fields are filled with data.
Next, scroll down the page and see our previously entered values ​​in the form of a script.

Step 11. The layout of the code-obtained data
Copy the resulting script with our data and paste it into your JS file in the editor (For example, my file name is ‘Login_test.js’).
A few changes and it should turn out to be this:

Feature (‘open login page and print value’);
Scenario (‘try react app’, (I) => {
I.amOnPage (‘/’);
I.click (‘Login’);
pause();
I.fillField (‘username’, '[e-mail]')
I.fillField (‘password’, ‘test’),
I.fillField (‘confirmPassword’, ‘test’)
});

Step 12. Final test and verification
Now we run our test again using the command “npx codeceptjs run --steps”
At the end of the test, it is imperative to make a check that not just the actions were performed, but the result was achieved.
For example, you can check that the form under the input fields at the bottom of the browser contains the text.
To do this, we add the following commands in the terminal window:

I.see (‘“username”: “[e-mail]”’)
I.see (‘“password”: “test”’);
I.see (‘“confirmPassword”: “test”’)

These commands are called Assertions, and it is believed that any test should include them.

The test we’ve created is working and is now verified. Congratulations. You, as a beginner, in 12 simple steps conducted a test which automatically fills in the fields on the site and “authenticates”. This has been the first experience of test automation for me, and, finally, the tests don’t scare me anymore. And I will think about how to improve my skills in test automation. I hope that CodeceptJS will help me with this.

Comments

[Henrique Pacheco]

Hey :) very nice post 👌

You should also check Cypress (cypress.io/), I've been using it for E2E testing in a couple of projects and really enjoy the simple API!

[vladimirbag]

Hey.

However, cypress has lots of limitations, for instance you can't upload or download files, no multiple tabs or iframes support. While Cypress is a good tool for components testing, for general end 2 end tests I prefer Puppeteer from Google Chrome. I also use CodeceptJS which has a very simple syntax and brings cypress-like experience to Puppteer.

[vladimirbag]

Hey)

Thanks for the feedback.

Be sure to see your offer.