This guide provides a quick setup process for Playwright to automate tests for TON Dapps, note that this is a basic configuration
- Node.js v18+
- Playwright and TypeScript knowledge
- Install Playwright and its dependencies:
npm init playwright@latestFollow the prompts to complete the installation
- Install dev dependency:
npm install --save-dev @tonconnect/qa- Create or update your Playwright configuration file (e.g.,
playwright.config.ts):
import 'dotenv/config'
import { defineConfig, devices } from '@playwright/test'
// Define Playwright configuration
export default defineConfig({
testDir: './test',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
// Set base URL for tests
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
})- Create a test file (e.g.,
tests/example.spec.ts):
// Import necessary modules and setup
import { TonConnectWidget, testWith, tonkeeperFixture } from '@tonconnect/qa'
// Create a test instance Tonkeeper fixtures
const test = testWith(tonkeeperFixture(process.env.WALLET_MNEMONIC!))
// Extract expect function from test
const { expect } = test
// Define a basic test case
test('lab', async ({ context, wallet }) => {
// Navigate to the homepage
const app = await context.newPage()
await app.goto('https://ton-connect.github.io/demo-dapp-with-react-ui/')
// Click the connect button
const connectButton = app.getByRole('button', { name: 'Connect wallet to send the transaction' })
// Connect Tonkeeper to the dapp
const tonConnect = new TonConnectWidget(app, connectButton)
await tonConnect.connectWallet('Tonkeeper')
await wallet.connect()
// Verify the connected account address
const accountSelector = app.locator('div[data-tc-text]')
await expect(accountSelector).toHaveText('0QAy…WfyR')
// Sending transactions
await app.getByRole('button', { name: 'Send transaction' }).click()
await wallet.accept()
})To run your Playwright tests with Tonkeeper:
-
Start your local development server (if testing against a local app).
-
Run the tests:
npx playwright test --config playwright-test.config.tsThis will execute your tests using Playwright with Tonkeeper integration
Write scenarios in folder features see Gherkin Reference and Cucumber Anti-Patterns
Describe step in folder steps
pnpm install
pnpm lint
pnpm format
pnpm playwright install
pnpm test # simple bdd test from features/*.feature
# for test with tonkeeper setup WALLET_MNEMONIC=".." in file .env
pnpm tonkeeper- Gherkin — language used for describe acceptance scenarios
- Node.js — main platform for automation implementation
- Playwright + BDD — framework browser automation used for implementation steps uses in scenarios
pnpm release [--dry-run]- https://www.browserstack.com/
- https://saucelabs.com/
- https://nx.dev/
- IDE integration