umbraco-e2e-testing

Umbraco E2E Testing End-to-end testing for Umbraco backoffice extensions using Playwright and @umbraco/playwright-testhelpers . This approach tests against a real running Umbraco instance, validating complete user workflows. Critical: Use Testhelpers for Core Umbraco Use @umbraco/playwright-testhelpers for core Umbraco operations : Package Purpose Why Required @umbraco/playwright-testhelpers UI and API helpers Handles auth, navigation, core entity CRUD @umbraco/json-models-builders Test data builders Creates valid Umbraco entities with correct structure Why use testhelpers for core Umbraco? Umbraco uses data-mark instead of data-testid - testhelpers handle this Auth token management is complex - testhelpers manage STORAGE_STAGE_PATH API setup/teardown requires specific payload formats - builders ensure correctness Selectors change between versions - testhelpers abstract these away // WRONG - Raw Playwright for core Umbraco (brittle) await page . goto ( '/umbraco' ) ; await page . fill ( '[name="email"]' , 'admin@example.com' ) ; // CORRECT - Testhelpers for core Umbraco import { test } from '@umbraco/playwright-testhelpers' ; test ( 'my test' , async ( { umbracoApi , umbracoUi } ) => { await umbracoUi . goToBackOffice ( ) ; await umbracoUi . login . enterEmail ( 'admin@example.com' ) ; } ) ; When to Use Raw Playwright For custom extensions , use umbracoUi.page (raw Playwright) because testhelpers don't know about your custom elements: test ( 'my custom extension' , async ( { umbracoUi } ) => { // Testhelpers for core navigation await umbracoUi . goToBackOffice ( ) ; await umbracoUi . content . goToSection ( ConstantHelper . sections . settings ) ; // Raw Playwright for YOUR custom elements await umbracoUi . page . getByRole ( 'link' , { name : 'My Custom Item' } ) . click ( ) ; await expect ( umbracoUi . page . locator ( 'my-custom-workspace' ) ) . toBeVisible ( ) ; } ) ; Use Testhelpers For Use umbracoUi.page For Login/logout Custom tree items Navigate to ANY section (including custom) Custom workspace elements Create/edit documents via API Custom entity actions Built-in UI interactions Custom UI components When to Use Testing complete user workflows Testing data persistence Testing authentication/authorization Acceptance testing before release Integration testing with real API responses