47 lines
2.7 KiB
TypeScript
47 lines
2.7 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
||
|
||
const output = 'docs/evidence/screenshots'
|
||
const supported = new Set(['chrome', 'firefox', 'chromium-1920x1080', 'chromium-1680x1050', 'chromium-1920x1200'])
|
||
|
||
test('capture evidence dashboard', async ({ page }, testInfo) => {
|
||
test.skip(!supported.has(testInfo.project.name), 'Only required evidence projects generate captures.')
|
||
await page.goto('/')
|
||
await page.evaluate(() => localStorage.clear())
|
||
await page.reload()
|
||
|
||
const metadata = await page.evaluate(() => ({
|
||
width: window.innerWidth,
|
||
height: window.innerHeight,
|
||
browser: navigator.userAgent.includes('Firefox') ? 'Firefox' : 'Google Chrome',
|
||
}))
|
||
await page.evaluate((label) => {
|
||
const badge = document.createElement('div')
|
||
badge.id = 'evidence-metadata'
|
||
badge.textContent = label
|
||
Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#171429e6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif', boxShadow: '0 4px 18px #0004' })
|
||
document.body.appendChild(badge)
|
||
}, `${metadata.browser} · ${metadata.width}×${metadata.height} · ${new Date().toISOString().slice(0, 10)}`)
|
||
|
||
const filename = testInfo.project.name === 'chrome' || testInfo.project.name === 'firefox'
|
||
? `browser-${testInfo.project.name}-dashboard.png`
|
||
: `responsive-${metadata.width}x${metadata.height}-dashboard.png`
|
||
await page.screenshot({ path: `${output}/${filename}`, fullPage: true })
|
||
await expect(page.locator('.app-shell')).toBeVisible()
|
||
|
||
if (testInfo.project.name === 'chromium-1680x1050') {
|
||
await page.addStyleTag({ content: '@media (min-width:1400px) and (max-width:1799px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}' })
|
||
await page.screenshot({ path: `${output}/responsive-defect-before-1680x1050.png`, fullPage: true })
|
||
await page.reload()
|
||
await page.evaluate(() => {
|
||
const badge = document.createElement('div')
|
||
badge.textContent = 'Chromium · 1680×1050 · corrected 2×2 summary grid'
|
||
Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#08735ee6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif' })
|
||
document.body.appendChild(badge)
|
||
})
|
||
await page.screenshot({ path: `${output}/responsive-fix-after-1680x1050.png`, fullPage: true })
|
||
await page.getByLabel('Primary navigation').getByRole('button', { name: 'Learning goals' }).click()
|
||
await page.getByRole('button', { name: 'New goal' }).click()
|
||
await page.screenshot({ path: `${output}/responsive-1680x1050-goal-dialog.png`, fullPage: true })
|
||
}
|
||
})
|