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 βοΈ!
Top comments (1)
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:
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.