skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-mocked-backoffice

Run Umbraco backoffice UI tests with mocked APIs via Playwright.

4|Updated Mar 6, 2026
Search Tags:#playwright#ui automation#mocking#msw#umbraco#backoffice#extension testing
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-mocked-backoffice-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-mocked-backoffice
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/testing/umbraco-mocked-backoffice
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-mocked-backoffice-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you run and visually test Umbraco backoffice extension experiences without needing a working .NET backend or live APIs, so you can iterate quickly with realistic UI behavior.

Core Features & Use Cases

  • Mocked Backoffice UI: Run the full backoffice UI while API calls are mocked to avoid backend dependency during development.
  • Two Mocking Modes: Choose between MSW Handlers for network-level mocking or the Mock Repository pattern for app-level predictable data (recommended).
  • Playwright Testing Workflow: Provide ready-to-wire test commands and guidance to validate extension UI flows in both MSW and mock-repo setups.
  • Practical Real-World Use Case: When developing a tree-based navigation or settings UI, use the mocked environment to verify loading states, navigation, and tree interactions deterministically in CI-like runs.

Quick Start

Ask the skill to set up your extension for mocked backoffice by enabling VITE_UMBRACO_USE_MSW=on and selecting either mock-repository or MSW handlers so you can start running Playwright tests against the UI immediately.

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 without a .NET backend?▼

You can test Umbraco backoffice UI without a .NET backend by using mocked APIs to run the interface deterministically. This skill enables visual extension testing by mocking API calls for documents, media, and users, allowing quick iteration without live backend dependencies.

How do I set up Playwright tests for Umbraco extension UI?▼

To set up Playwright tests, enable the VITE_UMBRACO_USE_MSW environment variable and select either mock-repository or MSW handlers. This configures the mocked environment so you can immediately run Playwright browser automation against the Umbraco backoffice UI.

Can I use MSW to mock Umbraco backoffice APIs for visual testing?▼

Yes, you can use MSW to mock Umbraco backoffice APIs for visual testing. MSW handlers provide network-level mocking that intercepts API calls, allowing the full backoffice UI to render deterministically without a live .NET backend during development or CI scenarios.

What is the best way to verify Umbraco tree navigation loading states in CI?▼

The best way to verify Umbraco tree navigation loading states in CI is using a mocked backoffice environment with Playwright. By mocking API responses for tree interactions, you achieve deterministic UI rendering that reliably validates loading states and navigation without backend variability.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

umbraco-mocked-backoffice

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

Community
Intermediate
leafcoderleafcoder
2

webapp-testing

Automate functional testing and UI debugging for local web apps with Playwright.

Community
Intermediate
albanistalbanist
4

umbraco-mocked-backoffice

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

Community
Intermediate
umbracoumbraco
26

umbraco-mocked-backoffice

Mock Umbraco backoffice API calls with MSW for visual testing.

Official
Intermediate