or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md content-matching.md dialog-management.md element-interaction.md form-handling.md index.md

tile.json

jest-puppeteer

jest-puppeteer is a Jest preset that enables end-to-end testing with Puppeteer. It provides a straightforward API for launching browser instances, interacting with web pages, and testing web applications with full automation capabilities. The preset automatically sets up the testing environment with browser globals and enhanced assertion matchers.

Package Information

Package Name: jest-puppeteer
Package Type: npm
Language: TypeScript
Installation: npm install --save-dev jest-puppeteer puppeteer jest

Core Imports

// Global variables automatically available in tests
import "jest-puppeteer";

// For type definitions
import type { Browser, Page, Frame, BrowserContext } from "puppeteer";

Jest configuration:

{
  "preset": "jest-puppeteer"
}

Basic Usage

import "expect-puppeteer";

describe("Google", () => {
  beforeAll(async () => {
    await page.goto("https://google.com");
  });

  it('should display "google" text on page', async () => {
    await expect(page).toMatchTextContent("google");
  });

  it("should click search button", async () => {
    await expect(page).toClick("button", { text: "Google Search" });
  });
});

Architecture

jest-puppeteer is built around several key components:

Jest Preset Configuration: Automatically configures Jest with Puppeteer environment and global setup/teardown
Global Browser Objects: Provides browser, page, context, and jestPuppeteer globals for all tests
Environment Management: Handles browser lifecycle, page creation, and cleanup between tests
Enhanced Assertions: Includes expect-puppeteer matchers for browser-specific testing patterns
Configuration System: Supports extensive configuration through jest-puppeteer.config.js files
Development Tools: Built-in debugging support and development utilities

Capabilities

Global Browser API

Core browser automation objects automatically available in all tests.

// Global browser instance
declare var browser: Browser;

// Global page instance  
declare var page: Page;

// Global browser context
declare var context: BrowserContext;

// Global Puppeteer configuration
declare var puppeteerConfig: JestPuppeteerConfig;

// Global jest-puppeteer utilities
declare var jestPuppeteer: {
  debug(): Promise<void>;
  resetPage(): Promise<void>;
  resetBrowser(): Promise<void>;
};

Jest Preset Configuration

Jest preset that automatically configures the testing environment for Puppeteer.

interface JestPreset {
  globalSetup: string;
  globalTeardown: string;
  testEnvironment: string;
  setupFilesAfterEnv: string[];
}

Configuration Options

Comprehensive configuration system for customizing browser behavior and test execution.

interface JestPuppeteerConfig {
  connect?: ConnectOptions;
  launch?: PuppeteerLaunchOptions;
  server?: JestDevServerConfig | JestDevServerConfig[];
  browserPerWorker?: boolean;
  browserContext?: "default" | "incognito";
  exitOnPageError?: boolean;
  runBeforeUnloadOnClose?: boolean;
}

Configuration

Enhanced Assertions (expect-puppeteer)

Specialized assertion matchers for browser testing, automatically included with the preset.

interface PuppeteerMatchers {
  toClick(selector: string | Selector, options?: ToClickOptions): Promise<void>;
  toFill(selector: string | Selector, value: string, options?: ToFillOptions): Promise<void>;
  toMatchElement(selector: string | Selector, options?: ToMatchElementOptions): Promise<ElementHandle<Element>>;
  toMatchTextContent(matcher: string | RegExp, options?: MatchTextContentOptions): Promise<void>;
}

Element Interaction Content Matching Form Handling Dialog Management

Types

interface JestPuppeteerConfig {
  connect?: ConnectOptions;
  launch?: PuppeteerLaunchOptions;
  server?: JestDevServerConfig | JestDevServerConfig[];
  browserPerWorker?: boolean;
  browserContext?: "default" | "incognito";
  exitOnPageError?: boolean;
  runBeforeUnloadOnClose?: boolean;
}

interface JestDevServerConfig {
  command: string;
  port: number;
  launchTimeout?: number;
  debug?: boolean;
}

interface ConnectOptions {
  browserWSEndpoint?: string;
  ignoreHTTPSErrors?: boolean;
  defaultViewport?: Viewport | null;
  slowMo?: number;
}

interface PuppeteerLaunchOptions {
  headless?: boolean | "new";
  args?: string[];
  ignoreDefaultArgs?: boolean | string[];
  handleSIGINT?: boolean;
  handleSIGTERM?: boolean;
  handleSIGHUP?: boolean;
  timeout?: number;
  dumpio?: boolean;
  userDataDir?: string;
  env?: Record<string, string | undefined>;
  devtools?: boolean;
  pipe?: boolean;
  product?: "chrome" | "firefox";
  extraPrefsFirefox?: Record<string, unknown>;
  slowMo?: number;
}