mirror/crumbs-original
1
0
Fork 1
mirror of https://github.com/bretzel-app/crumbs.git synced 2026-10-12 20:06:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(screenshots): add desktop and mobile capture logic

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-20 22:32:16 +01:00
committed by Fred Cabassut
co-authored by Claude Opus 4.6
parent 196cd8a1df
commit 82a9b4fa64
1 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/screenshots/capture.ts
+103
View File
@@ -0,0 +1,103 @@
import type { Page } from 'playwright';
import { join } from 'path';
import { BASE_URL, OUTPUT_DIR } from './constants';
async function screenshot(page: Page, name: string): Promise<void> {
await page.screenshot({ path: join(OUTPUT_DIR, name), type: 'png' });
console.log(` captured ${name}`);
}
async function waitForApp(page: Page): Promise<void> {
await page.waitForLoadState('networkidle');
await page.waitForTimeout(300);
}
export async function captureDesktop(page: Page): Promise<void> {
await page.emulateMedia({ reducedMotion: 'reduce' });
console.log('Capturing desktop screenshots...');
// D1: Grid view (also used as hero)
await page.goto(BASE_URL);
await waitForApp(page);
await screenshot(page, 'screenshot-grid.png');
// D2: Rich text editor — open "Self-Hosting Stack"
await page.getByText('Self-Hosting Stack').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await waitForApp(page);
await screenshot(page, 'screenshot-editor.png');
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// D3: Checklist — open "Bretzel Ingredients"
await page.getByText('Bretzel Ingredients').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await waitForApp(page);
await screenshot(page, 'screenshot-checklist.png');
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// D4: Sharing dialog — open "Weekend Plans", click share
await page.getByText('Weekend Plans').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await page.getByTestId('share-toggle').click();
await page.waitForSelector('[data-testid="share-dialog"]');
await waitForApp(page);
await screenshot(page, 'screenshot-sharing.png');
await page.getByTestId('share-dialog-overlay').click({ position: { x: 10, y: 10 } });
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// D5: Version history — open "Self-Hosting Stack", click history
await page.getByText('Self-Hosting Stack').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await page.getByTestId('history-toggle').click();
await page.waitForSelector('[data-testid="history-panel"]');
const versionItems = page.getByTestId('version-item');
if ((await versionItems.count()) > 1) {
await versionItems.nth(1).click();
}
await waitForApp(page);
await screenshot(page, 'screenshot-history.png');
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// D6: Attachments — open "Bretzel Ingredients" (has featured bretzel image)
await page.getByText('Bretzel Ingredients').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await page.getByTestId('image-toggle').click();
await page.waitForSelector('[data-testid="image-upload"]');
await waitForApp(page);
await screenshot(page, 'screenshot-attachments.png');
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// D7: API/MCP settings
await page.goto(`${BASE_URL}/settings/mcp`);
await waitForApp(page);
await screenshot(page, 'screenshot-api.png');
}
export async function captureMobile(page: Page): Promise<void> {
await page.emulateMedia({ reducedMotion: 'reduce' });
console.log('Capturing mobile screenshots...');
// M1: Mobile grid view
await page.goto(BASE_URL);
await waitForApp(page);
await screenshot(page, 'screenshot-mobile-grid.png');
// M2: Mobile editor — open "Self-Hosting Stack"
await page.getByText('Self-Hosting Stack').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await waitForApp(page);
await screenshot(page, 'screenshot-mobile-editor.png');
await page.getByTestId('close-editor-btn').click();
await waitForApp(page);
// M3: Mobile checklist — open "Bretzel Ingredients"
await page.getByText('Bretzel Ingredients').first().click();
await page.waitForSelector('[data-testid="note-editor"]');
await waitForApp(page);
await screenshot(page, 'screenshot-mobile-checklist.png');
}