Devtools Testing Guidance

Testing Guidance

This guide outlines when and how to select the appropriate test suite when writing new tests in Chrome DevTools.

[!NOTE] This skill provides guidance on which test suite to choose when writing tests. To learn how to run tests, build targets, or execute linters, refer to the devtools-verification skill.

Choosing a Test Suite

1. Unit Tests

Default choice: The vast majority of tests in DevTools should be unit tests.

Use unit tests for isolated testing of individual functions, classes, models, helpers, and UI components.

• Utilities & Framework:
  • Use TestUniverse (and foundation test helpers) for easy, isolated setup of required dependencies and models.
  • For testing UI widgets, use stubbed view functions and screenshot assertions rather than spinning up heavy DOM/browser infrastructure.
• Location: Co-located next to their implementation files (e.g. TimelinePanel.ts and TimelinePanel.test.ts).
• BUILD.gn: test file should be added to devtools_ui_module("unittests") or devtools_foundation_module("foundation_unittests") target in the corresponding BUILD.gn file.

2. API Tests

Use API tests for integration tests that verify business logic requiring more complex setups or extensive CDP (Chrome DevTools Protocol) traffic, without needing the full DevTools frontend UI.

• When to use:
  • Evaluating JavaScript expressions in the target page (e.g. via Runtime.evaluate).
  • Complex source map setups and symbolization.
  • Multi-context or target setups (workers, iframes, OOPIFs).
  • Tests that require extensive CDP mock setup.
  • Verifying the "foundational layer" of DevTools models against a real browser/web page.
• Location: Defined in front_end/ with .test.api.ts extension (e.g. Universe.test.api.ts).
• BUILD.gn: test file should be added to devtools_api_test_module("api_tests") target in the corresponding BUILD.gn file.

3. End-to-End (E2E) Tests

Use E2E tests to verify real end-to-end user stories and user journeys.

• When to use:
  • Verifying full user journeys across DevTools panels and drawers.
  • Complex UI behaviors that require extensive user interaction setup and benefit from a complete DevTools frontend page connected to an inspected target page over CDP.
• Location: Defined in test/e2e/ (e.g. test/e2e/console/console-log.test.ts).
• BUILD.gn: test file should be added to ts_e2e_library(ts_e2e_library) target in the corresponding BUILD.gn file. And node_ts_library in test/e2e/BUILD.gn for its dependencies.