skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-mocked-backoffice

Run the Umbraco backoffice UI with mocked APIs for extension testing.

1|Updated May 21, 2026
Search Tags:#playwright#ui testing#mocking#msw#umbraco#backoffice
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-mocked-backoffice-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-mocked-backoffice
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-mocked-backoffice
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-mocked-backoffice-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you run the Umbraco backoffice UI while mocking API calls, so you can test extensions visually without provisioning or deploying a full .NET backend.

Core Features & Use Cases

  • Mocked Backoffice UI: Run the complete backoffice interface while API traffic is mocked, enabling realistic UI extension testing.
  • Two Mocking Approaches: Use MSW handlers for network-level API mocking or the Mock Repository pattern for application-level deterministic data.
  • E2E-like UI Testing: Pair the mocked backoffice mode with Playwright to validate navigation, tree rendering, and extension behaviors.

Quick Start

Set up your extension with the umbraco-example-generator skill, then start Umbraco backoffice UI in mock mode by running your frontend with VITE_USE_MOCK_REPO=on (and VITE_UMBRACO_USE_MSW=on) and executing your Playwright tests.

Frequently Asked Questions about umbraco-mocked-backoffice

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Umbraco backoffice UI extensions without a .NET backend?▼

Mock the Umbraco backoffice APIs using MSW handlers or a mock repository pattern to run UI extensions visually without provisioning a backend, enabling deterministic data for visual testing.

How does MSW work with Playwright for Umbraco UI testing?▼

MSW intercepts network-level API requests while Playwright runs E2E tests, requiring a Playwright configuration that starts the Umbraco client and intercepts same-origin requests to validate navigation and UI interactions.

Do I need a Vite environment to mock the Umbraco backoffice?▼

Yes, the entry-point setup conditionally loads MSW handlers and mock manifests using the VITE_UMBRACO_USE_MSW and VITE_USE_MOCK_REPO environment variables, requiring a Vite-based frontend to control the mock mode.

What is the difference between MSW handlers and the mock repository pattern?▼

MSW handlers mock APIs at the network level, while the mock repository pattern replaces data at the application level, providing deterministic UI data to test loading states, retries, and interactions differently.

Can I use this mocking approach in CI workflows?▼

Yes, the mocked backoffice UI applies to CI workflows where deterministic UI data is needed, allowing you to test loading states, retries, and extension behaviors consistently without backend dependencies.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-mocked-backoffice

Run Umbraco backoffice UI tests with mocked APIs via Playwright.

Community
Intermediate
umbracoumbraco
26

umbraco-tree-item

Generate TypeScript manifests and context API definitions for custom Umbraco backoffice tree items.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-mocked-backoffice

Mock Umbraco backoffice API calls for visual and automated testing.

Official
Advanced
albanistrefialbanistrefi
4

umbraco-testing

Route Umbraco backoffice extension testing scenarios to appropriate testing layers.

Community
Intermediate