Interaction

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.

page.click(selector: string, options?: ClickOptions): Promise<boolean>

Parameters:

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

Options:

interface ClickOptions {
  simulateFramework?: boolean  // Simulate framework-specific click events (default: false)
}

Returns: Promise<boolean> - true if click succeeded Examples:

// 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')

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

`page.input()`

Types text into an input element.

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:

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:

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

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:

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

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

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

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

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

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

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

Wait before interacting

Always wait for elements to appear before interacting:

await page.waitForSelector('#button')
await page.click('#button')

Use specific selectors

Use unique, stable selectors (IDs are best):

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

// Less reliable
await page.click('button.blue.large')

Check click results

Verify that clicks succeeded:

const clicked = await page.click('#button')
if (!clicked) {
  console.error('Click failed')
}

Simulate realistic typing

Use realistic typing for forms that may have frontend validation:

await page.input('#comment', 'Great article!', {
  simulateTyping: true  // Triggers real-time character validation
})

Waiting

Wait for elements before interacting

JavaScript

Execute custom interactions

Events

Monitor interaction events

Page overview

Back to Page API overview

JavaScript SDK

Native SDK

Page API

AI Automation

Methods

`page.click()`

`page.input()`

`page.select()`

Complete examples

Form submission

Contact form submission

Search and filter

Multi-step form

Framework-aware interaction

Handling dynamic content

Best practices

Waiting

JavaScript

Events

Page overview

​Methods

​page.click()

​page.input()

​page.select()

​Complete examples

​Form submission

​Contact form submission

​Search and filter

​Multi-step form

​Framework-aware interaction

​Handling dynamic content

​Best practices

​Related

Waiting

JavaScript

Events

Page overview

Methods

`page.click()`

`page.input()`

`page.select()`

Complete examples

Form submission

Contact form submission

Search and filter

Multi-step form

Framework-aware interaction

Handling dynamic content

Best practices

Related