Recipes
End-to-End Testing
Run E2E tests against realistic browser environments with proper geo-targeting, device emulation, and network conditions.
Basic Test Setup
import { SessionKit } from '@sessionkit/sdk'
import { chromium } from 'playwright'
import { test, expect } from '@playwright/test'
const sk = new SessionKit({ apiKey: process.env.SESSIONKIT_API_KEY })
test.describe('Checkout Flow', () => {
let session: Awaited<ReturnType<typeof sk.sessions.create>>
let browser: Awaited<ReturnType<typeof chromium.connectOverCDP>>
test.beforeEach(async () => {
session = await sk.sessions.create({
proxy: { type: 'residential', country: 'US' },
stealth: 'none', // No stealth needed for your own app
fingerprint: 'auto',
})
browser = await chromium.connectOverCDP(session.cdpUrl)
})
test.afterEach(async () => {
await browser.close()
await sk.sessions.destroy(session.id)
})
test('completes purchase with US billing', async () => {
const page = await browser.newPage()
await page.goto('https://myapp.com/products/widget')
await page.click('[data-testid="add-to-cart"]')
await page.click('[data-testid="checkout"]')
// Fill billing (IP is already in US)
await page.fill('#card-number', '4242424242424242')
await page.fill('#expiry', '12/25')
await page.fill('#cvc', '123')
await page.click('[data-testid="pay"]')
await expect(page.locator('.success-message')).toBeVisible()
})
})
Multi-Region Testing
Test your app from different geographic locations:
const regions = [
{ country: 'US', locale: 'en-US', currency: 'USD' },
{ country: 'GB', locale: 'en-GB', currency: 'GBP' },
{ country: 'DE', locale: 'de-DE', currency: 'EUR' },
{ country: 'JP', locale: 'ja-JP', currency: 'JPY' },
]
for (const region of regions) {
test(`shows correct currency for ${region.country}`, async () => {
const session = await sk.sessions.create({
proxy: { type: 'residential', country: region.country },
fingerprint: { locale: region.locale },
})
const browser = await chromium.connectOverCDP(session.cdpUrl)
const page = await browser.newPage()
await page.goto('https://myapp.com/pricing')
const price = await page.textContent('.price')
expect(price).toContain(region.currency)
await browser.close()
await sk.sessions.destroy(session.id)
})
}
Visual Regression Testing
Capture screenshots for visual diff testing:
test('product page matches snapshot', async () => {
const session = await sk.sessions.create({
fingerprint: {
viewport: { width: 1280, height: 720 },
platform: 'MacIntel',
},
})
const browser = await chromium.connectOverCDP(session.cdpUrl)
const page = await browser.newPage()
await page.goto('https://myapp.com/products')
await page.waitForLoadState('networkidle')
const screenshot = await page.screenshot({ fullPage: true })
expect(screenshot).toMatchSnapshot('product-page.png')
await browser.close()
await sk.sessions.destroy(session.id)
})