DOCSEARCHbyAlgolia
Submit Docs

TestCafe Documentation

repository·master·Indexed 27 days ago

https://github.com/devexpress/testcafe

A Node.js-based end-to-end web testing framework for automated browser testing using JavaScript or TypeScript without WebDriver. Features include automatic waiting, live mode, concurrency, and a high-level selector library for the PageObject pattern. Supports network request mocking via RequestMock, custom browser provider and reporter plugins, and integration with various CI/CD tools and IDEs. Version 3.7.6.

Tokens
19.6K
Snippets
10
Records
181
Agent score
92%

What's inside TestCafe

  1. Overview of TestCafe features

    master

    TestCafe is a Node.js-based end-to-end testing framework with the following key features:

    • Automatic Waiting: Automatically waits for page loads, XHRs, and element appearances, reducing the need for manual timeouts.
    • Live Mode: Automatically restarts tests when code changes are detected.
    • Modern JS/TS Support: Supports ES2017 (async/await) and TypeScript.
    • Error Detection: Automatically fails tests if JavaScript errors are encountered on the webpage.
    • Concurrency: Supports running multiple browser instances in parallel.
    • PageObject Pattern: Provides a high-level selector library to implement the PageObject pattern for readable tests.

  2. Explore TestCafe Plugins

    master

    TestCafe can be extended using various community and developer-made plugins to enhance functionality across different categories:

    • Browser Providers: Use cloud providers (SauceLabs, BrowserStack, LambdaTest, Testingbot) or specific engines (Electron, Puppeteer, Nightmare).
    • Framework-Specific Selectors: Use native selectors for React, Angular, Vue, or Aurelia.
    • Task Runners: Integrate with Grunt or Gulp.
    • Custom Reporters: Export results to TeamCity, Slack, NUnit, TimeCafe, or Tesults.
    • CI/CD: Use the official GitHub Action to run tests in workflows.
    • Accessibility: Use axe-testcafe to find accessibility issues.
    • IDE Support: Plugins available for VS Code, WebStorm, and SublimeText.
    • Linting: Use eslint-plugin-testcafe for writing tests.
    • Cucumber: Use gherkin-testcafe (requires CucumberJS) and testcafe-cucumber-steps for Gherkin syntax support.

  3. Compare TestCafe Open-Source vs. TestCafe Studio

    master

    TestCafe offers two main versions depending on your needs:

    TestCafe (Open-Source)

    • Best for: Developers writing tests in JavaScript or TypeScript.
    • Features: Cross-platform/browser support, Smart Assertion Query Mechanism, Automatic Waiting, Concurrent Test Execution, custom reporter plugins, and third-party Node.js module support.
    • Cost: Free and open-source.

    TestCafe Studio (Commercial IDE)

    • Best for: Users who want a GUI-based testing environment.
    • Features: Includes all Open-Source features plus:
      • Visual Test Recorder
      • Interactive Test Editor
      • Automatic Selector Generation
      • Run Configuration Manager
      • IDE-like GUI
    • CI Integration: You can use the open-source TestCafe engine to run tests created in TestCafe Studio within your CI systems.

  4. Build a browser provider plugin

    master
    To extend TestCafe with a custom browser provider (e.g., for on-premises server farms, cloud testing platforms, or specialized local browser configurations), use the Yeoman generator generator-testcafe-browser-provider. This allows you to set up the necessary infrastructure with minimal code.

  5. Run TestCafe tests from the CLI

    master

    Execute your tests by calling the testcafe command followed by the target browser and the path to your test file.

    Important: Keep the browser window active and do not minimize it during execution. Minimized windows may enter a low resource consumption mode that can cause tests to fail.

    testcafe chrome test1.js

  7. Install TestCafe via npm

    master

    To install TestCafe globally, ensure you have Node.js version 16 or higher installed, then run the following command. TestCafe does not require WebDriver or any other external testing software.

    npm install -g testcafe

  8. Create a TestCafe test

    master

    TestCafe tests must be organized into fixture blocks. A fixture defines the starting page for a set of tests. Within a fixture, you define individual test blocks using an asynchronous function. You can use Selector to find elements and the t controller to perform actions like typeText and click, or to perform assertions using .expect().

    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!');
});

  9. TestCafe CLI Usage and Command Syntax

    master

    The TestCafe CLI follows this general syntax:

    testcafe [options] <comma-separated-browser-list> <file-or-glob ...>

    Browser Selection

    • Aliases: Use aliases like edge, chrome, etc.
    • Multiple Browsers: Specify multiple browsers separated by commas.
    • All Browsers: Use the all alias to run tests against all available browsers.
    • Remote Browsers: Use the remote alias. You can specify the number of remote browsers using a semicolon (e.g., remote:3).
    • Browser Providers: If using a provider plugin, use the format pluginName:browserName (e.g., saucelabs:chrome@51).

    Test Files

    Specify one or more file paths or glob patterns to execute specific tests.

  10. Manage Cookies and Storage

    master

    Use these commands to manipulate browser cookies:

    • setCookies(cookies, { url }): Sets cookies for the specified URL(s). cookies is an array of cookie objects.
    • getCookies({ urls, cookies }): Retrieves cookies. You can filter by specific urls or specific cookies.
    • deleteCookies({ urls, cookies }): Deletes cookies for the specified URL(s) or specific cookie names.

  11. Navigate and Manage Windows

    master

    Control browser navigation and window management using the following commands:

    • navigateTo(url, { stateSnapshot, forceReload }): Navigates to a specific URL. Use forceReload: true to force a page reload.
    • openWindow(url): Opens a new window at the specified URL.
    • closeWindow(windowId): Closes a specific window by its ID.
    • switchToWindow(windowId): Switches the test context to a specific window.
    • switchToWindowByPredicate({ id, checkWindow }): Switches to a window based on a predicate function.
    • switchToParentWindow(): Switches to the parent window.
    • switchToPreviousWindow(): Switches to the previous window.
    • switchToMainWindow(): Switches to the main browser window.
    • getCurrentWindow(): Retrieves the current window.
    • getCurrentWindows(): Retrieves all open windows.

  12. Run TestCafe tests via CLI

    master

    The TestCafe CLI is the primary entrypoint for executing end-to-end tests. It initializes the TestCafe instance, configures browsers, sources, and runners, and executes the test suite based on provided arguments.

    When running tests, you can configure several key aspects through CLI options, including:

    • Browsers: Specify which browsers to use.
    • Sources: Define the test files to run.
    • Proxy: Configure proxy settings and bypass rules.
    • Concurrency: Control the number of concurrent test executions.
    • Reporter: Specify the reporter to use for test results.
    • Video/Screenshots: Enable video recording or screenshots during tests.
    • App: Specify the application URL to start.
    • Live Mode: Use live mode to run tests in a way that allows for real-time interaction.