or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcontent-matching.mddialog-management.mdelement-interaction.mdform-handling.mdindex.md
tile.json

tessl/npm-jest-puppeteer

Jest preset that enables end-to-end testing with Puppeteer, providing browser automation and testing utilities.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jest-puppeteer@10.1.x

To install, run

npx @tessl/cli install tessl/npm-jest-puppeteer@10.1.0

index.mddocs/

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;
}