Mock App Bridge for Shopify released

App Bridge
1

Hi there,

One of the problems I’ve faced developing and maintaining embedded Shopify apps is that I couldn’t easily write automated browser tests or integrate Playwright or Chrome DevTools MCP servers to interact with my Shopify app programmatically. This is because of the sensible CAPTCHA and 2FA protections on the Shopify Admin portal.

So, I just published Mock Bridge for Shopify embedded apps to help with this.

Mock Bridge
Mock Bridge1280×720 451 KB

:movie_camera: Watch the demo video

This package launches a local version of the Shopify Admin with a mocked AppBridge set of APIs so you can load your Shopify embedded app without logging into the Shopify Admin.

npx @getverdict/mock-bridge http://localhost:3000 --shop test.myshopify.com

This command will spin up a Mock Bridge server loading your Shopify app that is running on port 3000.

Then you can open your Shopify app and use an MCP to interact with it, or use a browser automation testing suite like Cypress to test various scenarios.

:books: Docs: GitHub - ctrlaltdylan/mock-bridge: A complete mock of Shopify App Bridge to unlock automated browser testing, Chrome MCP and more for Shopify Apps

:package: Package: https://www.npmjs.com/package/@getverdict/mock-bridge

Happy building :hammer_and_wrench:

5 Likes
Automated app test with selenium triggering Cloudflare
2

Thanks for sharing with the community @Dylan ! Will definitely take a look!

3

Hey, @Dylan . I did everything that was asked and all the steps in the documentation, but whenever I open up localhost:3080, the browser always returns error not found. Could definitely use some help.

4

Hi @Robert ,

Could you share more details?

What is the stack of your app?

What port is it’s dev server running on?

Does the Mock Bridge UI render or do you just see a plain 404 page without any UI elements at all?

5

Hi Dylan, you mind if I just reply to this email?

this is my tech stack:

Tech Stack
Framework: React Router v7 + TypeScript
UI: Polaris Web Components
Database: PostgreSQL + Prisma 6.x
Authentication: Shopify OAuth + Session Tokens
Email: Resend
Media Storage: Cloudflare R2, Stream, Images
Hosting: DigitalOcean App Platform

The dev server port is changing everytime i restart the server. But I always make sure to specify it in the command
npx @getverdict/mock-bridge http://localhost:[port]

The mock bridge UI doesnt render and just displays error not found.

But whenever I input localhost:3080 in the browser, it automatically injects the url.

image.png
image.png1894×768 12.3 KB
t

this is what it shows.

6

The argument to the mock bridge is where your app dev server is serving from.

Mock Bridge is attempting to serve from port 3080, so your argument of localhost:3080 is potentially colliding with it.

From what I understand, the default port for React Router on a local dev server should be port 3000.

So you should define that as the argument to mock bridge, not localhost:3080.