Quick Start

This guide will walk you through writing your first end-to-end test with Chroma.

Basic Test Structure

Chroma extends Playwright's test fixtures with wallet-specific functionality:

import { createWalletTest } from '@avalix/chroma'

const test = createWalletTest({
  wallets: [{
    type: 'polkadot-js'
  }]
})

test('my first wallet test', async ({ page, wallets }) => {
  // Get wallet instance
  const polkadotJs = wallets['polkadot-js']
  
  // Import a test account
  await polkadotJs.importMnemonic({
    seed: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk'
  })
  
  // Navigate to your dApp
  await page.goto('http://localhost:3000')
  
  // Authorize the connection
  await polkadotJs.authorize()
})

Importing Accounts

Before testing wallet interactions, you need to import a test account:

// Import using mnemonic seed phrase
await polkadotJs.importMnemonic({
  seed: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk',
  name: 'Test Account' // optional
})

Never use real seed phrases in tests. Always use test accounts with no real funds.

Authorizing Connections

When your dApp requests wallet access, use authorize() to approve:

import { createWalletTest } from '@avalix/chroma'

const test = createWalletTest({
  wallets: [{
    type: 'polkadot-js'
  }]
})

test('authorize dApp connection', async ({ page, wallets }) => {
  const polkadotJs = wallets['polkadot-js']
  
  await polkadotJs.importMnemonic({
    seed: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk'
  })
  
  await page.goto('http://localhost:3000')
  
  // Click connect button in your dApp
  await page.click('button:has-text("Connect Wallet")')
  
  // Approve the connection request in the wallet popup
  await polkadotJs.authorize()
})

Approving Transactions

To approve transaction signing requests:

import { createWalletTest } from '@avalix/chroma'

const test = createWalletTest({
  wallets: [{
    type: 'polkadot-js'
  }]
})

test('approve transaction', async ({ page, wallets }) => {
  const polkadotJs = wallets['polkadot-js']
  
  await polkadotJs.importMnemonic({
    seed: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk'
  })
  
  await page.goto('http://localhost:3000')
  await polkadotJs.authorize()
  
  // Trigger a transaction in your dApp
  await page.click('button:has-text("Send Transaction")')
  
  // Approve the transaction in the wallet
  await polkadotJs.approveTx()
})

Complete Example

Here's a complete test that connects a wallet and performs a transaction:

tests/transfer.spec.ts

import { createWalletTest, expect } from '@avalix/chroma'

const test = createWalletTest({
  wallets: [{
    type: 'polkadot-js'
  }]
})

test('transfer tokens', async ({ page, wallets }) => {
  const polkadotJs = wallets['polkadot-js']
  
  // Setup account
  await polkadotJs.importMnemonic({
    seed: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk'
  })
  
  // Navigate and connect
  await page.goto('http://localhost:3000')
  await page.click('button:has-text("Connect")')
  await polkadotJs.authorize()
  
  // Verify connection
  await expect(page.locator('.wallet-address')).toBeVisible()
  
  // Perform transfer
  await page.fill('input[name="amount"]', '1.0')
  await page.fill('input[name="recipient"]', '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY')
  await page.click('button:has-text("Transfer")')
  
  // Approve transaction
  await polkadotJs.approveTx()
  
  // Verify success
  await expect(page.locator('.success-message')).toBeVisible()
})

Next Steps

Polkadot.js Wallet

Full guide for Polkadot.js wallet

Talisman Wallet

Full guide for Talisman wallet

CI/CD Setup

Run tests in continuous integration