[Sử dụng Synpress test e2e Dapp - tương tác với Metamask] - P1: Setup Synpress

Why Synpress ?

Khi kiểm thử các ứng dụng DApp - Mình phải tương tác với Metamask rất nhiều - Confirm Transacition, Approve, Login with Metamask,... --> cần một framework hỗ trợ toàn bộ các tương tác với Metamask --> Synpress

Context

Mình đã cài Synpress theo tutorial này: https://medium.com/coinmonks/test-e2e-login-to-dapp-with-metamask-with-synpress-5248dd1f17c1 Tuy nhiên trong quá trình cài lại gặp 1 số lỗi --> quá trình cài không thành công --> Mình có fix lại 1 tí + translate sang tiếng Việt cho các bạn sử dụng theo cho dễ

Start

Step 1: Clone repo: https://github.com/cuongpo/synpress.git

• Open Terminal
• Cd đến thư mục bạn muốn lưu (example: cd desktop)
• Git clone https://github.com/cuongpo/synpress.git

Step 2: Install dependency

• cd synpress
• npm install cypress --save-dev
• npm i @synthetixio/synpress
• npm install env-cmd

Step 3: Config environment

Chỉnh file .env theo cấu hình chain bạn muốn test NETWORK_NAME= RPC_URL= CHAIN_ID= SYMBOL= BLOCK_EXPLORER= IS_TESTNET= PRIVATE_KEY=

Ví dụ BSC testnet thì NETWORK_NAME=BSC Testnet RPC_URL=https://data-seed-prebsc-1-s1.binance.org:8545 CHAIN_ID=97 SYMBOL=BNB BLOCK_EXPLORER=https://explorer.binance.org/smart-testnet IS_TESTNET=true PRIVATE_KEY=486********

Private key thì lên metamask -> account detail --> export nhé

Bạn cùng có thể config thêm 2 tham số (optional) SKIP_METAMASK_INSTALL, SKIP_METAMASK_SETUP để skip qua phần install và setup metamask SKIP_METAMASK_INSTALL = 1 SKIP_METAMASK_SETUP = 1

Step 4: Fix bug run metamask twice

Đến bước này nếu mình chạy npm run test luôn thì sẽ xảy ra lỗi metamask bị chạy 2 lần dẫn đến kết nối không thành công --> Mình sửa lại file metamask.js ở đường dẫn node_modules/@synthetixio/synpress/commands/metamask.js bằng file ./metamask.js mà mình sửa ở thư mục gốc

Step 5: Run

Bật terminal - npm run test :3 Bạn có thể config ở package.json cú pháp. Example - nếu bạn muốn chạy 1 file trong thư mục test thôi thì thêm --spec path/to/test.js

Bonus: find element by Xpath

Có một điều không vui là synpress mặc định không có find element by Xpath như selenium --> mình cần cài thêm như sau:

• npm install -D cypress-xpath
• vào node_modules/@synthetixio/synpress/support/index.js
• thêm require('cypress-xpath');

Vậy là xong phần cài synpress

Phần 2: [Sử dụng Synpress test Dapp - tương tác với Metamask] Viết testcase trên Synpress