Element Manipulation

/**
 * 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>;

// 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();

/**
 * 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>;

// 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;

/**
 * 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>;

// Basic interactions
await button.tap();
await imageElement.longpress();

// Custom events
await element.trigger("customEvent", { data: "test" });
await form.trigger("submit");

/**
 * 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>;

// 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 }
  ]
});

/**
 * 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[]>;

// 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");

/**
 * 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>;
}

const textInput = await page.$("input[type='text']");
await textInput.input("Hello World");

const textarea = await page.$("textarea");
await textarea.input("Multi-line\ntext content");

/**
 * 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>;
}

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`);

/**
 * 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>;
}

const swiper = await page.$("swiper");
await swiper.swipeTo(2); // Navigate to third slide

/**
 * 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>;
}

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");

/**
 * Switch element with toggle functionality
 */
interface SwitchElement extends Element {
  /**
   * Toggle switch state
   * @returns Promise resolving when toggle is complete
   */
  tap(): Promise<void>;
}

/**
 * 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>;
}

const slider = await page.$("slider");
await slider.slideTo(75); // Set slider to 75% of range

/**
 * 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>;
}

const video = await page.$("video");
await video.callContextMethod("play");
await video.callContextMethod("seek", 30); // Seek to 30 seconds

/**
 * 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>;
}

// 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;
}