Slate Browser

PreviousNext

@platejs/browser is Slate's browser proof harness. Use it to test editor behavior through Playwright with model, DOM, native selection, focus, screenshots, trace, clipboard, and replayable scenario assertions.

It is test infrastructure, not the product editing API. Application code should build editors with @platejs/slate, @platejs/slate-dom, @platejs/slate-react, and extensions.

Install

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

Use the matching command for pnpm, Yarn, or Bun when your project uses another package manager.

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 Slate 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('')
})
import { expect, test } from '@playwright/test'
import { openExample } from '@platejs/browser/playwright'
 
test('types through the Slate 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('')
})

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.

Proof Contracts

Slate browser proof should usually assert more than model state:

  • model text or block text;
  • DOM/native selection endpoints when observable;
  • visible selection or no double-highlight;
  • focus ownership;
  • native event trace shape for input, paste, selection, or IME claims;
  • screenshot or JSON artifacts for bugs that need visual review;
  • follow-up typing after navigation, paste, undo, selection, or DOM repair.

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

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

bun run test:slate-browser
bun run test:slate-browser:core
bun run test:slate-browser:dom
bun run test:slate-browser:selection
bun run test:slate-browser
bun run test:slate-browser:core
bun run test:slate-browser:dom
bun run test:slate-browser:selection

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