loading...

CodeceptJS: Testing made real fun 😎

droidmakk profile image Kabeer ( Afroze ) Khan ・4 min read

So i heard about this new tool called CodeceptJS, well it's been there for a while. Thought it would be something similar to either puppeteer or selenium

Then I ran through its documentation where it said that you can switch frameworks at ease with no code change or run it on multiple frameworks and browsers just by providing specific configurations. It can do API testing, browser automation headless or not. Test your android application.

πŸ€” Well that's interesting!

PS: If you read more ( documentation ) there's more to it than meets the eye πŸ‘€.

By the end you'll know how to run a basic browser automation testing using Codecept JS for your web application βœ… .

So I decided to get my hands dirty on it πŸ‘. To get started i had to run some prerequisite check. The basic things were I should've installed Nodejs and npm/yarn.

node -v
npm -v
yarn -v

Then install the package called selenium-standalone and webdriverio as global

For yarn
yarn global add selenium-standalone webdriverio

For npm
npm install --global selenium-standalone webdriverio

Selenium and webdriverio installation

Now we'll allow selenium-standalone to install the dependencies it wants. For that to happen we need run the following command.

selenium-standalone install

Now let's install for what we're here for! πŸ™‡

For yarn
yarn global add codeceptjs

For npm
npm install --global codeceptjs

Then create a folder in your home directory or any project directory.

mkdir google-logintest
cd google-logintest

Now let's generate a boilerplate for testing.

codeceptjs init

Once you do that you'll be taken through an interactive set of questions.
First

Here you'll be specifying where you're test files are located. For now we'll identify the naming convention.
Codeceptjs init

Now you need to specify the driver that you're going to use in the background.

Beauty of CodeceptJS is that you can execute on multiple driver with multiple configurations either parallelly or sequentially, with a little bit of customization with no extra code πŸ˜‡.

we'll be using webdriverio for now which is based on selenium.

Select Driver

Now the location of Output. While executing you're code if any specific command fails the screenshot at that time of execution is taken and saved to this particular directory with the failed step as image's name.
Sweet right!

Location of outputs

Now this would be the object I we'd extending to write our code.
You'll understand what's that when we start to code.

Extend with custom steps

Here you'll specify the localization. We'll just go with English for now!

Localization

This is the steps file where we'll place our custom steps.

Custom steps location

And now the URL of site which we are going to test. we'll use https://google.com

URL of Site

Finally the browser which we're going to use. Right now we'll use chrome
Just press enter key and accept the default.

Select Browser

Note that once you've done the setup, your directory will look something like below. πŸ‘‡

Directory tree

If you take a look at codecept.json file it'll contain the configuration which we've specified throughout these above steps.

codcept.json

βœ”οΈ The Stage is setup and we'll start with tests. Codecept JS provides a feature to generate tests using the CLI itself.

codeceptjs gt

Another interactive menu...
Now we'll give file name as login_google.

Login Google

Let's leave the feature name to default( Login google ).

Feature Name

Now this will generate us a test file as below. Which will look like this.

Login Google file

Let's do some code now πŸ™‡.

So edit your generated test file to something like one below.
replace the marked tags with your email-id and password

Code

if you try and decode it line by line.
βœ”οΈ I.amOnPage('/') you're on page https://google.com
βœ”οΈ I.click('Sign in') I'm clicking a button called Sign in
βœ”οΈ I.fillField('xpath of email field','your email-id') Typing in my email id
βœ”οΈ I.click('xpath to next button below') Clicking NEXT button below text field
βœ”οΈ I.wait('2') I'm waiting for two seconds for the page to load.
βœ”οΈ I.fillField('xpath ot password field','your password') Filling in my password
βœ”οΈ I.click('xpath to next') I'm clicking on NEXT button to login.

You can get an elements x-path by going to developer tools [F12]
right-click on that elements code πŸ‘‰ Copy πŸ‘‰ Copy XPath

Now Save it and exit [ESC] + :x( if in VIM ) .

Open a new terminal and run selenium-standalone start
Now from your test directory run codceptjs run

On successfull execution, you'll get something as below.

output

πŸŽ‰Congrats! You've now done you're first automation test using codeceptjs πŸ‘,

First article... critics very much welcome ✌️!

Posted on by:

droidmakk profile

Kabeer ( Afroze ) Khan

@droidmakk

Full Stack πŸ‘¨β€πŸ’». Developing Cross-platform applications, Microservices, PWA's & Cloud-native applications. JS/TS πŸ’›.

Discussion

pic
Editor guide
 

The more readable the test; the more likely you are to maintain it.

CodeceptJS goes to great lengths to achieve this. It injects things and does a lot of things in the effort to keep those test files neat. Often at a cost of complexity in its helper tools.

But overall it's quite magical.

In that spirit, I would recommend to keep your locators as simple as possible. Tying yourself to the DOM structure will require more maintainence of your tests. (To be fair, Google doesn't make this easy, but then again, it's a production deployment).

For example:

I.fillField("#identifierId")
I.click("#identifierNext")
I.waitForElement("#password", 2)
I.fillField("input", "#password") // Second parameter is 'context'.
I.click("#passwordNext")

XPath is pretty cool, but it's also very OP. I'd only reach for it when form-name/context/CSS can't locate the elements I need.

But to be fair, if they can't - then a screen reader can't either. So maybe it just needs to be refactored anyway.

Great article. I wish more people got on to the CodeceptJS train. It's fantastic.