tessl/npm-testcafe

Automated browser testing for the modern web development stack.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

TestCafe

Name: tessl/npm-testcafe
Author: tessl

TestCafe is a Node.js-based end-to-end web testing framework that enables automated browser testing without WebDriver dependencies. It provides comprehensive browser automation, rich assertions, multi-browser support, and integrates seamlessly with CI/CD systems.

Package Information

Package Name: testcafe
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install -g testcafe or npm install --save-dev testcafe

Core Imports

const createTestCafe = require('testcafe');

For ES modules:

import createTestCafe from 'testcafe';

Test file imports:

import { Selector, ClientFunction, RequestLogger, RequestMock, Role, t } from 'testcafe';

Basic Usage

import { Selector } from 'testcafe';

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')
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Programmatic API Usage

import createTestCafe from 'testcafe';

const testcafe = await createTestCafe('localhost', 1337, 1338);
const runner = testcafe.createRunner();

await runner
    .src(['tests/fixture1.js', 'tests/fixture2.js'])
    .browsers(['chrome', 'safari'])
    .run();

await testcafe.close();

Architecture

TestCafe is built around several key components:

Test Controller: The t object providing browser actions and assertions
Selectors: CSS/XPath selectors for DOM element identification
Client Functions: JavaScript code execution in browser context
Request Hooks: HTTP request/response interception and mocking
Roles: User authentication and session management
Browser Providers: Interfaces to various browser engines
Reporter System: Customizable test result reporting

Capabilities

Browser Automation

Core browser interaction capabilities including clicks, typing, navigation, and element manipulation.

// Test controller provides browser automation
interface TestController {
    click(selector: string | Selector): Promise<TestController>;
    typeText(selector: string | Selector, text: string): Promise<TestController>;
    navigateTo(url: string): Promise<TestController>;
}

Browser Automation

Element Selection

Powerful selector system for identifying and interacting with DOM elements.

function Selector(init: string | Function): SelectorAPI;

interface SelectorAPI {
    (): Promise<NodeSnapshot>;
    find(cssSelector: string): SelectorAPI;
    withText(text: string | RegExp): SelectorAPI;
    nth(index: number): SelectorAPI;
    count: Promise<number>;
    exists: Promise<boolean>;
}

Element Selection

Assertions

Comprehensive assertion system for verifying application state and behavior.

interface Assertion {
    eql(expected: any): Promise<void>;
    notEql(expected: any): Promise<void>;
    ok(): Promise<void>;
    notOk(): Promise<void>;
    contains(expected: any): Promise<void>;
    match(re: RegExp): Promise<void>;
}

Assertions

Request Interception

HTTP request and response monitoring and mocking capabilities.

function RequestLogger(
    requestFilterRuleInit?: string | RegExp | object | Function,
    logOptions?: object
): RequestLogger;

function RequestMock(): RequestMock;

class RequestHook {
    constructor(requestFilterRuleInit?: string | RegExp | object | Function);
    onRequest(event: object): Promise<void>;
    onResponse(event: object): Promise<void>;
}

Request Interception

User Roles

Role-based authentication system for testing user workflows.

function Role(loginUrl: string, initFn: Function, options?: object): Role;

interface Role {
    anonymous: Role;
}

User Roles

Client Functions

Execute custom JavaScript code in browser context and return results to test.

function ClientFunction(fn: Function, options?: object): ClientFunction;

interface ClientFunction {
    (): Promise<any>;
    with(options: object): ClientFunction;
}

Client Functions

Programmatic API

Create and configure TestCafe instances programmatically for advanced test execution control.

function createTestCafe(
    hostname?: string,
    port1?: number,
    port2?: number,
    sslOptions?: object,
    developmentMode?: boolean
): Promise<TestCafe>;

interface TestCafe {
    createRunner(): Runner;
    createBrowserConnection(): Promise<BrowserConnection>;
    close(): Promise<void>;
}

Programmatic API

Test Organization

Global functions for organizing tests into fixtures and defining test cases.

/**
 * Creates a test fixture (test suite)
 * @param name - Fixture name
 * @returns FixtureFunction for chaining configuration methods
 */
function fixture(name: string): FixtureFunction;

/**
 * Creates a test case within a fixture
 * @param name - Test name
 * @param fn - Test implementation function
 * @returns TestFunction for chaining configuration methods
 */
function test(name: string, fn: (t: TestController) => Promise<void>): TestFunction;

Types

interface NodeSnapshot {
    tagName: string;
    attributes: object;
    boundingClientRect: object;
    style: object;
    innerText: string;
    textContent: string;
    namespaceURI: string;
    id: string;
    className: string;
    classNames: string[];
    value: any;
    checked: boolean;
    selected: boolean;
    selectedIndex: number;
    childElementCount: number;
    childNodeCount: number;
    hasChildNodes: boolean;
    hasChildElements: boolean;
    visible: boolean;
    focused: boolean;
    exists: boolean;
}

interface TestInfo {
    name: string;
    meta: object;
    fixture: {
        name: string;
        meta: object;
        path: string;
    };
    browser: {
        name: string;
        version: string;
        platform: string;
        headless: boolean;
        userAgent: string;
    };
}

interface FixtureFunction {
    (name: string): FixtureFunction;
    page(url: string | Function): FixtureFunction;
    httpAuth(credentials: object): FixtureFunction;
    beforeEach(fn: Function): FixtureFunction;
    afterEach(fn: Function): FixtureFunction;
    before(fn: Function): FixtureFunction;
    after(fn: Function): FixtureFunction;
    meta(key: string, value: string): FixtureFunction;
    meta(data: object): FixtureFunction;
    only: FixtureFunction;
    skip: FixtureFunction;
    disablePageReloads: FixtureFunction;
    disablePageCaching: FixtureFunction;
    clientScripts(scripts: string | object | Function | Array): FixtureFunction;
    requestHooks(hooks: RequestHook | Array<RequestHook>): FixtureFunction;
}

interface TestFunction {
    (name: string, fn: Function): TestFunction;
    page(url: string | Function): TestFunction;
    httpAuth(credentials: object): TestFunction;
    before(fn: Function): TestFunction;
    after(fn: Function): TestFunction;
    meta(key: string, value: string): TestFunction;
    meta(data: object): TestFunction;
    only: TestFunction;
    skip: TestFunction;
    disablePageReloads: TestFunction;
    disablePageCaching: TestFunction;
    clientScripts(scripts: string | object | Function | Array): TestFunction;
    requestHooks(hooks: RequestHook | Array<RequestHook>): TestFunction;
}