Skip to main content

​
Overview

The chrome() preset automatically sets up a Chrome browser with TestDriver and Dashcam recording. It’s the easiest way to test web applications.
Recommended Pattern (v7.1+): Use TestDriver() hook + provision.chrome() for more flexibility:
import { TestDriver } from 'testdriverai/vitest/hooks';

test('my test', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  await testdriver.provision.chrome({ url: 'https://example.com' });
  // ...
});
The chrome() preset is still supported but the direct API provides better control and clearer lifecycle management.

​
Quick Start

import { test } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('login test', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ url: 'https://myapp.com/login' });
  
  await testdriver.find('email input').type('[email protected]');
  await testdriver.find('password input').type('password123');
  await testdriver.find('Login button').click();
  
  await testdriver.assert('Welcome message is visible');
});

​
Signature

chrome(context, options): Promise<ChromeResult>

​
Parameters

​
context
object
required
Vitest test context - automatically passed to your test function
​
options
object
Configuration options for Chrome

​
Returns

​
testdriver
TestDriver
required
TestDriver instance ready to use
​
dashcam
Dashcam
Dashcam instance for test recording (if enabled)

​
Examples

​
Basic Web App Testing

import { test } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('search functionality', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ url: 'https://example.com' });
  
  await testdriver.find('search input').type('TestDriver');
  await testdriver.find('search button').click();
  await testdriver.assert('search results are displayed');
});

​
With Dashcam Recording

import { test, expect } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('checkout flow', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ url: 'https://shop.example.com' });
  
  // Add items to cart
  await testdriver.find('Add to Cart button').click();
  await testdriver.find('View Cart').click();
  
  // Proceed to checkout
  await testdriver.find('Checkout button').click();
  
  // Fill shipping info
  await testdriver.find('Name input').type('John Doe');
  await testdriver.find('Address input').type('123 Main St');
  
  // Submit order
  await testdriver.find('Place Order').click();
  
  // Verify confirmation
  const confirmed = await testdriver.assert('Order confirmed');
  expect(confirmed).toBeTruthy();
  
  // Dashcam automatically saves replay URL when test completes
});

​
Testing on Different Operating Systems

import { test } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('windows chrome test', async (context) => {
  const testdriver = TestDriver(context, { headless: true, os: 'windows' });
  
  await testdriver.provision.chrome({ url: 'https://myapp.com' });
  
  await testdriver.find('Start').click();
});

test('mac chrome test', async (context) => {
  const testdriver = TestDriver(context, { headless: true, os: 'mac' });
  
  await testdriver.provision.chrome({ url: 'https://myapp.com' });
  
  await testdriver.find('Start').click();
});

​
Without Dashcam

import { test } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('quick test without recording', async (context) => {
  const testdriver = TestDriver(context, { headless: true, dashcam: false });
  
  await testdriver.provision.chrome({ url: 'https://example.com' });
  
  await testdriver.find('button').click();
});

​
Testing Chrome Extensions

import { test } from 'vitest';
import { TestDriver } from 'testdriverai/vitest/hooks';

test('chrome extension', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ 
    url: 'chrome://extensions',
    guest: false // Need profile for extensions
  });
  
  await testdriver.find('Developer mode toggle').click();
  await testdriver.find('Load unpacked').click();
});

​
What It Does

When you call chrome(), it automatically:
  1. Initializes TestDriver - Creates and connects to sandbox
  2. Sets up Dashcam - Authenticates and starts recording (if enabled)
  3. Launches Chrome - Opens browser with your specified options
  4. Navigates to URL - Loads your application
  5. Waits for Ready - Ensures Chrome is focused and page is loaded
  6. Returns Instances - Provides ready-to-use testdriver and dashcam
At test end:
  • Dashcam automatically stops and saves replay URL
  • TestDriver automatically disconnects
  • All cleanup is handled for you

​
Common Patterns

​
Form Filling

test('user registration', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ url: 'https://myapp.com/register' });
  
  await testdriver.find('email field').type('[email protected]');
  await testdriver.find('password field').type('SecurePass123!');
  await testdriver.find('confirm password field').type('SecurePass123!');
  await testdriver.find('terms checkbox').click();
  await testdriver.find('Sign Up button').click();
  
  await testdriver.assert('Registration successful message appears');
});

test('multi-page navigation', async (context) => {
  const testdriver = TestDriver(context, { headless: true });
  
  await testdriver.provision.chrome({ url: 'https://myapp.com' });
  
  // Navigate through pages
  await testdriver.find('About link').click();
  await testdriver.assert('About page heading is visible');
  
  await testdriver.find('Services link').click();
  await testdriver.assert('Services page content is loaded');
  
  await testdriver.find('Contact link').click();
  await testdriver.assert('Contact form is displayed');
});

​
Error Handling

test('handles errors gracefully', async (context) => {
  try {
    const testdriver = TestDriver(context, { headless: true });
    
    await testdriver.provision.chrome({ url: 'https://myapp.com' });
    
    await testdriver.find('non-existent element').click();
  } catch (error) {
    // Cleanup still happens automatically via Vitest hooks
    console.error('Test failed:', error);
    throw error; // Re-throw to mark test as failed
  }
});

​
Using with provision()

The chrome() preset can also be called via the unified provision() function: 
import { provision } from 'testdriverai/presets';

test('using provision', async (context) => {
  const { testdriver } = await provision('chrome', {
    url: 'https://example.com'
  }, context);
  
  // Same functionality as chrome() directly
});

​
See Also