Web automation testing with Test Cafe framework

What Is Test Cafe?

Test Cafe is an end-to-end testing framework for web applications, that runs on Node.js. and it supports all three major operating systems — Linux, Windows, and macOS. You can use Test Cafe to simulate common user scenarios in major desktop browsers, cloud browsers, and on mobile devices. TestCafe is available for free and distributed under an open-source MIT license. The heart of the TestCafe framework is a unique technology that simplifies cross-browser tests. It can run tests on all major browsers – Chrome, Edge, Safari, Opera, and Firefox.

Automation Testing With TestCafe

As we know, TestCafe tests are Node.js scripts. Test files consist of tests and fixtures.

Fixtures:

Fixtures are a group of tests that share the same stated URL.

Hooks:

Run before and after other parts of test suits. We can attach hooks to fixtures, tests, and entire test runs.

Use Hooks:

Testcafe provides several hooks that you can use in your test files:

• before: Runs before all tests in a fixture.
• beforeEach: Runs before each test in a fixture.
• after: Runs after all tests in a fixture.
• afterEach: Runs after each test in a fixture.

Advantages of Test Cafe:

• Can run your tests on any browser without having to download separate drivers for each browser.
• Less time to download and start creating tests. It is easy to install, configure, and get started.
• Cross-Browser Testing: Test Cafe supports all major browsers Edge, Safari, Chrome, Firefox, and IE.
• Automated Waiting: Test Cafe waits automatically for the elements to appear. There’s no need to insert External Waits.
• No external libraries or plugins are required.
• Built-in waiting mechanism.
• Run tests on remote computers or mobile devices.

Limitation of Test Cafe Framework

• Programming Language: Test Cafe supports only JavaScript/Typescript programming language.
• Assertion Libraries: Test Cafe has its assertion libraries; this feature can be good or bad based on the requirement.
• Selector Support: By default, Test Cafe supports only CSS-based selectors.

How to Install Test Cafe Framework

Pre-Requisites / Steps to follow:

1. Download and Install Node.Js  Download for Windows
   
2. Download and Install Visual Studio Code Download for Windows
3. Create a new folder for ex: TestCafe
   
4. Open the created folder in Visual Studio Code
   – Add extension Testcafe Snippet
   
5. Create a package.json. Open Visual Studio Code Terminal, Enter the command
   
6. Install TestCafe
   
7. Create a tests folder. TestCafe doesn’t create any default folder. You need to create the tests folder. The purpose of the tests folder is just to group all relevant tests. tests folder should be placed in the root of your project folder.
8. Create the first test using TestCafe. Though TestCafe supports JavaScript, Typescript, and Coffee Script. We are using JavaScript as it is easy to use.
9. Create Sample Testcafe script, Add JavaScript and Testcafe code
   
10. Add a valid path in the package.json file
    
    – Here we can execute a particular test case if we have multiple test cases in the project. So simply we have to give an appropriate name which is similar to our test script
    
11. To execute the testcafe script, Open the Visual Studio code terminal and Enter the command and press Enter key
    
12. The tests start executing, the results will appear in the console as seen below
    

Installation and setup to create HTML reports:

1. Firstly create folder under your projects folder and give name as htmlReports
2. Install package
   Command: npm install testcafe-reporter-html
3. Add the reporter flag to your test task runner
   Command: testcafe chrome test_folder/ --reporter html
4. Configure the output file
   By default the html is written to stdout. To write the html to a file use the Testcafe built-in method.
5. Command:
   
   

HTML Reports:

Run the Test Case on Multiple Browsers in Parallel:

Use the Testcafe with the ‘—concurrency’ flag to specify the number of concurrent test runs. For example, if you want to run the test case on Chrome and Firefox concurrently:

Command:

testcafe chrome,firefox myTest.js --concurrency 2

Explanation:

• chrome,firefox specifies that you want to run the test on both Chrome and Firefox.
• myTest.js is the path to your test case file.
• --concurrency 2 specifies that you want to run two test instances concurrently (one on Chrome and one on Firefox).

We can adjust the concurrency level as needed, depending on your available resources and requirements.

We at Varseno, provide Product Development Services for all business websites to improve their reliability, scalability and stability. Reach out to us for any web app services.