> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uplink.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Interaction

> Methods for interacting with page elements

The Page interaction API provides methods for clicking elements, typing input, and interacting with forms.

## Methods

### `page.click()`

Clicks an element matching the CSS selector.

```typescript theme={null}
page.click(selector: string, options?: ClickOptions): Promise<boolean>
```

**Parameters:**

* `selector`: CSS selector for the element to click
* `options` (optional): Click options

**Options:**

```typescript theme={null}
interface ClickOptions {
  simulateFramework?: boolean  // Simulate framework-specific click events (default: false)
}
```

**Returns:** `Promise<boolean>` - `true` if click succeeded

**Examples:**

```typescript theme={null}
// Basic click
await page.click('#submit-button')

// Click with framework simulation (for React, Vue, etc.)
await page.click('.link', { simulateFramework: true })

// Wait for element before clicking
await page.waitForSelector('#button')
await page.click('#button')
```

<Tip>
  Use `simulateFramework: true` when clicking elements in React, Vue, or Angular applications that rely on framework-specific event handlers.
</Tip>

### `page.input()`

Types text into an input element.

```typescript theme={null}
page.input(selector: string, text: string, options?: InputOptions): Promise<void>
```

**Parameters:**

* `selector`: CSS selector for the input element
* `text`: Text to type
* `options` (optional): Input options

**Options:**

```typescript theme={null}
interface InputOptions {
  simulateFramework?: boolean  // Simulate framework-specific events (default: false)
  simulateTyping?: boolean     // Simulate human typing with delays (default: true)
  triggerEvents?: boolean      // Trigger DOM events (default: true)
}
```

**Returns:** `Promise<void>`

**Examples:**

```typescript theme={null}
// Basic input
await page.input('#username', 'myuser')

// Input with options
await page.input('#password', 'secret123', {
  simulateFramework: true,   // For React/Vue
  simulateTyping: true,      // Realistic typing speed
  triggerEvents: true        // Fire input/change events
})

// Fast input without typing simulation
await page.input('#email', 'user@example.com', {
  simulateTyping: false
})
```

### `page.select()`

Selects an option in a `<select>` element.

```typescript theme={null}
page.select(selector: string, value: string): Promise<void>
```

**Parameters:**

* `selector`: CSS selector for the select element
* `value`: Value of the option to select

**Returns:** `Promise<void>`

**Example:**

```typescript theme={null}
// Select by value
await page.select('#country', 'USA')

// Select in a form
await page.input('#name', 'John Doe')
await page.select('#country', 'Canada')
await page.click('#submit')
```

## Complete examples

### Form submission

```typescript theme={null}
await page.goto('https://example.com/signup')

// Fill out form
await page.input('#email', 'user@example.com')
await page.input('#password', 'SecurePass123!')
await page.input('#password-confirm', 'SecurePass123!')
await page.select('#country', 'US')

// Check checkbox
await page.click('#terms-checkbox')

// Submit
await page.click('#signup-button')

// Wait for success
await page.waitForSelector('.success-message')
console.log('Form submitted successfully')
```

### Contact form submission

```typescript theme={null}
async function submitContactForm(page, data) {
  await page.goto('https://example.com/contact')

  // Wait for form to load
  await page.waitForSelector('#name')

  // Fill out contact form
  await page.input('#name', data.name)
  await page.input('#email', data.email)
  await page.input('#subject', data.subject)
  await page.input('#message', data.message, {
    simulateTyping: true
  })

  // Submit form
  await page.click('#submit-button')

  // Wait for confirmation
  await page.waitForSelector('.success-message', { timeout: 10000 })

  console.log('Form submitted successfully')
}

await submitContactForm(page, {
  name: 'John Doe',
  email: 'john@example.com',
  subject: 'Question',
  message: 'Hello, I have a question...'
})
```

### Search and filter

```typescript theme={null}
await page.goto('https://example.com/products')

// Enter search term
await page.input('#search', 'laptop')

// Select category filter
await page.select('#category', 'electronics')

// Select price range
await page.select('#price-range', '500-1000')

// Click search button
await page.click('#search-button')

// Wait for results
await page.waitForSelector('.search-results')

// Count results
const count = await page.evaluate(() => {
  return document.querySelectorAll('.product-item').length
})

console.log(`Found ${count} products`)
```

### Multi-step form

```typescript theme={null}
// Page 1: Personal info
await page.goto('https://example.com/form')
await page.input('#first-name', 'John')
await page.input('#last-name', 'Doe')
await page.input('#email', 'john@example.com')
await page.click('#next-button')

// Wait for page 2
await page.waitForSelector('#address')

// Page 2: Address
await page.input('#address', '123 Main St')
await page.input('#city', 'New York')
await page.select('#state', 'NY')
await page.input('#zip', '10001')
await page.click('#next-button')

// Wait for page 3
await page.waitForSelector('#card-number')

// Page 3: Payment
await page.input('#card-number', '4111111111111111')
await page.input('#expiry', '12/25')
await page.input('#cvv', '123')
await page.click('#submit-button')

// Wait for confirmation
await page.waitForSelector('.confirmation')
console.log('Form completed successfully')
```

### Framework-aware interaction

```typescript theme={null}
// For React/Vue/Angular apps
async function clickReactButton(selector) {
  await page.waitForSelector(selector)
  await page.click(selector, { simulateFramework: true })
}

async function inputReactField(selector, value) {
  await page.waitForSelector(selector)
  await page.input(selector, value, {
    simulateFramework: true,
    triggerEvents: true
  })
}

// Use in a React app
await page.goto('https://react-app.example.com')
await inputReactField('#username', 'testuser')
await inputReactField('#password', 'testpass')
await clickReactButton('#login-button')
```

### Handling dynamic content

```typescript theme={null}
// Wait for element to be clickable
await page.waitForSelector('#dynamic-button')

// Add a small delay to ensure JavaScript has initialized
await new Promise(resolve => setTimeout(resolve, 500))

// Click the element
const success = await page.click('#dynamic-button')

if (!success) {
  console.error('Click failed - element may not be interactable')
} else {
  console.log('Click succeeded')
}

// Wait for result
await page.waitForSelector('.result')
```

## Best practices

<AccordionGroup>
  <Accordion title="Wait before interacting" icon="hourglass">
    Always wait for elements to appear before interacting:

    ```typescript theme={null}
    await page.waitForSelector('#button')
    await page.click('#button')
    ```
  </Accordion>

  <Accordion title="Use specific selectors" icon="crosshairs">
    Use unique, stable selectors (IDs are best):

    ```typescript theme={null}
    // Good
    await page.click('#submit-button')

    // Less reliable
    await page.click('button.blue.large')
    ```
  </Accordion>

  <Accordion title="Check click results" icon="check">
    Verify that clicks succeeded:

    ```typescript theme={null}
    const clicked = await page.click('#button')
    if (!clicked) {
      console.error('Click failed')
    }
    ```
  </Accordion>

  <Accordion title="Simulate realistic typing" icon="keyboard">
    Use realistic typing for forms that may have frontend validation:

    ```typescript theme={null}
    await page.input('#comment', 'Great article!', {
      simulateTyping: true  // Triggers real-time character validation
    })
    ```
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Waiting" icon="hourglass" href="/api-reference/page/waiting">
    Wait for elements before interacting
  </Card>

  <Card title="JavaScript" icon="code" href="/api-reference/page/javascript">
    Execute custom interactions
  </Card>

  <Card title="Events" icon="bell" href="/api-reference/page/events">
    Monitor interaction events
  </Card>

  <Card title="Page overview" icon="window-maximize" href="/api-reference/page/overview">
    Back to Page API overview
  </Card>
</CardGroup>