Using TestCafe with React.js

TestCafe is a web application automation framework build on node.js. In this article let us learn how easily we can use this with react with an example which has a registration form.

React.js + TestCafe

Let us first create a sample app using npx

npx create-react-app test-cafe-example

This should create a starter react application. Let us now modify App.js file and create a simple registration form with few input fields and a submit button. Here i am adding first name, last name, email, username and password as input fields for registration.

Create a state attribute to track if the form is submitted or not which will be true when the button is clicked and a success message is shown that the form is submitted. (Not adding any form validations here, you can clone the source code and experiment on it). Your code should look something similar to this

You can now start the application using `yarn start` and see if the app is running in the way we are expecting or not. Fill the form and submit the form to see if you can see the success message. Make sure the app is working properly and then we move on to next step on writing the automation test using testcafe.

First install testcafe globally

npm install -g testcafe

Add testcafe as dev dependency to your project

yarn add --dev testcafe     #if you are using yarn
npm i testcafe --save-dev     #if you are using npm

Now let us start writing the test which will open the app in the browser fill the form with the values provided and then click on submit and validate if the success message is shown or not.

Test cases using TestCafe should be organised using fixtures, you can give any description and the page url to be opened in the browser. In our case

fixture `Some description`
    .page `http://localhost:3000`;

Now the tests should follow after defining the fixture which will open the browser in runtime. Let us defined a simple test that will check if the input field with id firstName exists and then fill it with a value and then check if the value is available in the input field.

test('Check if the firstName field exists', async t => {
    const firstName = 'firstName';
    const firstNameInput = Selector('#firstName');
    const firstNameInputExists = firstNameInput.exists;
    await t
        .expect(firstNameInputExists).ok()
        .typeText(firstNameInput, firstName)
        .expect(firstNameInput.value).eql(firstName)
})

Make sure you have the Selector import statement from testcafe. In this test we are finding #firstName with the help of Selector and then checking if the input exists and then adding the text using typeText function and then expect if the value inputted is same as what we added. Run the test to see if it’s working in chrome.

testcafe chrome {filename}.test.js

Similarly i have added case for each and every field and also click submit button and check the success message if displayed or not. See below

Writing an automation test using testcafe was pretty simple right !!

Ref TestCafe Docs: https://devexpress.github.io/testcafe/documentation/guides/

Full source code: https://github.com/sampathkatari/test-cafe-react-example