Thử nghiệm đầu cuối là một phần thiết yếu của phát triển phần mềm. Đó là quá trình kiểm tra một ứng dụng từ đầu đến cuối để đảm bảo rằng nó hoạt động như dự định. Synpress là một thư viện được xây dựng dựa trên Cypress giúp đơn giản hóa quá trình thử nghiệm từ đầu đến cuối trong các ứng dụng chuỗi khối. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Synpress để kiểm tra chức năng đăng nhập của một ứng dụng phi tập trung (dApp) sử dụng Metamask.
Bước 1: Thiết lập môi trường của bạn Trước khi có thể bắt đầu thử nghiệm với Synpress, chúng ta cần thiết lập môi trường của mình. Để bắt đầu, bạn cần cài đặt Node.js, Metamask và Synpress.
- Cài đặt Node.js: Synpress được xây dựng dựa trên Cypress, yêu cầu cài đặt Node.js trên máy của bạn. Nếu bạn chưa cài đặt Node.js, bạn có thể tải xuống từ trang web chính thức: https://nodejs.org/en/download/
- Cài đặt Metamask: Metamask là một tiện ích mở rộng của trình duyệt cho phép người dùng kết nối với Ethereum dApps. Bạn sẽ cần cài đặt Metamask trong trình duyệt mà bạn sẽ thử nghiệm dApp của mình trên đó. Bạn có thể tải xuống Metamask từ Cửa hàng Chrome trực tuyến hoặc Thị trường tiện ích bổ sung của Firefox.
- Cài đặt Synpress: Synpress là một plugin dành cho Cypress bổ sung hỗ trợ tương tác với Metamask. Để cài đặt Synpress, hãy sao chép kho lưu trữ này:
1 2 | git clone https://github.com/cuongpo/synpress_learning |
- Cài đặt phụ thuộc
1 2 3 | cd synress_learning yarn |
- Thay đổi tập tin env
1 2 3 4 | NETWORK_NAME=mainnet PRIVATE_KEY="{YOUR_PRIVATE_KEY}" DEBUG=synpress:* |
Bước 2: Viết kịch bản thử nghiệm Khi bạn đã thiết lập môi trường của mình, bước tiếp theo là viết kịch bản thử nghiệm. Trong ví dụ này, chúng tôi sẽ kiểm tra chức năng đăng nhập của dApp sử dụng Metamask. Chuyển đến tests/e22/specs – tạo tệp mới, ví dụ: loginToMetamask.js:
- Trước tiên, chúng tôi bắt đầu với một khối
describemô tả kịch bản thử nghiệm mà chúng tôi đang thử nghiệm: “Đăng nhập bằng Metamask”.
1 2 | describe('Metamask Extension tests', () => { |
- Xác định trường hợp thử nghiệm “kết nối với DApp với ví dụ tiện ích mở rộng Metamask”
1 2 | it('connect to DApp with Metamask extension example', () => { |
- Thêm mạng mới vào Metamask bằng lệnh
cy.addMetamaskNetwork()
1 2 3 4 5 6 7 8 9 | cy.addMetamaskNetwork({ networkName: 'Klaytn Baobab', rpcUrl: 'https://api.baobab.klaytn.net:8651', chainId: '1001', symbol: 'KLAY', blockExplorer: 'https://baobab.scope.klaytn.com/', isTestnet: true, }) |
- Truy cập URL gốc của DApp
1 2 | cy.visit('/'); |
- Nhấp vào nút “Kết nối” trên DApp
1 2 | cy.get('#connectButton').click(); |
- Chấp nhận yêu cầu truy cập Metamask bằng cách nhấp vào nút “Kết nối” trong cửa sổ bật lên Metamask
1 2 | cy.acceptMetamaskAccess().should('be.true'); |
- Xác nhận rằng nút “Kết nối” trên DApp hiển thị dòng chữ “Đã kết nối”
1 2 | cy.get('#connectButton').should('have.text', 'Connected'); |
Mã đầy đủ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // Define the test suite "Metamask Extension tests" describe('Metamask Extension tests', () => { // Define the test case "connect to DApp with Metamask extension example" it('connect to DApp with Metamask extension example', () => { // Add a new network to Metamask using the `cy.addMetamaskNetwork()` command cy.addMetamaskNetwork({ networkName: 'Klaytn Baobab', rpcUrl: 'https://api.baobab.klaytn.net:8651', chainId: '1001', symbol: 'KLAY', blockExplorer: 'https://baobab.scope.klaytn.com/', isTestnet: true, }) // Visit the root URL of the DApp cy.visit('/'); // Click the "Connect" button on the DApp cy.get('#connectButton').click(); // Accept the Metamask access request by clicking the "Connect" button in the Metamask popup cy.acceptMetamaskAccess().should('be.true'); // Assert that the "Connect" button on the DApp shows the text "Connected" cy.get('#connectButton').should('have.text', 'Connected'); }); // Define the test case "create transaction example" it('create transaction example', () => { // Click the "Send" button on the DApp cy.get('#sendButton').click(); // Confirm the Metamask transaction by clicking the "Confirm" button in the Metamask popup cy.confirmMetamaskTransaction().should('be.true'); }); // Define the test case "confirm signature example" it('confirm signature example', () => { // Click the "Sign" button on the DApp cy.get('#ethSign').click(); // Confirm the Metamask signature request by clicking the "Sign" button in the Metamask popup cy.confirmMetamaskSignatureRequest().should('be.true'); }); }) |
Bước 3: Chạy thử nghiệm của bạn Khi bạn đã viết kịch bản thử nghiệm của mình, bước tiếp theo là chạy thử nghiệm của bạn. Bạn có thể chạy thử nghiệm của mình bằng Cypress Test Runner. Để mở Trình chạy thử, hãy mở thiết bị đầu cuối của bạn và nhập lệnh sau:
1 2 | yarn test |
Điều này sẽ mở Test Runner, cho phép bạn chạy thử nghiệm của mình và xem kết quả của nó. Trong Trình chạy thử nghiệm, bạn có thể chọn tệp thử nghiệm mà bạn muốn chạy, sau đó nhấp vào nút “Chạy” để thực hiện thử nghiệm.
Bước 4: Xem lại kết quả kiểm tra của bạn Sau khi kiểm tra của bạn chạy xong, Test Runner sẽ hiển thị kết quả. Kết quả sẽ cho bạn biết bài kiểm tra nào đã vượt qua và bài kiểm tra nào không đạt. Bạn cũng có thể xem thông tin chi tiết về từng bài kiểm tra, bao gồm các bước mà Synpress đã thực hiện và bất kỳ lỗi nào đã xảy ra.
Tóm lại, Synpress là một thư viện mạnh mẽ có thể giúp bạn tự động hóa quy trình thử nghiệm từ đầu đến cuối trong các ứng dụng chuỗi khối. Bằng cách làm theo các bước này, bạn có thể bắt đầu với Synpress và bắt đầu thử nghiệm chức năng đăng nhập của dApp của mình với Metamask.