feat: add darkMode and hideSelectors screenshot parameters
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 9m31s
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 9m31s
- darkMode: emulates prefers-color-scheme: dark before navigation - hideSelectors: injects CSS to hide elements before capture - POST: accepts string or string array - GET: accepts comma-separated string - Validation: max 10 selectors, each max 200 chars - OpenAPI docs updated for both GET and POST endpoints - 13 new tests added (service + route)
This commit is contained in:
parent
9575d312fe
commit
96d21aa63b
5 changed files with 232 additions and 4 deletions
|
|
@ -24,6 +24,8 @@ function createMockPage() {
|
|||
goto: vi.fn().mockResolvedValue(undefined),
|
||||
waitForSelector: vi.fn().mockResolvedValue(undefined),
|
||||
screenshot: vi.fn().mockResolvedValue(Buffer.from('fake-screenshot')),
|
||||
emulateMediaFeatures: vi.fn().mockResolvedValue(undefined),
|
||||
addStyleTag: vi.fn().mockResolvedValue(undefined),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -177,6 +179,67 @@ describe('Screenshot Service', () => {
|
|||
})
|
||||
})
|
||||
|
||||
describe('darkMode', () => {
|
||||
it('emulates prefers-color-scheme: dark when darkMode is true', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com', darkMode: true })
|
||||
expect(mockPage.emulateMediaFeatures).toHaveBeenCalledWith([
|
||||
{ name: 'prefers-color-scheme', value: 'dark' }
|
||||
])
|
||||
})
|
||||
|
||||
it('calls emulateMediaFeatures before goto', async () => {
|
||||
const callOrder: string[] = []
|
||||
mockPage.emulateMediaFeatures.mockImplementation(async () => { callOrder.push('emulate') })
|
||||
mockPage.goto.mockImplementation(async () => { callOrder.push('goto') })
|
||||
await takeScreenshot({ url: 'https://example.com', darkMode: true })
|
||||
expect(callOrder).toEqual(['emulate', 'goto'])
|
||||
})
|
||||
|
||||
it('does not emulate media features when darkMode is false', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com', darkMode: false })
|
||||
expect(mockPage.emulateMediaFeatures).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('does not emulate media features when darkMode is not set', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com' })
|
||||
expect(mockPage.emulateMediaFeatures).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('hideSelectors', () => {
|
||||
it('injects style tag to hide selectors after page load', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com', hideSelectors: ['.ad', '#banner'] })
|
||||
expect(mockPage.addStyleTag).toHaveBeenCalledWith({
|
||||
content: '.ad { display: none !important }\n#banner { display: none !important }'
|
||||
})
|
||||
})
|
||||
|
||||
it('calls addStyleTag after goto', async () => {
|
||||
const callOrder: string[] = []
|
||||
mockPage.goto.mockImplementation(async () => { callOrder.push('goto') })
|
||||
mockPage.addStyleTag.mockImplementation(async () => { callOrder.push('addStyleTag') })
|
||||
await takeScreenshot({ url: 'https://example.com', hideSelectors: ['.ad'] })
|
||||
expect(callOrder.indexOf('goto')).toBeLessThan(callOrder.indexOf('addStyleTag'))
|
||||
})
|
||||
|
||||
it('does not inject style tag when hideSelectors is empty', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com', hideSelectors: [] })
|
||||
expect(mockPage.addStyleTag).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('does not inject style tag when hideSelectors is not set', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com' })
|
||||
expect(mockPage.addStyleTag).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('handles single selector', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com', hideSelectors: ['.cookie-banner'] })
|
||||
expect(mockPage.addStyleTag).toHaveBeenCalledWith({
|
||||
content: '.cookie-banner { display: none !important }'
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Page lifecycle', () => {
|
||||
it('always releases page after successful screenshot', async () => {
|
||||
await takeScreenshot({ url: 'https://example.com' })
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue