February 14, 2019
Hein-Carl ‐ Tester
Most people are lazy, and testers are no exception. It’s one of the main reasons automated end to end and regression tests exist. There are dozens of different automation tools in every thinkable programming language (however… I would pay to see someone create a proof of concept end-to-end test in Fortran). So, which one do you pick? In this blog I will make a case for CodeceptJS and offer a short introduction.
Before starting with test automation, it’s advisable to spend some time getting familiar with the basics of web applications. How are they built? And how does every part communicate with each other?
The best way to learn this is to take an introductory course in HTML and CSS. There are a lot of them on the internet, but I would suggest Introduction to Basic HTML & HTML5 and Introduction to Basic CSS from FreeCodeCamp. This will help you get comfortable with the Document Object Model DOM and finding the unique elements for your tests.
1. Multiple testing tools in one
Codecept itself is not so much a testing tool as a wrap around multiple testing tools. This means that with CodeceptJS you can pick between WebDriverIO, Protactor, Nightmare, Appium and Puppeteer and use the same script to test on all of those. You can even test your REST Api with and integrate this with your e2e tests.
2. Easy to set up
As the next paragraph illustrates, you get a basic test running in around five minutes, and it's quite easy. This makes it ideal for test automation novices and it means you don’t have to spend a lot of resources in setting up a test framework in small projects.
In case CodeceptJS is missing that one thing that’s absolutely positively necessary to run your e2e tests, it’s very easy to create a helper class to do just that.
Now that you know why you should start with CodeceptJS, let’s get started. First of all, make sure you have NPM installed. You can check this with npm -v in your terminal. If npm is an unknown command, it means you need to install NPM.
After that, from the directory you want to create the tests in run the following command: [sudo] npm install -g codeceptjs webdriverio. This will install both CodeceptJS and WebDriverIO globally.
WebDriverIO will require Selenium Server to be installed. You’ll also need ChromeDriver or GeckoDriver to run corresponding browsers. Use Selenium Standalone to install and run Selenium, ChromeDriver, Firefox Driver with one package:
- npm install selenium-standalone@latest -g
- selenium-standalone install
You can now start the Selenium server with selenium-standalone start. Selenium will now be available on port 4444.
After you’ve installed Codecept, you can set it up for your first test by following the steps as described in their own Quickstart-guide. You just have to answer a few questions and Codecept will set everything up for you:
In this case, I pointed Codecept to create a special tests-folder for all the tests and an output-folder for the test attributes like screenshots of failed tests, logs and test reports. I also created a place for custom steps that we will use later on. The base url and browser information are settings that will be used for the tests. You can edit these, and all other ones, in your codecept.conf.js-file.
Writing your first test
Now that Codecept is set up, we can create our first test. To do this, use the generate test command: codecept gt. As seen below, this creates a new document with a feature name:
This is your first test! Try running it with codeceptjs run. You’ll see a Chrome browser being started and closed and a succesful test. Because the test is empty, nothing else is happening. So, let’s add some commands:
There you have it: a simple test script. Now run codeceptjs run again. You’ll see a lot more happening than last time. You’ve just run your first test! Take a look at the reference list to see all the possible methods that you can use.
When expanding your e2e tests you encounter steps - like logins - that you’re repeating over and over. Instead of copy-pasting these steps every time, you can easily move them to Codecept’s custom steps file. During the initial setup we had already created the steps.js-file. From our current test, it would make sense to move the steps that handle the cookie banner to a seperate function, because I expect we will be using it in more tests. Follow the comments in the steps.js-file and move the steps concerning the cookie banner to the steps.js-file. When you are done, it should look like something like this:
You can now use the clickCookieButton()-function in your tests, which should look like this:
There you go! Your first test in Codecept. Hopefully this is enough of an explanation to get you started. Hopefully you are convinced to start using it as well. The repository is also visible on GitHub with all the used examples, so if you have more questions you can also ask them there.
Get in touch
We'd love to hear
We will get back to you as soon as we can.