Skip to main content
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

Always wait for elements to appear before interacting:
await page.waitForSelector('#button')
await page.click('#button')
Use unique, stable selectors (IDs are best):
// Good
await page.click('#submit-button')

// Less reliable
await page.click('button.blue.large')
Verify that clicks succeeded:
const clicked = await page.click('#button')
if (!clicked) {
  console.error('Click failed')
}
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