diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts index 5f5245f757..9f083d38bf 100644 --- a/tests/library/video.spec.ts +++ b/tests/library/video.spec.ts @@ -656,6 +656,40 @@ it.describe('screencast', () => { expect(files.length).toBe(1); }); + it('should capture full viewport', async ({ browserType, browserName, headless }, testInfo) => { + it.fail(browserName === 'firefox', 'The actual picture is smaller than video frame'); + it.fail(browserName === 'chromium' && !headless, 'The square is not on the video'); + + const size = { width: 400, height: 400 }; + const browser = await browserType.launch(); + + const videoDir = testInfo.outputPath(''); + const context = await browser.newContext({ + viewport: size, + recordVideo: { + dir: videoDir, + size, + }, + }); + + const page = await context.newPage(); + await page.setContent(`
`); + await waitForRafs(page, 100); + await page.close(); + await context.close(); + await browser.close(); + + const videoFiles = findVideos(videoDir); + expect(videoFiles.length).toBe(1); + const videoPlayer = new VideoPlayer(videoFiles[0]); + expect(videoPlayer.videoWidth).toBe(size.width); + expect(videoPlayer.videoHeight).toBe(size.height); + + // Bottom right corner should be part of the red border. + const pixels = videoPlayer.seekLastFrame({ x: size.width - 10, y: size.height - 10 }).data; + expectAll(pixels, almostRed); + }); + it('should capture full viewport on hidpi', async ({ browserType, browserName, headless }, testInfo) => { it.fail(browserName === 'firefox', 'The actual picture is smaller than video frame'); it.fail(browserName === 'chromium' && !headless, 'The square is not on the video');