Writing My First Test: A Journey in TestCafe and Automation

As I continue my coding education post-bootcamp, I have looked back to a lot of my stretch goals for my capstone project that I didn’t complete. The big intimidating one? Implementing testing.

As I have begun the job search process, QA (aka Quality Assurance aka testing) engineer position have continued to pop up. Rather than continue to shy away from them, I decided to fling myself into the unknown abyss of testing and try a hand at it myself. My first dabble? TestCafe.

What the heck is TestCafe?

TestCafe is a test automation framework for Node.js that is used to test web applications. I was drawn to it because it looked super simple to use, didn’t require a ton of set up, and is written in JavaScript, a language I was already very familiar with. It also helped that the documentation is clear and concise for beginners like me (check it out here).

Getting Started

The set up could not be easier. Type one line of code in your console:

npm install testcafe

And that’s it! You’re done. TestCafe is installed on your project. I wasn’t kidding.

Setting Up Your Files

Now, let’s get to the good stuff. Step one is getting your files set up. Create a folder to hold all of your tests…convention is to call it spec or tests. Next, create a new JavaScript file inside that folder that will hold your fancy test. You can name it whatever you want, just make sure it ends in .js. I named mine ‘basic_test.js’. Very creative.

Import TestCafe

At the top of every testing file that you write, the TestCafe module must be imported. So, write this at the top of your document:

import { Selector } from 'testcafe'

Done.

Fixtures

All TestCafe tests must be organized into categories that are called fixtures. Before writing your first test, you must declare it using the fixture function, like so:

fixture `Testing Out Tests`

Using the Page Function

Next, we need to instruct the test as to what it is actually testing, using the page function. The TestCafe documentation very helpfully provides a page for you to play around with when writing your first test, which I will be using here:

fixture `Testing Out Tests`
   .page `https://devexpress.github.io/testcafe/example/`

Writing The Test

Now, we’re finally getting to the good stuff. After declaring your test with the fixture function, underneath we can call the test function like so:

test('My first test', async t => {
   // testing goodness goes in here
})

Inside the arrow function goes all of your test code. TestCafe provides a bunch of actions that you can use inside the tests: clicking, typing text, pausing the test, and even taking screenshots. I will go into all of these later, but for now I’m just going to have the test write my name in the input at the top:

test('My first test', async t => {
   await t.typeText('#developer-name', 'Blaire')
})

And we’ve written the first test! There is obviously a lot more too it and more details to iron out, but we’ve got it done!

Running Your Tests

Last but not least is knowing how to run your tests! All you have to do is call it in your console, along with what browser you would like to use. I’m going to use chrome, and call it like so:

testcafe chrome basic_test.js

Another option would be to update your scripts in your package.json file and type type ‘npm run test’ or whatever you decide to assign the tests to.

Aaaaand that’s all folks! Not too tough all things considered. Next week I will break down some of those TestCafe actions and the Selector that we imported at the top of the page. Happy coding!