screenshots.spec.ts

e2e/ui/screenshots.spec.ts

1. import { expect, test, type Page } from '@playwright/test'
3. // `npm run screenshots` writes the README images from the sample data.
4. // These are the web build over its own painted backdrop; on macOS the
5. // panels sit on the native window frost instead.
6. test.skip(!process.env.SCREENSHOTS, 'set SCREENSHOTS=1')
7. test.use({ viewport: { width: 1280, height: 800 }, deviceScaleFactor: 2 })
9. const shot = (page: Page, name: string) => page.screenshot({ path: `docs/screenshots/${name}.png` })
11. async function open(page: Page, theme: 'light' | 'dark', chat: RegExp) {
12. await page.emulateMedia({ colorScheme: theme })
13. await page.goto('/')
14. await page.getByRole('button', { name: chat }).click()
15. await expect(page.getByTestId('msg-assistant').first()).toBeVisible()
16. await page.waitForTimeout(300)
17. }
19. test('main, light', async ({ page }) => {
20. await open(page, 'light', /Tidy a bash backup script/)
21. await shot(page, 'main-light')
22. })
24. test('main, dark, with an image', async ({ page }) => {
25. await open(page, 'dark', /Compare two pricing tiers/)
26. await page.waitForTimeout(300)
27. await shot(page, 'main-dark')
28. })
30. test('model picker', async ({ page }) => {
31. await open(page, 'light', /How FTS5 bm25 ranking works/)
32. await page.getByTestId('model-button').click()
33. await page.waitForTimeout(250)
34. await shot(page, 'model-picker')
35. })
37. test('usage', async ({ page }) => {
38. await open(page, 'dark', /Tidy a bash backup script/)
39. await page.getByTestId('spend-meter').click()
40. await page.waitForTimeout(250)
41. await shot(page, 'usage')
42. })
44. test('quick prompt', async ({ page }) => {
45. await page.setViewportSize({ width: 640, height: 300 })
46. await page.emulateMedia({ colorScheme: 'dark' })
47. await page.goto('/quick.html')
48. await page.getByLabel('Quick prompt').fill('What should I index in SQL?')
49. await page.getByLabel('Quick prompt').press('Enter')
50. await expect(page.getByTestId('cost-line')).toBeVisible()
51. await page.waitForTimeout(200)
52. await page.screenshot({ path: 'docs/screenshots/quick-prompt.png' })
53. })