Implementation:DevExpress Testcafe CI Npm Install Pattern

Knowledge Sources	TestCafe TestCafe CI Examples
Domains	Testing, CI_CD, Web_Automation
Last Updated	2026-02-12 04:00 GMT

Overview

Standard npm installation patterns for TestCafe in CI environments, demonstrating deterministic dependency installation with caching.

Description

This pattern documents the recommended approaches for installing TestCafe and its dependencies in continuous integration pipelines. The implementation is drawn from TestCafe's official CI example configurations across multiple CI platforms (Travis CI, Bitbucket Pipelines, GitHub Actions). The pattern emphasizes `npm ci` for deterministic installations, cache management for performance, and optional installation of browser providers and reporters based on testing requirements.

Key implementation aspects:

GitHub Actions: Uses npm cache with hash-based keys, runs `npm ci` for exact installation
Docker environments: Uses `npm install` when building fresh containers
Browser providers: Optional plugins like testcafe-browser-provider-saucelabs
Reporters: Optional output formatters like testcafe-reporter-xunit

Usage

This pattern should be used when:

Configuring new CI pipelines for TestCafe projects
Optimizing existing CI build times through caching
Adding cloud browser providers (SauceLabs, BrowserStack)
Integrating with CI platform reporting systems (JUnit XML, JSON)

Code Reference

Source Location

Repository: testcafe
Files:
- examples/running-tests-in-chrome-using-bitbucket-pipelines-ci/package.json
- examples/running-tests-in-firefox-and-chrome-using-travis-ci/.travis.yml
- .github/workflows/test-functional.yml (lines 118-135)

Signature

# CI installation command
npm ci [--production] [--ignore-scripts]

Import

// package.json devDependencies
{
  "devDependencies": {
    "testcafe": "*",
    "testcafe-browser-provider-saucelabs": "^1.0.0",
    "testcafe-reporter-xunit": "^2.0.0"
  }
}

I/O Contract

Inputs

Name	Type	Required	Description
package.json	file	Yes	Project dependencies and versions
package-lock.json	file	Yes (for npm ci)	Exact dependency tree snapshot
npm_cache	directory	No	Cached npm packages for faster installation
node_modules	directory	No	Existing installation (deleted by npm ci)

Outputs

Name	Type	Description
node_modules	directory	Installed packages matching lock file exactly
exit_code	int	0 on success, non-zero on failure
npm_cache	directory	Updated cache with newly downloaded packages

Usage Examples

GitHub Actions with Caching

# From .github/workflows/test-functional.yml
- name: Get npm cache directory
  id: npm-cache-dir
  shell: bash
  run: |
    echo "dir=$(npm config get cache)" >> $GITHUB_OUTPUT

- uses: actions/cache@v3
  id: npm-cache
  with:
    path: ${{ steps.npm-cache-dir.outputs.dir }}
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

- run: npm ci
  if: ${{ !inputs.is-docker }}

- run: npm install
  if: ${{ inputs.is-docker }}

Travis CI with Xvfb

# From .travis.yml
language: node_js
node_js: "stable"

addons:
  firefox: latest
  apt:
    packages:
     - google-chrome-stable fluxbox

before_script:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
  - sleep 3
  - fluxbox >/dev/null 2>&1 &

# npm ci runs automatically in Travis
# based on package-lock.json presence

Bitbucket Pipelines

// package.json
{
  "scripts": {
    "test": "testcafe 'chromium:headless --disable-setuid-sandbox' tests/"
  },
  "devDependencies": {
    "testcafe": "*"
  }
}

# bitbucket-pipelines.yml
image: testcafe/testcafe

pipelines:
  default:
    - step:
        caches:
          - node
        script:
          - npm ci  # Runs before npm test
          - npm test

With Cloud Browser Providers

# Install TestCafe with SauceLabs provider
npm ci

# package.json includes:
# "testcafe": "^2.0.0"
# "testcafe-browser-provider-saucelabs": "^1.11.0"

# Run tests on SauceLabs
testcafe "saucelabs:Chrome@latest:Windows 10" tests/

With Multiple Reporters

# Install TestCafe with xUnit and JSON reporters
npm ci

# Use multiple reporters in CI
testcafe chrome tests/ \
  --reporter xunit:report.xml,json:report.json

Related Pages

Implements Principle

Principle:DevExpress_Testcafe_CI_Dependency_Installation

Requires Environment

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment