Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
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.
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();
});
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 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 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.
https://devexpress.github.io/testcafe
Automated browser testing for the modern web development stack.
TestCafe is a pure node.js end-to-end solution for testing web apps. It takes care of all the stages: starting browsers, running tests, gathering test results and generating reports. TestCafe doesn’t need browser plugins - it works in all popular modern browsers out-of-the-box.
Everything is included in a single module installed with one command.
npm install -g testcafe
No native parts to compile, no browsers plugins to install.
TestCafe automatically starts browsers, runs tests and gathers results. You only type a single command to begin testing.
testcafe chrome tests/
When testing is finished, TestCafe aggregates test results from different browsers and outputs them into one comprehensive report.
You can write TestCafe tests in ES2016 using the latest JavaScript features like async/await
.
Test API consists of over two dozen methods that can emulate all actions one could possibly do with a webpage. Chained syntax allows for code that is easy to write and read.
import { expect } from 'chai';
fixture `Example page`
.page `https://devexpress.github.io/testcafe/example`;
test('Emulate user actions and perform a verification', async t => {
await t
.setNativeDialogHandler(() => true)
.click('#populate')
.click('#submit-button');
const location = await t.eval(() => window.location);
expect(location.pathname).eql('/testcafe/example/thank-you.html');
});
Additionally, TestCafe automatically generates source maps for easy debugging. To debug your test code, start a debugging session in an IDE that supports source maps.
TestCafe allows you to access webpage elements using standard CSS selectors or custom selectors that run client JavaScript code. You can call a custom selector as a regular function within your test. It will execute your code on the client and pass the returned value back to the test. This allows you to determine the state of each element on the tested page or select a proper element to perform an action on.
import { expect } from 'chai';
import { Selector } from 'testcafe';
const elementWithId = Selector(id => document.querySelector(`#${id}`));
fixture `Example page`
.page `https://devexpress.github.io/testcafe/example`;
test('Type the developer name, obtain the header text and check it', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
const headerText = await elementWithId('article-header').innerText;
expect(headerText).to.equal('Thank you, John!');
});
Write tests without boilerplate code.
TestCafe automatically generates full-detailed reports that provide a test run summary and comprehensive information about errors. Automatic page screenshots, fancy call sites and call stacks free of TestCafe internals allow you to easily detect error causes.
Use one of built-in reporters to output test results or create your own one to produce custom reports.
TestCafe is easy to set up on popular Continuous Integration platforms as it allows you to test against various browsers: local, remote or cloud (e.g., Sauce Labs). You can also create a custom browser provider to add support for a browser or a cloud platform of your choice.
Ensure that Node.js and npm are installed on your computer, then run a single command:
npm install -g testcafe
For more information, see Installing TestCafe.
To create a test, create a new .js file anywhere on your computer. This file must have a special structure: tests must be organized into fixtures. Thus, begin by declaring a fixture using the fixture function.
fixture `Getting Started`
In this tutorial, you will create a test for the https://devexpress.github.io/testcafe/example sample page. Specify this page as a start page for the fixture by using the page function.
fixture `Getting Started`
.page `https://devexpress.github.io/testcafe/example`;
Then, create the test function where you will place test code.
fixture `Getting Started`
.page `https://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
// Test code
});
You can simply run the test from a command shell by calling a single command where you specify the target browser and file path.
testcafe chrome test1.js
TestCafe will automatically open the chosen browser and start test execution within it.
Important! Make sure to keep the browser tab that is running tests active. Do not minimize the browser window. Inactive tabs and minimized browser windows switch to a lower resource consumption mode where tests are not guaranteed to execute correctly.
For more information on how to configure the test run, see Command Line Interface.
While the test is running, TestCafe is gathering information about the test run and outputting the report right into a command shell.
For more information, see Reporters.
Every test should be capable of interacting with page content. To perform user actions, TestCafe provides
a number of actions: click
, hover
, typeText
, setFilesToUpload
, etc.
They can be called in a chain.
The following fixture contains a simple test that types a developer name into a text editor and then clicks the Submit button.
fixture `Getting Started`
.page `https://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});
All test actions are implemented as async functions of the test controller object t
.
This object is used to access test run API.
To wait for actions to complete, use the await
keyword when calling these actions or action chains.
TestCafe allows you to observe the page state. For this purpose, it offers special kinds of functions that will execute your code on the client: Selector used to get direct access to DOM elements and ClientFunction used to obtain arbitrary data from the client side. You call these functions as regular async functions, that is you can obtain their results and use parameters to pass data to them.
For example, clicking the Submit button on the sample web page opens a "Thank you" page.
To get access to DOM elements on the opened page, the Selector
function can be used.
The following example demonstrates how to access the article header element and obtain its actual text.
import { Selector } from 'testcafe';
// Declare the parameterized Selector function
// to get access to a DOM element identified by the `id` attribute
const elementWithId = Selector(id => document.getElementById(id));
fixture `Getting Started`
.page `https://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
// Use the Selector function to get access to the article header
const articleHeader = await elementWithId('article-header');
// Obtain the text of the article header
let headerText = articleHeader.innerText;
// Or use a shorthand form to obtain article header text directly
headerText = await elementWithId('article-header').innerText;
});
For more information, see Selecting Page Elements.
A functional test also should check the result of actions performed. For example, the article header on the "Thank you" page should address a user by the entered name. To check if the header is correct, you have to add an assertion to the test.
You can use assertions from Node's built-in assert module or from any third-party assertion library. Before calling assertions, make sure an assertion library is installed into your project.
The following test demonstrates how to use an assertion from Chai Assertion Library.
Before running the test, install the assertion library by calling the npm install --save-dev chai
command.
import { expect } from 'chai';
import { Selector } from 'testcafe';
// Declare the parameterized selector function
// to obtain text content of an element identified by the `id` attribute
const elementWithId = Selector(id => document.getElementById(id));
fixture `Getting Started`
.page('https://devexpress.github.io/testcafe/example');
test('My first test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
// Use the Selector function to get access to the article header
const headerText = await elementWithId('article-header').innerText;
// Use the assertion to check if the actual header text is equal to the expected one
expect(headerText).to.equal('Thank you, John Smith!');
});
Please use our issues page to report a bug or request a feature.
For general purpose questions and discussions, use the discussion board.
For more information on how to help us improve TestCafe, please see the CONTRIBUTING.md file.
Developer Express Inc. (https://devexpress.com)
FAQs
Automated browser testing for the modern web development stack.
The npm package testcafe receives a total of 155,414 weekly downloads. As such, testcafe popularity was classified as popular.
We found that testcafe demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.