@avalix/克罗玛
Polkadot, Ethereum 的端到端测试库,以及使用 Playwright 的索拉纳钱包交互.
文档
我们强烈建议你看看 色相文档 升级到平面。 它是一个很好的资源,可以更多地了解图书馆. 它涵盖了从开始到CI/CD集成和多克设置等高级主题的一切.
安装
npm install @avalix/chroma @playwright/test
说明数字 : @playwright/test 是一种同伴依赖,必须单独安装以避免冲突.
下载扩展
在运行测试前, 您需要下载钱包扩展名 :
npx chroma download-extensions
这将下载钱包扩展名(例如MetaMask、Polkadot JS、Talisman)至 ./.chroma 在您的工程根中设置目录.
提示: 将此添加到您的 package.json 方便用的脚本 :
{
"scripts": {
"test:prepare": "chroma download-extensions"
}
}
重要:您必须在运行 Playwright 测试前运行此命令 。 如果找不到扩展名, 测试会因有帮助的错误消息而失败 .
快速启动
import { createWalletTest, expect } from '@avalix/chroma'
const test = createWalletTest({
wallets: [{ type: 'metamask' }]
})
test('connect wallet and sign transaction', async ({ page, wallets }) => {
const metamask = wallets.metamask
await metamask.importSeedPhrase({
seedPhrase: 'test test test test test test test test test test test junk'
})
await page.goto('http://localhost:3000')
await page.click('button:has-text("Connect Wallet")')
await metamask.approve()
await page.click('button:has-text("Send Transaction")')
await metamask.approve()
await expect(page.locator('.transaction-success')).toBeVisible()
})
多个钱包
import { createWalletTest } from '@avalix/chroma'
const test = createWalletTest({
wallets: [{ type: 'metamask' }, { type: 'talisman' }]
})
test('multi-wallet test', async ({ page, wallets }) => {
const metamask = wallets.metamask
const talisman = wallets.talisman
await metamask.importSeedPhrase({ seedPhrase: 'test test test test test test test test test test test junk' })
await talisman.importEthPrivateKey({ privateKey: '0x...', name: 'Bob' })
await page.goto('http://localhost:3000')
await metamask.approve()
})
设置工程模式
默认情况下,浏览器上下文使用临时配置,所以钱包状态(导入的账户,密码)在运行间丢失. 导入种子短语 一次 并重新使用所有规格的制备状态,结合 userDataDir 财务报告和审定财务报表 cloneUserDataDirFrom 选项 Playwright 的设置项目模式。 。 。 .
设置项目将准备的配置文件写入共享目录; spec 工程然后指向 a userDataDir 或复制它为平行.
1. 设置项目——种子一次
装有监视器文件的测试卫士 playwright test 并没有尝试登入一个已经准备好的配置文件(第二次运行将会在不再符合导入流量的UI上陷入僵局). 删除 .cache/wallet-setup 以迫使一个新的种子.
// metamask.setup.ts
import fs from 'node:fs'
import path from 'node:path'
import { createWalletTest } from '@avalix/chroma'
const SETUP_DIR = '.cache/wallet-setup'
const SENTINEL = path.join(SETUP_DIR, '.chroma-onboarded')
const setup = createWalletTest({
wallets: [{ type: 'metamask' }],
userDataDir: SETUP_DIR,
})
setup('seed metamask', async ({ wallets }) => {
if (fs.existsSync(SENTINEL))
return
await wallets.metamask.importSeedPhrase({
seedPhrase: 'test test test test test test test test test test test junk',
})
fs.writeFileSync(SENTINEL, '')
})
2. 共享的光谱固定装置
Spec 文件导入共享 test 工厂指出已准备好的简介。 因为MetaMask靴子在先前上载的配置文件上进入了锁定状态,所以每个光谱必须调用 wallets.metamask.unlock() 一次(这是一分之一的——当MetaMask已经解锁时,这个呼叫是没有的). 在解锁时,MetaMask侧面板会为测试会话的其余部分打开.
// fixtures.ts — shared by your spec files
import { createWalletTest } from '@avalix/chroma'
export const test = createWalletTest({
wallets: [{ type: 'metamask' }],
userDataDir: '.cache/wallet-setup',
})
export { expect } from '@playwright/test'
// some.spec.ts
import { test } from './fixtures'
test('connect and sign', async ({ page, wallets }) => {
const metamask = wallets.metamask
await page.goto('http://localhost:3000')
await metamask.unlock()
await page.click('button:has-text("Connect Wallet")')
await metamask.approve()
await page.click('button:has-text("Sign Message")')
await metamask.approve()
})
3. 连接项目
// playwright.config.ts
export default defineConfig({
workers: 1,
projects: [
{ name: 'setup', testMatch: /.*\.setup\.ts/ },
{
name: 'metamask',
testMatch: /.*\.spec\.ts/,
dependencies: ['setup'],
},
],
})
平行工人(高级)
色调锁 userDataDir,所以多个工人不能同时共享同一路径. 使用 cloneUserDataDirFrom 加上每个工人 userDataDir 向每个工人提供自己编制的简介:
export const test = createWalletTest({
wallets: [{ type: 'metamask' }],
userDataDir: ({ workerIndex }) => `.cache/wallet-w${workerIndex}`,
cloneUserDataDirFrom: '.cache/wallet-setup',
})
设定 workers: undefined (或更高)在你的项目中验证了平行运行——克隆剖面图之间的相互作用,MetaMask的锁定状态恢复,而Playwright的侧面板探测仍然被硬化.
特征
- 简单扩展设置 - 以单一命令下载钱包扩展名
- 多钱包支持 - 测试同时使用多个钱包扩展
- 类型脚本支持 - 全面安全和自动完成
- VS 代码整合 - 与 VS 代码的 playwright 测试
所需资源
- 节点.js 24+
- @playwright/test ^1.55.0 (英语)
许可证
麻省理工学院