Welcome to the ultimate guide on utilizing Synpress, an end-to-end (E2E) testing framework specifically designed for decentralized applications (dApps). Powered by the capabilities of Cypress and Playwright, Synpress brings enhanced features for testing dApps, including seamless integration with MetaMask. Let’s dive into the steps for leveraging this powerful tool to ensure your dApps function reliably and efficiently.

Table of Content

• Community
• Install
• Supported Frameworks
• Supported Wallets
• Usage Examples
• Features
• Example Setup for ESLint and TSConfig
• Important Notes
• Using with Docker
• CI Tips & Tricks
• Usage Commands
• Known Problems with MetaMask
• Environmental Variables
• Release Process
• More Resources

Install

To get started with Synpress, install it using your package manager of choice:

bash
# with pnpm
pnpm add --save-dev @synthetixio/synpress

# with npm
npm install --save-dev @synthetixio/synpress

# with yarn
yarn add -D @synthetixio/synpress

Supported Frameworks

Synpress supports multiple frameworks, including:

• Synpress
• Playwright (as a plugin)
• Cypress (as a plugin)

Supported Wallets

The only supported wallet is MetaMask.

Usage Examples

For practical examples, check out the Synpress examples.

Features

Synpress provides a variety of features, such as:

• Full support for MetaMask
• Headless mode for local development
• Integration with Docker for easier CI
• Full video recording of tests
• Improved error handling and debugging options

Example Setup for ESLint and TSConfig

Setting up ESLint and TSConfig can enhance your development experience. Follow these steps:

1. Create .eslintrc.js inside your tests folder:

javascript
const path = require('path');
const synpressPath = path.join(process.cwd(), 'node_modules/@synthetixio/synpress');
module.exports = {
  extends: `${synpressPath}/.eslintrc.js`,
};

2. Create support.js file:

javascript
import '@synthetixio/synpress/support';

3. Create tsconfig.json file:

json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./node_modules",
    "types": [
      "cypress",
      "@synthetixio/synpress/support",
      "cypress-wait-until",
      "@testing-library/cypress"
    ],
    "outDir": "./output"
  }
}

4. You’re done! Customize further using config flags as needed.

Important Notes

There are some important aspects to keep in mind while using Synpress:

• Ensure the chromeWebSecurity: false flag is not set for proper MetaMask communication.
• Utilize the headless mode only for local development due to experimental status.
• For CI, using Docker containers is advisable to manage graphical components efficiently.

Using with Docker

Docker can streamline your CI workflow. Here are the steps to run Synpress tests with Docker:

1. Clone the repository:

bash
git clone git@github.com:Synthetixio/synpress.git

2. Change directory:

bash
cd synpress

3. Run the tests using Docker:

bash
docker-compose up --build --exit-code-from synpress

CI Tips & Tricks

For optimizing your CI processes, explore various GitHub Actions workflows available in the repository.

Usage Commands

Run the tests or open the Cypress UI using the commands:

bash
# To run tests
synpress run

# To open Cypress UI
synpress open

Known Problems with MetaMask

If you find that MetaMask is stuck on the loading screen, check the browser’s console for any errors to diagnose the issue.

Environmental Variables

Several environmental variables can be configured for testing, including:

• SECRET_WORDS: Wallet recovery phrase
• PRIVATE_KEY: Wallet private key
• NETWORK_NAME: Name of the network (e.g., Optimism)
• ETHERSCAN_KEY: Etherscan API key

Release Process

To manage releases, simply create a Pull Request from the dev branch to the master branch and merge it. A new beta version will automatically be released.

More Resources

For additional guidance, refer to these resources:

• End-to-end testing using Synpress
• How to Set Up Synpress for Web3 dApp Test Automation
• Extending Synpress with Additional MetaMask Commands

Troubleshooting

If you encounter any issues while using Synpress, here are a few troubleshooting ideas to consider:

• Check your MetaMask connectivity settings.
• Ensure that all required environmental variables are correctly set.
• Refer to the console logs for detailed error messages.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.