End to end Testing for dApp using Synpress

End-to-end testing is an essential part of software development. It is the process of testing an application from start to finish to ensure that it works as intended. Synpress is a library built on top of Cypress that simplifies the process of end-to-end testing in blockchain applications. In this article, we will explore how to use Synpress to test the login functionality of a decentralized application (dApp) that uses Metamask.

Step 1: Set Up Your Environment Before we can begin testing with Synpress, we need to set up our environment. To get started, you will need to install Node.js, Metamask, and Synpress.

1. Install Node.js: Synpress is built on top of Cypress, which requires Node.js to be installed on your machine. If you don't already have Node.js installed, you can download it from the official website: https://nodejs.org/en/download/
2. Install Metamask: Metamask is a browser extension that allows users to connect to Ethereum dApps. You'll need to install Metamask in the browser that you'll be testing your dApp on. You can download Metamask from the Chrome Web Store or the Firefox Add-ons Marketplace.
3. Install Synpress: Synpress is a plugin for Cypress that adds support for interacting with Metamask. To install Synpress, clone this repository:

git clone https://github.com/cuongpo/synpress_learning

4. Install dependencies

cd synress_learning
yarn

5. Change env file

NETWORK_NAME=mainnet
PRIVATE_KEY="{YOUR_PRIVATE_KEY}"
DEBUG=synpress:*

Step 2: Write Your Test Scenario Once you have set up your environment, the next step is to write your test scenario. In this example, we will be testing the login functionality of a dApp that uses Metamask. Go to tests/e22/specs - create new file e.g loginToMetamask.js:

1. First, we start with a describe block that describes the test scenario we're testing: "Login with Metamask".

describe('Metamask Extension tests', () => {

2. Define the test case "connect to DApp with Metamask extension example"

it('connect to DApp with Metamask extension example', () => {

3. 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, })

4. Visit the root URL of the DApp

cy.visit('/');

5. Click the "Connect" button on the DApp

cy.get('#connectButton').click();

6. Accept the Metamask access request by clicking the "Connect" button in the Metamask popup

cy.acceptMetamaskAccess().should('be.true');

7. Assert that the "Connect" button on the DApp shows the text "Connected"

cy.get('#connectButton').should('have.text', 'Connected');

Full code:

// 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'); });
})

Step 3: Run Your Test Once you have written your test scenario, the next step is to run your test. You can run your test using the Cypress Test Runner. To open the Test Runner, open your terminal and enter the following command:

yarn test

This will open the Test Runner, which allows you to run your test and view its results. In the Test Runner, you can select the test file that you want to run, and then click the "Run" button to execute the test.

Step 4: Review Your Test Results Once your test has finished running, the Test Runner will display the results. The results will show you which tests passed and which tests failed. You can also view detailed information about each test, including the steps that Synpress took and any errors that occurred.

In conclusion, Synpress is a powerful library that can help you automate your end-to-end testing process in blockchain applications. By following these steps, you can get started with Synpress and start testing the login functionality of your dApp with Metamask.