Screen Studios for browser automation

Make your browser demos easier to follow with a few lines of TypeScript. Humanette adds large cursors to make it easy to see mouse events and displays your keyboard presses.

Use cases

Use it to generate product walk throughs or ask agents to create videos to prove they tested or added features.

npm install humanette

Examples

Move and click

Click me

import { chromium } from 'playwright';
import { createHuman } from 'humanette';

const browser = await chromium.launch({ headless: false });
try {
  const page = await browser.newPage();
  // Replace this URL and the locator below with your app's.
  await page.goto('https://your-app.example');

  const human = await createHuman(page, { scale: 4 });
  await human.click(page.getByRole('button', { name: 'Click me' }));
  await human.dispose();
} finally {
  await browser.close();
}

Text selection

Select these words.

import { chromium } from 'playwright';
import { createHuman } from 'humanette';

const browser = await chromium.launch({ headless: false });
try {
  const page = await browser.newPage();
  // Replace this URL and the locator below with your app's.
  await page.goto('https://your-app.example');

  const human = await createHuman(page, { scale: 4 });
  await human.selectText(page.getByText('these words', { exact: true }));
  await human.dispose();
} finally {
  await browser.close();
}

Drag & Drop

Drop here

Drag me

import { chromium } from 'playwright';
import { createHuman } from 'humanette';

const browser = await chromium.launch({ headless: false });
try {
  const page = await browser.newPage();
  // Replace this URL and the locator below with your app's.
  await page.goto('https://your-app.example');

  const human = await createHuman(page, { scale: 4 });
  await human.drag(
    page.getByText('Drag me', { exact: true }),
    page.getByText('Drop here', { exact: true }),
    { duration: 1400 },
  );
  await human.dispose();
} finally {
  await browser.close();
}