@agoric/synpress is a testing framework designed to test DApps that use the Keplr Wallet.

For full commands and their examples, check here.

🖥️ Install

# with pnpm
pnpm add --save-dev @agoric/synpress
# with npm
npm install --save-dev @agoric/synpress
# with yarn
yarn add -D @agoric/synpress

👝 Supported wallets

• Keplr
• MetaMask (Currently in alpha)

👷 Example setup

Project structure:

project_dir
└── src
└── tests
    └── e2e
        └── .eslintrc.js
        └── support.js
        └── specs
            └── example-spec.js

1. Create .eslintrc.js inside your tests folder (/project_dir/tests/e2e):

const path = require('path');
const synpressPath = path.join(
  process.cwd(),
  '/node_modules/@agoric/synpress',
);

module.exports = {
  extends: `${synpressPath}/.eslintrc.js`,
};

2. Create support.js inside your tests folder (/project_dir/tests/e2e):

import '@agoric/synpress/support/index';

^ hint: you can also use this file to extend synpress - add custom commands, and more..

3. Add a command to your package.json file

{
  ...
  "scripts": {
    ...
    "test:e2e": "EXTENSION=keplr synpress run"
  }
}

4. (Optional) Create a custom config file. @agoric/synpress aleardy has some configurations set up in this file. To override this and add your custom config, you can create your own config file synpress.config.js in /project_dir/tests/e2e

const baseConfig = require('@agoric/synpress/synpress.config');
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  ...baseConfig,
  e2e: {
    ...baseConfig.e2e,
    baseUrl: 'http://localhost:5173',
  },
});

        use this config by passing the --configFile flag to synpress

{
  ...
  "scripts": {
    ...
    "test:e2e": "EXTENSION=keplr synpress run --configFile=test/e2e/synpress.config.js"
  }
}

5. You're done! 🎉

For an example project, you can take a look at how we've set up tests in this repository

📃 Environmental variables

These is a basic list of environment variables to be used. A more in depth list can be found here

📝 More resources

@agoric/synpress uses Synpress as its base and therefore supports most of its functionality. To learn more about command line options, usage examples, and CI/CD setup, you can use the original README file