Browser

@platejs/browser is the first-party proof harness for browser-visible editor behavior: model state, rendered DOM, native selection, focus, screenshots, traces, clipboard, and replayable scenarios. It is test infrastructure, not the product editing API; application code builds editors with Plate and Plite packages. Read Editing Behavior for the runtime pipeline, Selection And DOM for caret proof, Clipboard And Paste for payload proof, and Projection And Overlays for visible highlight and overlay proof.

Install

pnpm add -D @platejs/browser @playwright/test

pnpm add -D @platejs/browser @playwright/test

Imports

The package is subpath-only:

• @platejs/browser/playwright for Playwright editor harnesses.
• @platejs/browser/core for pure proof contracts, release-proof artifacts, classifiers, and selection serialization helpers.
• @platejs/browser/browser for DOM selection snapshots and zero-width placeholder inspection in browser-capable test environments.
• @platejs/browser/transports for device/browser proof-scope descriptors.

Do not import from @platejs/browser directly.

First Test

import { expect, test } from "@playwright/test";
import { openExample } from "@platejs/browser/playwright";
 
test("types through the Browser path", async ({ page }) => {
  const editor = await openExample(page, "plaintext", {
    ready: { editor: "visible" },
  });
 
  await editor.focus();
  await editor.type("Hello from @platejs/browser");
 
  await editor.assert.text("Hello from @platejs/browser");
  await editor.assert.noDoubleSelectionHighlight();
  expect(await editor.get.selectedText()).toBe("");
});Copy

import { expect, test } from "@playwright/test";
import { openExample } from "@platejs/browser/playwright";
 
test("types through the Browser path", async ({ page }) => {
  const editor = await openExample(page, "plaintext", {
    ready: { editor: "visible" },
  });
 
  await editor.focus();
  await editor.type("Hello from @platejs/browser");
 
  await editor.assert.text("Hello from @platejs/browser");
  await editor.assert.noDoubleSelectionHighlight();
  expect(await editor.get.selectedText()).toBe("");
});Copy

openExample waits for the mounted editor-ready contract before actions run. Prefer editor.type(...), semantic selection helpers, clipboard helpers, and native event traces over raw Playwright DOM shortcuts when the claim is editor behavior.

Do not use locator.fill() for contenteditable behavior. It can bypass the editor path you are trying to prove. Use keyboard input, clipboard helpers, or the Browser harness action that matches the claim.

Proof Contracts

Browser proof should usually assert more than model state:

Feature contracts group browser behavior families by the owning Plite feature area. Use them to keep example coverage honest without turning one manual route check into a fake global guarantee.

Low-Level Helpers

Use low-level helpers when a test needs to locate the editable, inspect a rendered node by path, or call the mounted browser handle directly.

import {
  evaluatePliteBrowserHandle,
  getPliteBrowserEditable,
  locatePliteBrowserBlock,
  locatePliteBrowserText,
} from "@platejs/browser/playwright";Copy

import {
  evaluatePliteBrowserHandle,
  getPliteBrowserEditable,
  locatePliteBrowserBlock,
  locatePliteBrowserText,
} from "@platejs/browser/playwright";Copy

Prefer the harness methods when they already express the behavior. They keep model, DOM, native-selection, and screenshot proof in one place instead of spreading selectors through tests.

Transport Claims

@platejs/browser/transports classifies proof scope. A Playwright mobile viewport does not prove raw-device behavior. Appium descriptors close raw-device lanes only when the device gate runs. Proxy browser lanes are useful evidence, but they do not claim native mobile clipboard, human soft-keyboard, glide typing, or voice input.

Commands

pnpm --filter plite test:plite-browser
pnpm --filter plite test:plite-browser:chromium
pnpm --filter @platejs/browser testCopy

pnpm --filter plite test:plite-browser
pnpm --filter plite test:plite-browser:chromium
pnpm --filter @platejs/browser testCopy

Use focused Playwright specs for behavior routes and generated stress replay for portable editing failures.