screenci

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# screenci

Your UI changed. Your demo videos didn't. screenci fixes that.

Record product walkthroughs as code. When the UI ships, run
`npx screenci record` and your videos regenerate. You keep the Playwright
mental model, but the output is a maintainable product video instead of a
test report.

Learn more at [screenci.com](https://screenci.com).

## Get started

```bash
npm init screenci@latest
# or
pnpm create screenci
```

This scaffolds a self-contained `screenci/` directory with its own
dependencies and installs Chromium. The directory is isolated from the
surrounding workspace, which keeps installation reliable inside monorepos.

Then write a video, run it locally, and record the final output:

```bash
npx screenci test      # author the video
npx screenci record    # render and upload the final video
```

Full docs:

- [Getting started](https://screenci.com/docs)
- [Writing scripts](https://screenci.com/docs/video-script-basics)
- [CLI reference](https://screenci.com/docs/reference/cli)

## Write a video

Video scripts are Playwright-style files with a `.screenci.ts` extension. If you
already know Playwright locators, navigation, and waiting, you already know
most of the automation layer.

```ts
// recordings/onboarding.screenci.ts
import { hide, speed, time, video } from 'screenci'

video('Onboarding flow', async ({ page }) => {
  await hide(async () => {
    await page.goto('https://app.example.com/signup')
  })

  await page.getByLabel('Email').fill('jane@example.com')
  await page.getByRole('button', { name: 'Create account' }).click()
  await speed(0.5, async () => {
    await page.getByRole('button', { name: 'Open dashboard tour' }).click()
  })
  await time(1000, async () => {
    await page.getByRole('button', { name: 'Skip tutorial' }).click()
  })
  await page.getByRole('heading', { name: 'Dashboard' }).waitFor()
})
```

Each `video()` call becomes one output video. The title becomes the filename
and the remote video identity. Inside `video()`, `page` is a `ScreenCIPage`: a
Playwright `Page` with animated cursor movement and visible typing layered on
top of normal Playwright behavior.

`hide()` removes setup entirely. `speed()` and `time()` keep a section visible
but remap its rendered duration.

## Authoring helpers

| Export            | What it does                                                 |
| ----------------- | ------------------------------------------------------------ |
| `defineConfig`    | Wraps Playwright config with ScreenCI defaults               |
| `video`           | Declares a video recording test                              |
| `video.narration` | Declares narration cues (per language or shared) for a video |
| `hide`            | Cuts setup or cleanup out of the visible recording           |
| `autoZoom`        | Smooth camera follow for an interaction block                |
| `zoomTo`          | Manual camera framing for a locator or point                 |
| `resetZoom`       | Returns from manual framing to the full viewport             |
| `createOverlays`  | Inserts timed media overlays into the recording timeline     |
| `voices`          | Available voice constants such as `voices.Ava`               |
| `modelTypes`      | Narration model constants                                    |

See the [docs](https://screenci.com/docs) for configuration, narration,
camera, and CI setup.

## Community

Questions, ideas, or want to show off your videos? Join us on
[Discord](https://discord.gg/DyjSRFzeBc).

screenci

Your UI changed. Your demo videos didn't. screenci fixes that.

Record product walkthroughs as code. When the UI ships, run npx screenci record and your videos regenerate. You keep the Playwright mental model, but the output is a maintainable product video instead of a test report.

Learn more at screenci.com.

Get started

npm init screenci@latest
# or
pnpm create screenci

This scaffolds a self-contained screenci/ directory with its own dependencies and installs Chromium. The directory is isolated from the surrounding workspace, which keeps installation reliable inside monorepos.

Then write a video, run it locally, and record the final output:

npx screenci test      # author the video
npx screenci record    # render and upload the final video

Full docs:

Write a video

Video scripts are Playwright-style files with a .screenci.ts extension. If you already know Playwright locators, navigation, and waiting, you already know most of the automation layer.

// recordings/onboarding.screenci.ts
import { hide, speed, time, video } from 'screenci'

video('Onboarding flow', async ({ page }) => {
  await hide(async () => {
    await page.goto('https://app.example.com/signup')
  })

  await page.getByLabel('Email').fill('jane@example.com')
  await page.getByRole('button', { name: 'Create account' }).click()
  await speed(0.5, async () => {
    await page.getByRole('button', { name: 'Open dashboard tour' }).click()
  })
  await time(1000, async () => {
    await page.getByRole('button', { name: 'Skip tutorial' }).click()
  })
  await page.getByRole('heading', { name: 'Dashboard' }).waitFor()
})

Each video() call becomes one output video. The title becomes the filename and the remote video identity. Inside video(), page is a ScreenCIPage: a Playwright Page with animated cursor movement and visible typing layered on top of normal Playwright behavior.

hide() removes setup entirely. speed() and time() keep a section visible but remap its rendered duration.

Authoring helpers

Export	What it does
`defineConfig`	Wraps Playwright config with ScreenCI defaults
`video`	Declares a video recording test
`video.narration`	Declares narration cues (per language or shared) for a video
`hide`	Cuts setup or cleanup out of the visible recording
`autoZoom`	Smooth camera follow for an interaction block
`zoomTo`	Manual camera framing for a locator or point
`resetZoom`	Returns from manual framing to the full viewport
`createOverlays`	Inserts timed media overlays into the recording timeline
`voices`	Available voice constants such as `voices.Ava`
`modelTypes`	Narration model constants

See the docs for configuration, narration, camera, and CI setup.

Community

Questions, ideas, or want to show off your videos? Join us on Discord.