Implementation:Microsoft Playwright Svelte CT Mount

Overview

Svelte CT Mount provides the browser-side component mounting logic for Playwright's Svelte component testing, supporting both Svelte 4 (class components) and Svelte 5 (snippet-based slots).

Description

This module handles Svelte component mounting with support for:

• Object component notation -- Svelte components are mounted using object-style descriptors with type, props, and slots
• Svelte 5 snippets -- converts string slot values into Svelte 5 createRawSnippet calls for the new snippet-based slot system
• Legacy compatibility -- uses asClassComponent from svelte/legacy for class-based component API
• Props and slots -- merges props and slots into a single props object as required by Svelte 5
• Update support -- uses $set for updating props on mounted components

The module stores the Svelte component instance on the root element using a Symbol key for later update and unmount operations.

Usage

Automatically injected when using @playwright/experimental-ct-svelte for component testing.

Code Reference

Source Location

packages/playwright-ct-svelte/registerSource.mjs (105 lines)

Key Functions

window.playwrightMount = async (component, rootElement, hooksConfig) => { ... }
window.playwrightUnmount = async (rootElement) => { ... }
window.playwrightUpdate = async (rootElement, component) => { ... }

Import

Injected as text into the browser; no direct import.

I/O Contract

Inputs

• component -- Playwright object component descriptor with type, props, slots
• rootElement -- DOM element to mount into
• hooksConfig -- lifecycle hook configuration

Outputs

• Mounted Svelte component instance stored on the element
• Slots rendered using Svelte 5 snippets or legacy slot system

Related Pages

• Microsoft_Playwright_React_CT_Mount -- React component testing mount
• Microsoft_Playwright_Vue_CT_Mount -- Vue component testing mount