feat: add an option to return base64 from page.screenshot (#5993)

docs/guide/browser.md

@@ -465,12 +465,16 @@ export const page: {
  /**
  * Change the size of iframe's viewport.
  */
- viewport: (width: number | string, height: number | string) => Promise<void>
+ viewport(width: number | string, height: number | string): Promise<void>
  /**
  * Make a screenshot of the test iframe or a specific element.
- * @returns Path to the screenshot file.
+ * @returns Path to the screenshot file or path and base64.
  */
- screenshot: (options?: ScreenshotOptions) => Promise<string>
+ screenshot(options: Omit<ScreenshotOptions, 'base64'> & { base64: true }): Promise<{
+ path: string
+ base64: string
+ }>
+ screenshot(options?: ScreenshotOptions): Promise<string>
 }
 
 export const cdp: () => CDPSession

eslint.config.js

@@ -100,6 +100,7 @@ export default antfu(
  'import/newline-after-import': 'off',
  'import/first': 'off',
  'unused-imports/no-unused-imports': 'off',
+ 'ts/method-signature-style': 'off',
  },
  },
  {

packages/browser/context.d.ts

@@ -29,6 +29,10 @@ export interface ScreenshotOptions {
  * Path relative to the `screenshotDirectory` in the test config.
  */
  path?: string
+ /**
+ * Will also return the base64 encoded screenshot alongside the path.
+ */
+ base64?: boolean
 }
 
 export interface BrowserCommands {
@@ -245,12 +249,16 @@ export interface BrowserPage {
  /**
  * Change the size of iframe's viewport.
  */
- viewport: (width: number, height: number) => Promise<void>
+ viewport(width: number, height: number): Promise<void>
  /**
  * Make a screenshot of the test iframe or a specific element.
- * @returns Path to the screenshot file.
+ * @returns Path to the screenshot file or path and base64.
  */
- screenshot: (options?: ScreenshotOptions) => Promise<string>
+ screenshot(options: Omit<ScreenshotOptions, 'base64'> & { base64: true }): Promise<{
+ path: string
+ base64: string
+ }>
+ screenshot(options?: ScreenshotOptions): Promise<string>
 }
 
 export const page: BrowserPage

packages/browser/src/node/commands/screenshot.ts

@@ -29,28 +29,29 @@ export const screenshot: BrowserCommand<[string, ScreenshotOptions]> = async (
  if (options.element) {
  const { element: elementXpath, ...config } = options
  const element = context.iframe.locator(`xpath=${elementXpath}`)
- await element.screenshot({ ...config, path: savePath })
+ const buffer = await element.screenshot({ ...config, path: savePath })
+ return returnResult(options, path, buffer)
  }
- else {
- await context.iframe.locator('body').screenshot({
- ...options,
- path: savePath,
- })
- }
- return path
+
+ const buffer = await context.iframe.locator('body').screenshot({
+ ...options,
+ path: savePath,
+ })
+ return returnResult(options, path, buffer)
  }
 
  if (context.provider instanceof WebdriverBrowserProvider) {
  const page = context.provider.browser!
  if (!options.element) {
  const body = await page.$('body')
- await body.saveScreenshot(savePath)
- return path
+ const buffer = await body.saveScreenshot(savePath)
+ return returnResult(options, path, buffer)
  }
+
  const xpath = `//${options.element}`
  const element = await page.$(xpath)
- await element.saveScreenshot(savePath)
- return path
+ const buffer = await element.saveScreenshot(savePath)
+ return returnResult(options, path, buffer)
  }
 
  throw new Error(
@@ -75,3 +76,14 @@ function resolveScreenshotPath(
  }
  return resolve(dir, '__screenshots__', base, name)
 }
+
+function returnResult(
+ options: ScreenshotOptions,
+ path: string,
+ buffer: Buffer,
+) {
+ if (options.base64) {
+ return { path, base64: buffer.toString('base64') }
+ }
+ return path
+}

test/browser/test/dom.test.ts

@@ -1,16 +1,19 @@
-import { describe, expect, test } from 'vitest'
+import { beforeEach, describe, expect, test } from 'vitest'
 import { page } from '@vitest/browser/context'
 import { createNode } from '#src/createNode'
 import '../src/button.css'
 
 describe('dom related activity', () => {
- test('renders div', async () => {
+ beforeEach(() => {
  document.body.style.background = '#f3f3f3'
- const wrapper = document.createElement('div')
- wrapper.className = 'wrapper'
- document.body.appendChild(wrapper)
+ document.body.replaceChildren()
+ })
+
+ test('renders div', async () => {
+ const wrapper = createWrapper()
  const div = createNode()
  wrapper.appendChild(div)
+
  await expect.element(div).toHaveTextContent('Hello World!')
  const screenshotPath = await page.screenshot({
  element: wrapper,
@@ -19,4 +22,27 @@ describe('dom related activity', () => {
  /__screenshots__\/dom.test.ts\/dom-related-activity-renders-div-1.png/,
  )
  })
+
+ test('resolves base64 screenshot', async () => {
+ const wrapper = createWrapper()
+ const div = createNode()
+ wrapper.appendChild(div)
+
+ const { path, base64 } = await page.screenshot({
+ element: wrapper,
+ base64: true,
+ })
+ expect(path).toMatch(
+ /__screenshots__\/dom.test.ts\/dom-related-activity-resolves-base64-screenshot-1.png/,
+ )
+ expect(base64).toBeTypeOf('string')
+ })
 })
+
+function createWrapper() {
+ document.body.style.background = '#f3f3f3'
+ const wrapper = document.createElement('div')
+ wrapper.className = 'wrapper'
+ document.body.appendChild(wrapper)
+ return wrapper
+}