Implementation:Microsoft Playwright Vue CT Mount

Overview

Vue CT Mount provides the browser-side component mounting logic for Playwright's Vue component testing, supporting both JSX and object component notations with slot compilation and event handling.

Description

This module is the most feature-rich of the component testing mount sources, handling:

• JSX notation -- converts Playwright JSX descriptors into Vue h() render function calls
• Object notation -- mounts components using Vue's createApp with props and compiled template slots
• Slot compilation -- compiles string slots into Vue template functions using @vue/compiler-dom
• Event handling -- wraps on* props to emit events that Playwright can listen to
• Vue devtools suppression -- silences Vue devtools hooks to prevent interference
• Lifecycle hooks -- supports beforeMount and afterMount hooks with access to the app and component instances

The module maintains a registry of Vue app instances and provides update/unmount support.

Usage

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

Code Reference

Source Location

packages/playwright-ct-vue/registerSource.mjs (284 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 -- JSX or object component descriptor with type, props, slots, children
• rootElement -- DOM element to mount into
• hooksConfig -- lifecycle hook configuration

Outputs

• Mounted Vue application with the component
• Event listeners registered for on* props
• Compiled template slots rendered in the component

Related Pages

• Microsoft_Playwright_React_CT_Mount -- React component testing mount
• Microsoft_Playwright_Svelte_CT_Mount -- Svelte component testing mount
• Microsoft_Playwright_React17_CT_Mount -- React 17 component testing mount