Skip to main content

Async Screenshots

ViteShot lets you specify a beforeScreenshot hook, allowing you to wait for a specific state or interact with the component before taking the screenshot.

/src/components/example.screenshot.jsx
import React from "react";
export const Clicked = () => {  const [clicked, setClicked] = useState(false);
  return (    <div>      <button id="button" onClick={() => setClicked(true)}>        {clicked ? "clicked" : "not clicked"}      </button>    </div>  );};Clicked.beforeScreenshot = async (element: HTMLElement) => {  element.querySelector<HTMLButtonElement>("#button")!.click();};