Visual testing for v0 and Lovable apps
Visual testing for apps built in v0 or Lovable: UI Verify screenshots every pull request and posts a check that v0 shows in its own CI panel.
Both platforms sync your app to a GitHub repository, and that is where UI Verify plugs in. A Playwright test opens your pages, the GitHub Action uploads what they rendered, and UI Verify posts a UI Verify: <project-slug> check plus a before and after comment on the pull request. We set this up on a fresh v0 app and a fresh Lovable app on 2026-11-01 and changed one button on each: the check ran on both pull requests, and v0 showed it in its own pull request panel.
| v0 | Lovable | |
|---|---|---|
| Where its changes land | A working branch per chat, then Create PR | One synced branch, main by default |
| Opens the pull request | Yes, from the Create PR button | No, open it on GitHub |
| Shows the UI Verify check | Yes, in the CI row of the PR panel | No, see it on GitHub |
| Can its agent read the visual result | Fix CI sees only the failing job's name | Yes, with the UI Verify connector |
| Blocks the merge until review | Yes, when the check is required | Yes, on GitHub, when the check is required |
1. Connect the app to GitHub
In v0, open Settings, then GitHub, and create the repository. In Lovable, open More, then Git, then GitHub. Each platform asks to install its GitHub App; choose Only select repositories, since both add the repository they create to that list for you. Then clone the repository, so you or your local coding agent can add the test.
2. Add a Playwright test and the capture SDK
v0 generates a Next.js app that uses pnpm, and Lovable generates a Vite app that uses Bun. Install @playwright/test with the UI Verify capture SDK and add one test per page you want covered. The Playwright quickstart covers the details; for a one-page app this is the whole test.
pnpm add -D @playwright/test @uiverify/playwright@1.4.0 # v0
bun add -d @playwright/test @uiverify/playwright@1.4.0 # Lovableimport { test, expect } from "@uiverify/playwright";
test("home page", async ({ page }) => {
await page.goto("/");
await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
});Point Playwright at a server it starts itself. For v0, build and start the Next.js app. For Lovable, use the Vite dev server: its production build targets Cloudflare and does not serve with a plain vite preview.
import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
testDir: "./e2e",
use: { baseURL: "http://localhost:3000" },
projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
webServer: {
command: "pnpm build && pnpm start --port 3000", // v0
// command: "bun run dev --port 3000 --strictPort", // Lovable
url: "http://localhost:3000",
reuseExistingServer: !process.env.CI,
},
});3. Upload from GitHub Actions
Create a project at uiverify.ai, store its API key as the repository secret UIVERIFY_API_KEY, and add the workflow. It runs on every pull request and on main, so your first merge sets the baseline the next pull request diffs against.
name: UI Verify
on:
push:
branches: [main]
pull_request:
jobs:
visual:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
with:
fetch-depth: 0
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v5
with:
node-version: 24
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm exec playwright install --with-deps chromium
- run: pnpm exec playwright test
- run: npx -y uiverify@1.8.0 upload --static-dir ./uiverify-archive
env:
UIVERIFY_API_KEY: ${{ secrets.UIVERIFY_API_KEY }}For Lovable, swap the pnpm and Node steps for Bun:
- uses: oven-sh/setup-bun@v2
- run: bun install --frozen-lockfile
- run: bunx playwright install --with-deps chromium
- run: bunx playwright test
- run: npx -y uiverify@1.8.0 upload --static-dir ./uiverify-archive
env:
UIVERIFY_API_KEY: ${{ secrets.UIVERIFY_API_KEY }}Push these files to main. Lovable pulls the commit in on its own; in v0, click the branch button, then Pull Changes. Either way, the next change you ask for is made on top of it. Accept the first build as your baseline, then install the UI Verify GitHub App from the project page so the check and comment post on pull requests.
How does the visual check work with v0?
Ask v0 for a change and it commits to a working branch such as v0/order-button-style. Click the branch button, then Create PR. The workflow runs, and the same menu shows the PR, a CI row with each check's state, a Fix CI action, and Merge PR. While UI Verify waits for your review, its check counts as in progress there, and the upload job counts as failed.
Fix CI sends v0's agent the names of the failing checks, here the visual job, and the agent investigates its own render. In our test that was useful: v0 reported the button as solid dark green, but UI Verify's capture showed it dark brown. After Fix CI, v0 rechecked the page, fixed the color, and pushed again, and the next build showed the green button.
Fix CI works from the job name, not from the screenshots, so an intended change still needs you to accept it. Review it on the pull request comment or in UI Verify, or let your local coding agent do it over the MCP server.
How do I stop v0 from merging an unreviewed change?
Make UI Verify: <project-slug> a required status check on main. With the rule in place, v0's Merge PR stays disabled until the visual change is accepted, and enables as soon as it is. Without it, Merge PR stays enabled even with the check waiting. GitHub only offers branch protection on private repositories with a paid plan, so on a free account this needs a public repository. See Make the visual check required.
visual Actions job stays red until it runs again, so v0's CI row keeps reading 1 failed and keeps offering Fix CI. Add the auto-rerun workflow from Make the visual check required to clear it when you accept.How does the visual check work with Lovable?
Lovable edits one branch at a time, main unless you change it. To review a change before it reaches main, open More, then Git, pick the branch menu, and use Create branch. Lovable switches to the new branch and commits your next change there. In our test, its agent could not open the pull request from chat and pointed us to GitHub, so open it there: base main, compare your branch. The workflow runs and the check and comment post on the pull request.
Lovable does not show pull request checks in its editor. Its agent can read them, though, once you add UI Verify as a connector.
How do I let Lovable's agent read the visual check?
Add the UI Verify MCP server as a Lovable connector, and Lovable's agent can look up a build, see what changed, and render the before and after in its own chat.
- In Lovable, open More, then Connectors, then Add custom, then MCP server.
- Name it
UI Verify, set the server URL tohttps://uiverify.ai/mcp, keep OAuth, and click Add & authorize. - Log in to UI Verify in the window that opens and allow access.
- Ask Lovable to check the visual result, for example:
Use the UI Verify connector to check pull request #1 in the UI Verify project <project-slug>. Does the visual change match what you changed?
In our test it found the project, read the build, and confirmed that the only change was the Visit us button going from brown to dark green, which matched what it had meant to do. Reading tools run without asking; Lovable asks before a tool that changes something, such as accepting a baseline.
Set up visual testing
From no visual tests to a green check on every pull request.
Visual testing for agents
UI Verify is visual regression testing for Playwright, Storybook, Vitest and Bun. Your coding agent sees what its UI change did and fixes it before it ships. See how it works.
Get started