umbraco-mocked-backoffice

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

4|Updated Mar 6, 2026

Search Tags:#testing #playwright #visual testing #mocking #extension development #msw #umbraco

Ready to run

npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-mocked-backoffice-albanist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-mocked-backoffice
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/testing/umbraco-mocked-backoffice
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-mocked-backoffice-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, and includes references (resource) components.

What problem does it solve?

This Skill allows developers to visually test Umbraco extensions without needing a running .NET backend, streamlining the development and testing process.

Core Features & Use Cases

Visual Extension Testing: Run the Umbraco backoffice UI with mocked APIs to see how extensions behave.
Rapid Iteration: Develop and test extensions quickly without backend deployments.
CI/CD Integration: Enable automated testing of extensions in a controlled, mocked environment.
Use Case: A developer can test a new custom content editing component by running it in the mocked backoffice, ensuring the UI renders correctly and interacts as expected, all before deploying to a live Umbraco instance.

Quick Start

Use the umbraco-mocked-backoffice skill to test your extension by running npm run test:mock-repo.

Frequently Asked Questions about umbraco-mocked-backoffice

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

FAQPage Schema

How do I visually test Umbraco extensions without a .NET backend?▼

Visual testing of Umbraco extensions without a .NET backend is achieved by running the backoffice UI with mocked APIs. This eliminates the need for a live server, enabling rapid iteration and UI verification in a simulated environment.

What is the best way to mock Umbraco backoffice APIs for Playwright testing?▼

Mocking Umbraco backoffice APIs for Playwright testing is best achieved using either MSW Handlers for network-level mocking or a Mock Repository for application-level data simulation. Both approaches integrate with Vite for development.

Do I need Playwright to run mocked Umbraco backoffice tests?▼

Yes, Playwright is required to run mocked Umbraco backoffice tests. The Skill depends on @playwright/test for end-to-end testing and Vite for development server configuration to facilitate automated testing and rapid iteration.

Can I integrate mocked Umbraco extension testing into CI/CD pipelines?▼

Yes, mocked Umbraco extension testing can be integrated into CI/CD pipelines. By running tests in a controlled, mocked environment without backend deployments, the setup supports automated testing and continuous integration workflows.

How do I start testing my custom content editing component in a mocked environment?▼

To start testing your custom content editing component, run the command npm run test:mock-repo. This launches the Umbraco backoffice UI with mocked application-level data, ensuring your extension renders and interacts correctly before deployment.