CodeceptJS: Testing made real fun 😎
Tags: testing, codeceptjs, selenium
Published: 2018-06-21 18:33:37

---
title: CodeceptJS: Testing made real fun 😎
published: true
description: Browser automation testing using codceptjs
tags: #testing #codeceptjs #selenium
---

So i heard about this new tool called [CodeceptJS](https://codecept.io/), 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](https://i.imgur.com/4k3LUeN.png)

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](https://i.imgur.com/gkT6kmu.png)

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](https://i.imgur.com/v9QKDqN.png)

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](https://i.imgur.com/Pq16WHx.png)

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](https://i.imgur.com/p64pMhY.png)

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

![Localization](https://i.imgur.com/lUJmWtu.png)

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

![Custom steps location](https://i.imgur.com/7oJE55u.png)

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

![URL of Site](https://i.imgur.com/xG1Rrbx.png)

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](https://i.imgur.com/D8cZYHk.png)

Note that once you've done the setup, your directory will look something like below. 👇

![Directory tree](https://i.imgur.com/Hynt5BG.png)

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

![codcept.json](https://i.imgur.com/Jzi7DxJ.png)

✔️ 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](https://i.imgur.com/up6u3EE.png)

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

![Feature Name](https://i.imgur.com/4FoommA.png)

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

![Login Google file](https://i.imgur.com/ytKOWqu.png)

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](https://i.imgur.com/KYmimFS.png)

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](https://i.imgur.com/UhLoQGI.png)


🎉Congrats! You've now done you're first automation test using codeceptjs 👏,


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