What is the difference between MSW and the Mock Repository approach?

MSW (Mock Service Worker) mocks at the network level to test error handling and loading states, while the Mock Repository pattern provides predictable application-level data for UI testing.

Which Umbraco versions are supported?

This skill is designed for the modern Umbraco Backoffice (built on Lit/Web Components) and aligns with the latest Umbraco CMS source repository patterns.

Do I need a .NET backend to use this skill?

No, this skill is designed to run the Umbraco backoffice UI entirely with mocked APIs, allowing you to develop and test frontend extensions without any C# or database requirements.

Can I use this skill for automated E2E testing?

Yes, it includes patterns and configurations specifically for Playwright, enabling you to run automated tests against the mocked environment.

Umbraco Mocked Backoffice

Name: Umbraco Mocked Backoffice
Author: umbraco

byumbraco

•

セキュリティとテスト

Simulates a full Umbraco backoffice environment with mocked APIs for rapid extension testing without a .NET backend.

The Umbraco Mocked Backoffice skill enables frontend developers to build, test, and demonstrate Umbraco extensions in a fully functional UI environment without the overhead of a .NET infrastructure. By leveraging Mock Service Worker (MSW) and the Mock Repository pattern, it provides a realistic ecosystem of mocked documents, media, and settings. This allows for rapid iteration cycles, simplified CI/CD pipelines for UI testing, and the ability to verify complex extension logic using Playwright without ever needing to boot a database or backend server.

主な機能

01Pre-configured mock data for documents, media, members, and permissions

02Integrated Playwright configuration for automated E2E testing

03Full UI simulation of Umbraco backoffice without .NET dependencies

04Dual mocking strategies via MSW handlers or application-level repositories

051 GitHub stars

06Environment variable controls for switching between MSW and mock-repo modes

ユースケース

01Developing and visually testing UI extensions without local backend setup

02Running automated frontend tests in CI/CD pipelines to ensure UI stability

03Demonstrating extension functionality to stakeholders on a lightweight dev server

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-mocked-backoffice

For use in Claude.ai and ChatGPT

Download Skill