Hit enter after type your search item
Find zen in automation

Easy recipes for every day

The beginner’s guide to Testcafe setup

/
/
/
95 Views

When I started to work on test automation project in testcafe, I run into a lack of information about this tool. I mean yes, there is an official website and some articles , but as a beginner I wish I had an instruction about how to set it up from scratch without trying to find breadcrumbs from all around the internet. Now, when I managed to set it up and working , I thought I just needed to share my steps.

⦁ Did you ever faced a situation when you start installing a tool, but there is no clear documentation about how to setup it after it?
⦁ Or there is an article but the author assumed some steps are too easy to cover them, and you left alone with your misunderstanding of what should you do.

If it sounds like you, or for some other reason you need to learn how to install and setup testcafe to write a test automation suite, please, grab a cuppa and have a read. This will be the first article in a series of articles i which I want to cover the whole process of working on TA project using Testcafe as a tool.

What is testcafe and How it generally works


Feel free to skip this step if you are familiar with TestCafe. Just as a short introduction:

Testcafe is a node-based testing tool, which works by testing a website via a proxy server. The server injects scripts into the page, which allows us to inspect and control elements on the page. It does a really great job of working with inputs, forms, upload file forms, and even iframes. It works in most of the browsers, mobile devices, and even cloud sources such as Browser Stack. Not to mention that testcafe is a free open source tool, which has also a paid tool for people who prefer not to code, but this is not about us, right? If you want to learn more about testcafe please visit their website

How to do I install TestCafe


⦁ Create a folder where you project will live.

⦁ Npm init (in order to run this command, you will need node.js and npm installed. If you don’t have it, go to npmjs.com/get-npm)
After you run this command , you will be asked several questions – you can leave most of them empty or by default. At the end you will have package.json created.You can always change those values later and this is what we will gonna do a bit later.
⦁ Global installation – this step can be skipped if you prefer to run testcafe from your project only.
npm install -g testcafe
⦁ Local installation – in case you want testcafe to be installed as a dependency for your project.
npm install –save-dev testcafe

How to create a test in testcafe


Now we are going to create our very first test in testcafe
I will cover test framework creation in the next articles, here I just want to show you the basics. So to begin with we will want to create Tests folder and a first test file. I’m writing tests in typescript, so the file will have ts extension test.ts

What is the main structure of the testcafe test file?
⦁ Import files
⦁ Feature – here you want to specify the page, possible user role and some preparation scripts if needed. Also, it’s quite useful to keep your tests more organised.
⦁ Test – All UI interactions and assertions should be performed here.

Let’s try to write a test for the main Google page, which will test that if we type something in Google and click Search button, then we will be redirected to another page and see if URL was changed and if it contains our search phrase.

So here is what we need to do:
⦁ Create a test.ts file
⦁ Import Selectors and create a basic structure of the test
⦁ Go to the Google page and inspect elements
⦁ Write code for the main steps and assertions

As our first test, let’s click on the search input. To do so, we inspect search input element and try to find its unique identifier. In this case it looks like class attribute is something we could pick up (no ids or data-attributes unfortunately…). For each element we interact with we need to create a Selector object .

import { Selector } from 'testcafe';

fixture First test
.page http://google.com;

test('My first test', async t => {
const inputSearch: Selector = Selector('.gLFyf.gsfi')
await t.click(inputSearch);
});

Let’s check if actually will work? How to run the test?

You can run it straight from the command line by typing:
testcafe chrome test.ts

The best way to do it would be to add script to the package.json file.

{
"name": "ui-automation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"testcafe": "^1.6.1"
},
"devDependencies": {},
"scripts": {
"test": "testcafe chrome tests/test.ts"
},
"author": "",
"license": "ISC"
}

Now you will be able to run your test by typing npm run test in command line.

Ok, so we need to add more steps in order to make our test work.

We’ll need a function to get a current URL from the browser. In order to do this we will use Client Functions.

import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';


const getDocumentURI = ClientFunction(()=> document.documentURI);


fixture First test
.page http://google.com;

test(‘My first test’, async t => {
const inputSearch: Selector = Selector(‘.gLFyf.gsfi’);
const textToType: string = ‘testcafe’;
await t.click(inputSearch);
await t.typeText(inputSearch, textToType);
await t.pressKey(‘enter’);
await t.expect(getDocumentURI()).match(/testcafe/)
});

One more thing I want to mention
The purpose of this article is to give you a general overview of what testcafe tool is, and to provide a step by step tutorial how to let it work for the first time. This doesn’t cover Test automation framework planning, writing utility functions, more deep configuration, etc. This topics I will cover in the next articles. Please, let me know if you want me to cover any topic in particular or is there anything I could write in more detail?

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
This div height required for enabling the sticky sidebar