Browser Tools for TestCafe

TestCafe is a pure Node.js end-to-end framework for testing web apps. This extension allows you to run TestCafe tests directly from VS Code.

This repository is a maintained fork of Roman Resh's original vscode-testcafe / TestCafe Test Runner extension. The upstream project is no longer actively maintained, so this fork exists to keep the extension available and publishable.

If you are migrating from the old Marketplace listing, install ChristopherCRobinson.browser-tools-for-testcafe instead of the upstream package.

• Run a particular test, fixture, all tests in a file or directory via the context menu or built-in commands
• Automatically detect browsers installed on the local machine
• Repeat last test run
• Debug tests
• View test results in the Debug Console panel

Requirements

TestCafe should be installed in your project as a local package. To install it, use the npm install testcafe command. For Mac OS, add TestCafe to dependencies in your package.json file. Your project should contain TestCafe modules in node_modules\testcafe\....

Optional

This is only required if you would like the option to use the TestCafe Live runner in place of TestCafe. Note that TestCafe Live depends on TestCafe, but they are separate repositories. In other words, you need to install both TestCafe and TestCafe Live if you wish to use the TestCafe Live runner.

Use the npm install testcafe-live command.

How to install extension

Install the Browser Tools for TestCafe extension from VS Code Marketplace as described in the VS Code documentation. If you are upgrading from the upstream extension, search for Browser Tools for TestCafe or install ChristopherCRobinson.browser-tools-for-testcafe directly.

Features

Activation

While activating, the extension detects browsers installed on your machine. For each browser, the extension creates a corresponding command and an item in the context menu.

Running a particular test

To run a particular test, invoke the context menu when the cursor is placed within the test body and select TestCafe: Run Test(s) in... for the required browser.

Running a particular test fixture

To run all tests in a particular test fixture, invoke the context menu when the cursor is placed within this fixture outside of a test body and select TestCafe: Run Test(s) in... for the required browser.

Running all tests in a file

To run all tests in the current file, invoke the context menu for this file in the Explorer panel and select TestCafe: Run Test(s) in... for the required browser.

Running all tests in a folder

To run all test files in a folder, invoke the context menu for this folder in the Explorer panel and select TestCafe: Run Test(s) in... for the required browser.

Rerunning previous tests

If you need to run the same set of tests you ran previously, invoke the context menu and select Repeat Previous Test Run. Alternatively, you can use the Ctrl+Alt+P shortcut. This command is available after the first test run.

Test Debugging

To debug your test, place the debugger statement in test code and run this test via one of the commands. Test execution will be stopped once it reaches the debugger statement and you will be able to continue step-by-step.

Test Result

You can view a test run report in the Debug console.

Update browser list

When you install a new browser or delete an existing one, update the extension's browser list. To do this, use the TestCafe: Refresh Browser List command or the Ctrl+Alt+U shortcut.

Commands and shortcuts

To run built-in commands, press Ctrl+Shift+P and type the command name:

• TestCafe: Run Test(s) in IE, TestCafe: Run Test(s) in Chrome, ... - runs a test or fixture at the cursor position in the specified browser.
• TestCafe: Repeat Previous Test Run (Ctrl+Alt+P) - reruns a set of tests that was run previously.
• TestCafe: Refresh Browser List (Ctrl+Alt+U) - refreshes the list of installed browsers.

Configuration

• testcafeTestRunner.customArguments - Specifies the custom arguments of the TestCafe Command Line Interface. See the whole list of available arguments in the TestCafe documentation. The arguments should be separated by space.
  • The value of this configuration property will be joined to the standard arguments list generated by this extension.
  • Browser-specific flags (e.g., --ignore-certificate-errors, --allow-insecure-localhost, --disable-web-security) will be automatically placed right after the browser name, while TestCafe CLI flags will be placed after the test file path.
  • You can enable headless mode for a specific test run by including :headless in customArguments. This allows per-run control without changing the global useHeadlessMode setting.
  • Example with browser-specific flags:

{
    "testcafeTestRunner.customArguments": "--ignore-certificate-errors --allow-insecure-localhost --speed 0.1"
}

This will generate a command like: testcafe "edge:headless --ignore-certificate-errors --allow-insecure-localhost" test.js --speed 0.1

Note: The browser name and browser-specific flags are combined into a single quoted argument. * Example with headless mode via customArguments:

{
    "testcafeTestRunner.customArguments": ":headless --screenshots ./shots"
}

This will run tests in headless mode for this configuration, regardless of the global useHeadlessMode setting. * Example with only TestCafe flags:

{
    "testcafeTestRunner.customArguments": "--speed 0.1"
}

• testcafeTestRunner.workspaceRoot - Specifies a relative path to the folder which contains the node_modules folder with the testcafe package. Use this setting if the test files are located in a nested folder with its own node_modules subdirectory. Default value is ./;
  • Example:

{
    "testcafeTestRunner.workspaceRoot": "./acceptance"
}

• testcafeTestRunner.useLiveRunner - Specifies which testcafe runner to use (TestCafe Live or TestCafe). Default value is false;
  • Example:

{
    "testcafeTestRunner.useLiveRunner": true
}

• testcafeTestRunner.useHeadlessMode - Run tests in Google Chrome and Mozilla Firefox without any visible UI shell. Default value is false. Note: You can also enable headless mode on a per-run basis by including :headless in the customArguments setting.
  • Example:

{
    "testcafeTestRunner.useHeadlessMode": true
}

• testcafeTestRunner.portableFirefoxPath or testcafeTestRunner.portableChromePath - Specifies a path to the portable Chrome's or Firefox's executable file. The corresponding commands will become available if these options are specified;
  • Example:

{
    "testcafeTestRunner.portableFirefoxPath": "C:\Program Files (x86)\Firefox Portable\firefox.exe"
}

Sources

• Current fork
• Original upstream by Roman Resh
• TestCafe
• TestCafe Live

Maintenance

• Pull requests are validated by GitHub Actions before merge.
• Run the Automated Release workflow from the Actions tab to bump the version, update CHANGELOG.md, build the VSIX, create the GitHub Release, and publish to the Marketplace. The default bump is patch, so you can usually click Run without changing inputs.
• The workflow uses the VSCE_PAT secret for Marketplace publishing and GITHUB_TOKEN for release commits and assets.
• Protect the default branch in GitHub and either allow GitHub Actions to push the release commit or use a release token with equivalent permissions.