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?

Getting Started

npm install testcafe

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

Setting Up Your Files

Import TestCafe

import { Selector } from 'testcafe'

Done.

Fixtures

fixture `Testing Out Tests`

Using the Page Function

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

Writing The Test

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

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!

Blaire is a musical theatre performer who also moonlights as a full-stack software engineer. https://www.linkedin.com/in/blaire-baker