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

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.

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.

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!

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.

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

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

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

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

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

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

✔️ 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.

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

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

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

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.

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

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