Comprehensive element interaction capabilities for testing UI components, form inputs, and user interactions across different uni-app platforms.
Core methods for getting element properties, attributes, and content.
/**
* Get element text content
* @returns Promise resolving to element's text content
*/
text(): Promise<string>;
/**
* Get element attribute value
* @param name - Attribute name to retrieve
* @returns Promise resolving to attribute value or null
*/
attribute(name: string): Promise<string | null>;
/**
* Get element form value (for input elements)
* @returns Promise resolving to element's current value
*/
value(): Promise<any>;
/**
* Get element property value
* @param name - Property name to retrieve
* @returns Promise resolving to property value
*/
property(name: string): Promise<any>;
/**
* Get element inner HTML content
* @returns Promise resolving to inner HTML string
*/
html(): Promise<string>;
/**
* Get element outer HTML content (including the element itself)
* @returns Promise resolving to outer HTML string
*/
outerHtml(): Promise<string>;
/**
* Get computed CSS style value
* @param name - CSS style property name
* @returns Promise resolving to computed style value
*/
style(name: string): Promise<string>;Usage Examples:
// Get element information
const button = await page.$(".submit-btn");
const buttonText = await button.text();
const buttonClass = await button.attribute("class");
const buttonStyle = await button.style("background-color");
// Get form input values
const input = await page.$("input[name='username']");
const username = await input.value();
// Get element HTML content
const container = await page.$(".content");
const innerContent = await container.html();Methods for getting element size and position information.
/**
* Get element dimensions
* @returns Promise resolving to element size object
*/
size(): Promise<ElementSize>;
/**
* Get element position relative to page
* @returns Promise resolving to element offset object
*/
offset(): Promise<ElementOffset>;Usage Examples:
// Get element dimensions
const { width, height } = await button.size();
console.log(`Button size: ${width}x${height}`);
// Get element position
const { left, top } = await button.offset();
console.log(`Button position: (${left}, ${top})`);
// Check if element is visible in viewport
const buttonOffset = await button.offset();
const pageSize = await page.size();
const isVisible = buttonOffset.top < pageSize.height;Core interaction methods for simulating user actions on elements.
/**
* Tap/click the element
* @returns Promise resolving when tap is complete
*/
tap(): Promise<void>;
/**
* Long press the element (mobile platforms)
* @returns Promise resolving when long press is complete
*/
longpress(): Promise<void>;
/**
* Trigger a custom event on the element
* @param event - Event name to trigger
* @param detail - Optional event detail data
* @returns Promise resolving when event is triggered
*/
trigger(event: string, detail?: any): Promise<void>;Usage Examples:
// Basic interactions
await button.tap();
await imageElement.longpress();
// Custom events
await element.trigger("customEvent", { data: "test" });
await form.trigger("submit");Advanced touch interaction methods for gesture-based testing.
/**
* Start a touch interaction
* @param options - Touch event options
* @returns Promise resolving when touch starts
*/
touchstart(options?: TouchOptions): Promise<void>;
/**
* Move during a touch interaction
* @param options - Touch move options
* @returns Promise resolving when touch moves
*/
touchmove(options?: TouchOptions): Promise<void>;
/**
* End a touch interaction
* @param options - Touch end options
* @returns Promise resolving when touch ends
*/
touchend(options?: TouchOptions): Promise<void>;Usage Examples:
// Simulate swipe gesture
await element.touchstart({ x: 100, y: 200 });
await element.touchmove({ x: 300, y: 200 });
await element.touchend({ x: 300, y: 200 });
// Multi-touch gesture
await element.touchstart({
touches: [
{ identifier: 1, x: 100, y: 100 },
{ identifier: 2, x: 200, y: 200 }
]
});Elements can contain child elements and support nested selection.
/**
* Select child element using CSS selector
* @param selector - CSS selector for child element
* @returns Promise resolving to child Element or null
*/
$(selector: string): Promise<Element | null>;
/**
* Select multiple child elements using CSS selector
* @param selector - CSS selector for child elements
* @returns Promise resolving to array of child Elements
*/
$$(selector: string): Promise<Element[]>;Usage Examples:
// Find child elements
const form = await page.$("form");
const submitButton = await form.$(".submit-button");
const allInputs = await form.$$("input");
// Navigate complex structures
const listItem = await page.$(".list-item:first-child");
const itemTitle = await listItem.$(".title");
const itemActions = await listItem.$$(".action-button");Different element types provide specialized methods based on their functionality.
Enhanced functionality for form input elements.
/**
* Input element with text input capability
*/
interface InputElement extends Element {
/**
* Set input value by simulating user typing
* @param value - Text value to input
* @returns Promise resolving when input is complete
*/
input(value: string): Promise<void>;
}Usage Example:
const textInput = await page.$("input[type='text']");
await textInput.input("Hello World");
const textarea = await page.$("textarea");
await textarea.input("Multi-line\ntext content");Specialized methods for scroll-view components.
/**
* Scroll view element with scroll control
*/
interface ScrollViewElement extends Element {
/**
* Scroll to specific position
* @param x - Horizontal scroll position
* @param y - Vertical scroll position
* @returns Promise resolving when scroll is complete
*/
scrollTo(x: number, y: number): Promise<void>;
/**
* Get scroll view dimensions
*/
scrollWidth(): Promise<number>;
scrollHeight(): Promise<number>;
}Usage Example:
const scrollView = await page.$("scroll-view");
await scrollView.scrollTo(0, 500); // Scroll down 500px
const scrollHeight = await scrollView.scrollHeight();
console.log(`Total scroll height: ${scrollHeight}px`);Specialized methods for swiper components.
/**
* Swiper element with slide navigation
*/
interface SwiperElement extends Element {
/**
* Swipe to specific slide index
* @param index - Target slide index (0-based)
* @returns Promise resolving when swipe is complete
*/
swipeTo(index: number): Promise<void>;
}Usage Example:
const swiper = await page.$("swiper");
await swiper.swipeTo(2); // Navigate to third slideSpecialized methods for movable-view components.
/**
* Movable view element with position control
*/
interface MovableViewElement extends Element {
/**
* Move element to specific position
* @param x - Target X coordinate
* @param y - Target Y coordinate
* @returns Promise resolving when move is complete
*/
moveTo(x: number, y: number): Promise<void>;
}Usage Example:
const movableView = await page.$("movable-view");
await movableView.moveTo(100, 150);
// Get current position
const currentX = await movableView.property("x");
const currentY = await movableView.property("y");Specialized methods for switch components.
/**
* Switch element with toggle functionality
*/
interface SwitchElement extends Element {
/**
* Toggle switch state
* @returns Promise resolving when toggle is complete
*/
tap(): Promise<void>;
}Specialized methods for slider components.
/**
* Slider element with value control
*/
interface SliderElement extends Element {
/**
* Set slider to specific value
* @param value - Target slider value
* @returns Promise resolving when value is set
*/
slideTo(value: number): Promise<void>;
}Usage Example:
const slider = await page.$("slider");
await slider.slideTo(75); // Set slider to 75% of rangeSpecialized methods for video components.
/**
* Video element with media control
*/
interface VideoElement extends Element {
/**
* Call video context method
* @param method - Video context method name
* @param args - Method arguments
* @returns Promise resolving to method result
*/
callContextMethod(method: string, ...args: any[]): Promise<any>;
}Usage Example:
const video = await page.$("video");
await video.callContextMethod("play");
await video.callContextMethod("seek", 30); // Seek to 30 secondsFor elements representing Vue components, additional data methods are available.
/**
* Vue component element with data access
*/
interface ComponentElement extends Element {
/**
* Get component data
* @param path - Optional path to specific data property
* @returns Promise resolving to component data
*/
data(path?: string): Promise<any>;
/**
* Set component data
* @param data - Data object to merge
* @returns Promise resolving when data is set
*/
setData(data: object): Promise<void>;
/**
* Call component method
* @param method - Method name to call
* @param args - Method arguments
* @returns Promise resolving to method result
*/
callMethod(method: string, ...args: any[]): Promise<any>;
}Usage Example:
// Custom component with Vue instance
const customComponent = await page.$("custom-component");
const componentData = await customComponent.data();
await customComponent.setData({ status: "active" });
const result = await customComponent.callMethod("refresh");/**
* Call a function in the element's context
* @param functionName - Function name to call
* @param args - Function arguments
* @returns Promise resolving to function result
*/
callFunction(functionName: string, ...args: any[]): Promise<any>;
/**
* Get DOM property (different from element property)
* @param property - DOM property name or array of names
* @returns Promise resolving to property value(s)
*/
domProperty(property: string | string[]): Promise<any>;/**
* Element instance properties
*/
interface Element {
/** Element identifier */
readonly id: string;
/** HTML tag name (normalized, without "uni-" prefix) */
readonly tagName: string;
/** Parent page identifier */
readonly pageId: string;
/** Vue component node ID (if applicable) */
readonly nodeId?: string;
/** Video component ID (if applicable) */
readonly videoId?: string;
}interface ElementSize {
width: number;
height: number;
}
interface ElementOffset {
left: number;
top: number;
}
interface TouchOptions {
/** Touch position X coordinate */
x?: number;
/** Touch position Y coordinate */
y?: number;
/** Array of touch points for multi-touch */
touches?: TouchPoint[];
/** Array of changed touch points */
changedTouches?: TouchPoint[];
}
interface TouchPoint {
/** Touch identifier */
identifier: number;
/** Touch X coordinate */
x: number;
/** Touch Y coordinate */
y: number;
/** Touch target element */
target?: Element;
}