spb/claude-remote

1import { expect, test } from '@playwright/test';2import { resetMock, waitTermOpen } from './helpers';3import { DEMO_OUTPUT, seed, setTheme, shot, THEMES } from './shot-helpers';45/** Phone screenshot set (iPhone 15 WebKit emulation, 390×844 @3x device size reported as 393×852) in both themes. */6for (const theme of THEMES) {7  test(`screenshots: phone ${theme}`, async ({ page }) => {8    await setTheme(page, theme);9    await resetMock(page);10    await page.goto('/login/');11    await expect(page.getByTestId('login-submit')).toBeVisible();12    await page.waitForTimeout(400);13    await shot(page, `${theme}-phone-login`);14    const ids = await seed(page);1516    await page.goto('/home/');17    await expect(page.getByTestId('needs-you')).toBeVisible();18    await expect(page.getByTestId('task-activity')).toBeVisible();19    await expect(page.getByTestId('host-strip')).toContainText('as of');20    await page.waitForTimeout(900);21    await shot(page, `${theme}-phone-home`);22    await page.getByTestId('home').evaluate((el) => el.scrollTo(0, 520));23    await page.waitForTimeout(300);24    await shot(page, `${theme}-phone-home-2`);2526    await page.goto(`/terminal/?s=${ids.shell}`);27    await waitTermOpen(page, ids.shell);28    await page.getByTestId('terminal').tap();29    await page.keyboard.type(DEMO_OUTPUT);30    await page.waitForTimeout(700);31    await shot(page, `${theme}-phone-terminal`);32    await page.locator('[data-testid="mobile-toolbar"] [data-key="ctrl"]').dispatchEvent('pointerdown');33    await page.locator('[data-testid="mobile-toolbar"] [data-key="more"]').dispatchEvent('pointerdown');34    await page.setViewportSize({ width: 393, height: 852 - 336 }); // software keyboard height on this device class35    await expect(page.getByTestId('mobile-shell')).toHaveAttribute('data-keyboard', 'open');36    await page.waitForTimeout(400);37    await shot(page, `${theme}-phone-terminal-keyboard`);38    await page.setViewportSize({ width: 393, height: 852 });39    await page.locator('[data-testid="mobile-toolbar"] [data-key="ctrl"]').dispatchEvent('pointerdown');40    await page.getByTestId('mobile-overflow').tap();41    await expect(page.getByTestId('quick-actions')).toBeVisible();42    await page.waitForTimeout(500);43    await shot(page, `${theme}-phone-terminal-actions`);44    await page.keyboard.press('Escape');4546    for (const [route, name, ready] of [47      ['/sessions/', 'sessions', 'sessions-list'],48      ['/tasks/', 'tasks', 'task-list'],49      ['/cluster/', 'cluster', 'node-cards'],50      ['/projects/', 'projects', 'project-list'],51      ['/files/', 'files', 'files-browser'],52      ['/system/', 'system', 'components'],53    ] as const) {54      await page.goto(route);55      await expect(page.getByTestId(ready)).toBeVisible();56      await page.waitForTimeout(700);57      expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), route).toBe(true);58      await shot(page, `${theme}-phone-${name}`);59    }60    await page.getByTestId('nav-more').tap();61    await expect(page.getByTestId('more-sheet')).toBeVisible();62    await page.waitForTimeout(500);63    await shot(page, `${theme}-phone-more`);64  });65}6667test('screenshots: phone 430×932 home and empty home', async ({ page }) => {68  await setTheme(page, 'light');69  await page.setViewportSize({ width: 430, height: 932 });70  await seed(page);71  await page.goto('/home/');72  await expect(page.getByTestId('needs-you')).toBeVisible();73  await page.waitForTimeout(900);74  await shot(page, 'light-phone-430-home');75  await resetMock(page);76  const { apiLogin } = await import('./helpers');77  await apiLogin(page);78  await page.goto('/home/');79  await expect(page.getByTestId('jump-back-in')).toContainText('No sessions yet');80  await page.waitForTimeout(700);81  await shot(page, 'light-phone-430-home-empty');82});83