testcafe

What is testcafe?

TestCafe is an end-to-end testing framework for web applications. It allows you to write tests in JavaScript or TypeScript, run them across multiple browsers, and provides a rich set of features for automating user interactions and verifying application behavior.

What are testcafe's main functionalities?

Cross-browser Testing

TestCafe allows you to run tests across multiple browsers simultaneously. This code sample demonstrates how to set up TestCafe to run tests in both Chrome and Firefox.

const createTestCafe = require('testcafe');
let testcafe = null;

createTestCafe('localhost', 1337, 1338)
    .then(tc => {
        testcafe = tc;
        const runner = testcafe.createRunner();

        return runner
            .src('tests/test.js')
            .browsers(['chrome', 'firefox'])
            .run();
    })
    .then(failedCount => {
        console.log('Tests failed: ' + failedCount);
        testcafe.close();
    });

Assertions

TestCafe provides a rich set of assertions to verify the state of your application. This code sample demonstrates how to use assertions to check that the text of an element matches the expected value.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

const developerNameInput = Selector('#developer-name');
const submitButton = Selector('#submit-button');
const articleHeader = Selector('#article-header');






test('My first test', async t => {
    await t
        .typeText(developerNameInput, 'John Smith')
        .click(submitButton)
        .expect(articleHeader.innerText).eql('Thank you, John Smith!');
});

Screenshots and Video Recording

TestCafe allows you to take screenshots and record videos of your tests. This code sample demonstrates how to take a screenshot after performing some actions.

import { Selector } from 'testcafe';

fixture `Screenshot and Video`
    .page `http://devexpress.github.io/testcafe/example`;

const developerNameInput = Selector('#developer-name');
const submitButton = Selector('#submit-button');






test('Take a screenshot', async t => {
    await t
        .typeText(developerNameInput, 'John Smith')
        .click(submitButton)
        .takeScreenshot();
});

Parallel Test Execution

TestCafe supports parallel test execution to speed up the testing process. This code sample demonstrates how to run tests in parallel with a concurrency factor of 3.

const createTestCafe = require('testcafe');
let testcafe = null;

createTestCafe('localhost', 1337, 1338)
    .then(tc => {
        testcafe = tc;
        const runner = testcafe.createRunner();

        return runner
            .src('tests/test.js')
            .browsers(['chrome', 'firefox'])
            .concurrency(3)
            .run();
    })
    .then(failedCount => {
        console.log('Tests failed: ' + failedCount);
        testcafe.close();
    });

Other packages similar to testcafe

cypress

Cypress is a front-end testing tool built for the modern web. It offers a rich, interactive UI and a powerful API for writing tests. Compared to TestCafe, Cypress provides a more interactive debugging experience but is limited to running tests in Chrome and Electron.

selenium-webdriver

Selenium WebDriver is a widely-used tool for automating web browsers. It supports multiple programming languages and browsers. Compared to TestCafe, Selenium WebDriver offers more flexibility and control but requires more setup and configuration.

puppeteer

Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It is great for automating browser tasks and scraping. Compared to TestCafe, Puppeteer is more low-level and requires more boilerplate code for writing tests.

README

Automate end-to-end web testing with TestCafe, a Node.js-based testing framework.

TestCafe is free and as easy to use as 1-2-3:
1. Write your tests in JS or TypeScript.
2. Execute your tests.
3. View test results.

Homepage   •   Documentation   •   FAQ   •   Support

• Works on all popular environments: TestCafe runs on Windows, MacOS, and Linux. It supports desktop, mobile, remote and cloud browsers (UI or headless).
• 1 minute to set up: You do not need WebDriver or any other testing software. Install TestCafe with one command, and you are ready to test: npm install -g testcafe
• Free and open source: TestCafe is free to use under the MIT license. Plugins provide custom reports, integration with other tools, launching tests from IDE, etc. You can use the plugins made by the GitHub community or create your own.

Running a sample test in Safari

Table of contents

• Features
• TestCafe Studio: IDE for End-to-End Web Testing
• Getting Started
• Documentation
• Get Help
• Issue Tracker
• Stay in Touch
• Contributing
• Plugins
• Different Versions of TestCafe
• Badge
• License
• Creators

Features

Stable tests and no manual timeouts
TestCafe automatically waits for page loads and XHRs before the test starts and after each action. It also features smart test actions and assertions that wait for page elements to appear. You can change the maximum wait time. If elements load faster, tests skip the timeout and continue.

Rapid test development tool
When you enable live mode, changes to test code immediately restart the test, and you instantly see the results.

Latest JS and TypeScript support
TestCafe supports the most recent JavaScript-related features, including ES2017 (async/await). You can also use TypeScript if you prefer a strongly typed language instead.

Detects JS errors in your code
TestCafe reports JS errors that it locates on a given webpage. Tests automatically fail if TestCafe encounters such errors.
You can, however, disable this option.

Concurrent test launch
TestCafe can open multiple instances of the same browser and run parallel tests (to help decrease test execution time).

PageObject pattern support
The TestCafe's Test API includes a high-level selector library, assertions, etc. You can combine them to implement readable tests with the PageObject pattern.

const macOSInput = Selector('.column').find('label').withText('MacOS').child('input');

Easy to include in a continuous integration system
You can run TestCafe from a console, and its reports can be viewed within CI systems (TeamCity, Jenkins, Travis & etc.)

Love TestCafe Open-source Edition? Want to Record Tests without Writing JavaScript or TypeScript Code?

TestCafe Studio: IDE for End-to-End Web Testing

TestCafe is the perfect choice for JavaScript developers and experienced Q&A teams. If you’d like to delegate testing to QA engineers and are looking for a code-free way to record and maintain tests compatible with your existing infrastructure, check out TestCafe Studio - a testing IDE built atop the open-source version of TestCafe.

Review the following article to learn how TestCafe Studio can fit into any workflow: What's Better than TestCafe? TestCafe Studio.

Record and Run a Test in TestCafe Studio

Getting Started

Installation

Ensure that you run Node.js version 16 or higher, and run the following command:

npm install -g testcafe

Creating the Test

For this simple example, we will test the following page: https://devexpress.github.io/testcafe/example

Create a .js or .ts file on your computer. Remember that a .js or .ts file must maintain a specific structure: tests must be organized into fixtures. You can paste the following code to see the test in action:

import { Selector } from 'testcafe'; // first import testcafe selectors

fixture `Getting Started`// declare the fixture
    .page `https://devexpress.github.io/testcafe/example`;  // specify the start page


//then create a test and place your code within it
test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if actual header text equals expected text
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Running the Test

Call the following command in a command shell. Specify the target browser and file path.

testcafe chrome test1.js

TestCafe opens the browser and begins test execution.

Important: Make certain the browser tab that runs tests stays active. Do not minimize the browser window. Inactive tabs and minimized browser windows switch to lower resource consumption mode. In low consumption mode, tests may not execute correctly.

Viewing the Results

TestCafe outputs results into a command shell by default. See Reporters for more information. You can also use plugins to customize reports.

Read the Getting Started page for additional assistance.

Documentation

Visit the following webpage to review our online help system: Documentation.

Get Help

Join the TestCafe community on Stack Overflow. Ask and answer questions using the TestCafe tag.

Issue Tracker

Use our GitHub issues page to report bugs and suggest enhancements.

Stay in Touch

Follow us on Twitter. We post TestCafe news and updates.

Contributing

Read our Contributing Guide to learn how to contribute to the project.

To create your own plugin for TestCafe, you can use these plugin generators:

• Build a browser provider to set up tests on your on-premises server farm, to use a cloud testing platform, or to start your local browsers in a special way. Use this Yeoman generator to write only a few lines of code.
• To build a custom reporter with your formatting and style, check out this generator.

If you want your plugin to be listed below, send us a note in a Github issue.

Thanks to all of our contributors – We appreciate your commitment to the TestCafe community.

aha-oretama	ai	aleks-pro	Aleksey28	AlexanderMoiseev	AlexanderMoskovkin

alexey-lin	AlexKamaev	alexphilin	AlexSkorkin	alexwybraniec	AnastasiaIvanova8

andrewbranch	AndreyBelym	AndyWendt	AnnaKondratova	anthophobiac	Artem-Babich

Arthy000	augustomezencio-hotmart	bdwain	benmonro	beyondcompute	bill-looby-i

bsmithb2	caseyWebb	cdrini	cgfarmer4	Chris-Greaves	churkin

dej611	DIRECTcut	Dmitry-Ostashev	eignatyev	ericyd	Farfurix

flora8984461	GeoffreyBooth	helen-dikareva	honsq90	infctr	inikulin

Ivan-Katovich	jamesgeorge007	jaypea	josephmalam	kanhaiya15	karolnowinski

kirovboris	kisrefod	LavrovArtem	link89	lzxb	macdonaldr93

MargaritaLoseva	Marketionist	MatthewNielsen27	mattkubej	mattmanske	mcjim

miherlosev	morfey13	mostlyfabulous	murajun1978	NickCis	Nuarat

Ogurecher	PayBas	pgorny	pietrovich	radarhere	raspo

rbardini	renancouto	rob4629	rueyaa332266	sgrillon14	smockle

stefanschenk	superroma	sylbru	taiki-fw	testcafe-build-bot	theghostbel

titerman	tobiasbueschel	varunkumar	VasilyStrelyaev	vitalics	Vla8islav

wentwrong	b12031106	danielroe	danieltroger	DevSide	intermike

kirillsalikhov	michaelficarra	rr13k	tomashanacek	TrevorKarjanis

Plugins

TestCafe developers and community members made these plugins:

• Browser Providers
  Use TestCafe with cloud browser providers and emulators.

  • SauceLabs provider (by @AndreyBelym)
  • BrowserStack provider (by @AndreyBelym)
  • CrossBrowserTesting provider (by @sijosyn)
  • LambdaTest provider (by @kanhaiya15)
  • Nightmare headless provider (by @ryx)
  • Testingbot provider (by @testingbot)
  • fbsimctl iOS emulator (by @ents24)
  • Electron (by @AndreyBelym)
  • Puppeteer (by @jdobosz)
  • Puppeteer Chromium (by @stefanschenk)

• Framework-Specific Selectors
  Work with page elements in a way that is native to your framework.

  • React (by @kirovboris)
  • Angular (by @miherlosev)
  • Vue (by @miherlosev)
  • Aurelia (by @miherlosev)

• Plugins for Task Runners
  Integrate TestCafe into your project's workflow.

  • Grunt (by @crudo)
  • Gulp (by @inikulin)

• Custom Reporters
  View test results in different formats.

  • TeamCity (by @nirsky)
  • Slack (by @Shafied)
  • NUnit (by @AndreyBelym)
  • TimeCafe (by @jimthedev)
  • Tesults (by @Tesults)

• GitHub Action
  Run TestCafe tests in GitHub Actions workflows.

  • Run TestCafe

• Test Accessibility
  Find accessibility issues in your web app.

  • axe-testcafe (by @helen-dikareva)

• IDE Plugins
  Run tests and view results from your favorite IDE.

  • TestCafe Test Runner for Visual Studio Code (by @romanresh)
  • TestLatte for Visual Studio Code (by @Selminha)
  • TestCafe runner for Webstorm (by @lilbaek)
  • Code snippets for TestCafe (by @hdorgeval)
  • SublimeText (by @churkin)

• ESLint
  Use ESLint when writing and editing TestCafe tests.

  • ESLint plugin (by @miherlosev)

• Cucumber Support
  Create and run tests that use the Cucumber syntax.

  • gherkin-testcafe (by @kiwigrid, now maintained by @Arthy000) - run your Cucumber tests with TestCafe as a backend. Requires CucumberJS.
  • testcafe-cucumber-steps (by @Marketionist) - provides predefined Cucumber steps for gherkin-testcafe.

Different Versions of TestCafe

	TestCafe	TestCafe Studio
No need for WebDriver, browser plugins or other tools	✓	✓
Cross-platform and cross-browser out of the box	✓	✓
Write tests in the latest JavaScript or TypeScript	✓	✓
Clear and flexible API supports ES6 and PageModel pattern	✓	✓
Stable tests due to the Smart Assertion Query Mechanism	✓	✓
Tests run fast due to intelligent Automatic Waiting Mechanism and Concurrent Test Execution	✓	✓
Custom reporter plugins	✓	✓
Use third-party Node.js modules in test scripts	✓	✓
Integration with popular CI systems	✓	✓*
Free and open-source	✓
Visual Test Recorder		✓
Interactive Test Editor		✓
Automatic Selector Generation		✓
Run Configuration Manager		✓
IDE-like GUI		✓

* You can use open-source TestCafe to run TestCafe Studio tests in CI systems.

Badge

Show everyone you are using TestCafe:

To display this badge, add the following code to your repository readme:

<a href="https://github.com/DevExpress/testcafe">
    <img alt="Tested with TestCafe" src="https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg">
</a>

Thanks to BrowserStack

We are grateful to BrowserStack for providing the infrastructure that we use to test code in this repository.

License

Code released under the MIT license.

Creators

Developer Express Inc. (https://devexpress.com)