Now with Partition Management

    @synthetixio/synpress

    3.0.5 • Public • Published

    npm version Synpress CI CodeQL Release CI synpress Discord Twitter Follow

    Synpress is e2e testing framework based on Cypress.io and playwright with support for metamask.

    Synpress makes sure to always use latest version of metamask and puts a lot of effort to make sure that dapp tests are stable and trustful.

    It also provides an easy way to use and access metamask straight from your e2e tests with all features of cypress and playwright.

    Usage examples:

    For additional custom commands and their examples, check here.

    To see in which direction Synpress is headed to, take a look at planning board.

    Features

    • added support for metamask 🦊
    • supports headless mode thanks to docker 🐳
      • recommended for local development and CI
      • includes VNC and noVNC
      • integrated video recording 🎥 (full screen)
      • exposes noVNC with ngrok (optional)
    • easy to debug 🐛
      • improved error handling
      • supports cypress and playwright debuggers
      • noVNC allows for interactions through browser 🌐
      • debug remote machines on CI with ngrok
    • blazingly-fast
    • extensible ⚙️ (add own custom commands and plugins)
    • can be used in existing cypress setup
    • supports dotenv
      • loads all env vars from your .env file automatically (from project root folder)
    • ability to use latest metamask or lock it's version to avoid unexpected failures related to metamask updates
    • supports multi-lang of metamask, it doesn't depend on any labels
    • synpress is fully tested
    • waits for XHR requests, navigations and animations automatically
    • ability to fail test run if there are any browser console errors found
    • types support for all additional custom commands
    • the best possible options set up in place to avoid flakiness
    • etherscan API helpers in place which for ex. allows to compare your transaction results with etherscan and check tx status
    • synthetix helpers in place which allows to interact with synthetix protocol programmatically
    • supports codespaces
      • run your tests in docker
      • get your feedback remotely thanks to ngrok
      • use mpeg-4 preview plugin to watch videos from inside codespaces :) ...

    👷 Example setup for eslint and tsconfig

    Project structure:

    project_dir
    └── src
    └── tests
        └── e2e
            └── .eslintrc.js
            └── support.js
            └── tsconfig.json
            └── specs
                └── example-spec.js
            └── pages
                └── example-page.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/@synthetixio/synpress',
    );
    
    module.exports = {
      extends: `${synpressPath}/.eslintrc.js`,
    };
    1. Create support.js inside your tests folder (/project_dir/tests/e2e):
    import '@synthetixio/synpress/support/index';

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

    1. Create tsconfig.json inside your tests folder (/project_dir/tests/e2e):
    {
      "compilerOptions": {
        "allowJs": true,
        "baseUrl": "../../node_modules",
        "types": [
          "cypress",
          "@synthetixio/synpress/support",
          "cypress-wait-until",
          "@testing-library/cypress"
        ],
        "outDir": "./output"
      },
      "include": ["**/*.*"]
    }
    1. You're done! 🎉

    To change specific values in default config, you can use --config flag. For example, to change path for support.js file, you can use synpress run --config "supportFile=__tests__/e2e/supportFile.js"

    If you would like to use custom paths for your tests and configs, you should mirror (full) default synpress config and then modify it for your needs. Then you can direct synpress to use it with --configFile flag.

    For example: synpress run --configFile __tests__/e2e/customConfig.config.js

    Important

    Synpress doesn't seem to communicate with metamask properly if "chromeWebSecurity": false flag is set. More about it here.

    Tests work only in non-headless mode because extensions are not supported in headless mode in playwright and Cypress. As a workaround, use provided docker 🐳 containers. They solve this issue.

    There is a global before() which runs metamask setup before all tests:

    • passes welcome page
    • imports wallet
    • changes network (defaults to goerli) or creates custom network and changes to it (depending on your setup)
    • switches back to Cypress window and starts testing

    It requires environmental variable called SECRET_WORDS to be present in following format => 'word1, word2, etc..' or private key in an environmental variable called PRIVATE_KEY.

    To change default network (goerli), you can use NETWORK_NAME environmental variable, for example: NETWORK_NAME=sepolia.

    Available choices are: mainnet, goerli, sepolia and localhost.

    To create and switch to custom network at metamask setup phase, use these:

    1. NETWORK_NAME => ex: synthetix
    2. RPC_URL => ex: https://synthetix-node.io
    3. CHAIN_ID => ex: 123
    4. SYMBOL (optional) => ex: SNX
    5. BLOCK_EXPLORER (optional) => ex: https://synthetix-explorer.io
    6. IS_TESTNET (optional) => ex: false

    Metamask version is hardcoded and frequently updated under supervision to avoid a case when e2e tests break because of CSS classes changes in new version, so all you need is to keep synpress updated in your project. However, you can still override metamask with METAMASK_VERSION environmental variable, for example: METAMASK_VERSION=10.21.0 or METAMASK_VERSION=latest.

    If you don't want to use environmental variables, you can modify setupMetamask() to following:

    setupMetamask(secretWordsOrPrivateKey, network, password), for example: setupMetamask('word1, word2, etc..', 'mainnet', 'password').

    You can also add and switch to custom network by passing an object instead of string inside setupMetamask(secretWordsOrPrivateKey, network, password) function for network parameter.

    If you want to use Etherscan API helpers, you will have to provide Etherscan API key using ETHERSCAN_KEY environmental variable.

    To fail a test if there are any browser console errors, set FAIL_ON_ERROR to 1 or true.

    Automatic waiting for XHR requests to finish before tests start can be turned on with CYPRESS_RESOURCES_WAIT environmental variable, set it to 1 or true.

    If you want to skip metamask extension installation or metamask setup, you can use SKIP_METAMASK_INSTALL and SKIP_METAMASK_SETUP separately. Both variables accept 1 or true.

    Synpress is blazingly-fast by default! If you want to change that, you can use STABLE_MODE=true (which will introduce delays only between main actions, 300ms by default) / STABLE_MODE=<value> or SLOW_MODE=true (which will introduce delay between every action, 50ms by default) / SLOW_MODE=<value>.

    DEBUG=synpress:* is very useful while debugging your tests. It enables following features:

    You may encounter 403 errors (on shared IPs & CI) related to rate limiting while fetching metamask releases from GitHub REST API. This should never happen at all, but it's good to mention. To prevent it from happening, you can create new private access token on GitHub (without any additional access) and specify GH_USERNAME & GH_PAT environmental variables.

    🐳 Using with Docker

    Dreaming about "headless" mode? Here comes a rescue 🚑!

    Docker is awesome for CI and local development. Give it a try.

    Requirements

    Some neat features

    • based on docker-e2e
    • full screen video recording 🎥 (together with metamask extension)
    • VNC & noVNC support 🖥️ (very easy to debug with browser)
    • ngrok 🔌 integration (exposes noVNC for everyone)
      • remote: https://.ngrok.io/vnc.html?autoconnect=true (check logs for url)

    How to use

    1. git clone git@github.com:Synthetixio/synpress.git
    2. cd synpress
    3. (optional) Fill env vars inside .env file
    4. (with foundry; preferred) docker-compose --profile foundry up --build --exit-code-from synpress or ./start-tests.sh
      • (without foundry) docker-compose up --build --exit-code-from synpress
    5. (with foundry and ngrok) ``docker-compose --profile foundry --profile ngrok up --build --exit-code-from synpress`

    All examples of setup are present in this repository. Just take a look around.

    Warning: M2 is not supported with docker. As a workaround - you can use codespaces, they're fully supported! :)

    CI tips & tricks

    • use docker-e2e
    • synpress is tested and should work on all resolutions, starting from 800x600
    • take a look at this example config

    🧪 Usage

    • synpress run to run tests
    • synpress open to open Cypress UI (may be bugged in some cases because it doesn't clear metamask state before each e2e test, please use synpress run)

    Command line interface (synpress help):

    Usage: synpress run [options]
    
    launch tests
    
    Options:
      -b, --browser <name>               run on specified browser (default: "chrome")
      -c, --config <config>              set configuration values, separate multiple values with a comma
      -cf, --configFile <path>          specify a path to *.js file where configuration values are set
      -e, --env <env=val>                set environment variables, separate multiple values with comma
      -s, --spec <path or glob>          run only provided spec files
      -ne, --noExit                     keep runner open after tests finish
      -pr, --project <path>              run with specific project path
      -q, --quiet                        only test runner output in console
      -r, --reporter <reporter>          specify mocha reporter
      -ro, --reporterOptions <options>  specify mocha reporter options, separate multiple values with comma
      -r, --record                       [dashboard] record video of tests running after setting up your project to record
      -k, --key <key>                    [dashboard] set record key
      -p, --parallel                     [dashboard] run recorded specs in parallel across multiple machines
      -g, --group [name]                 [dashboard] group recorded tests together under a single run
      -t, --tag <name>                   [dashboard] add tags to dashboard for test run
      -h, --help                         display help for command
    
    Usage: synpress open [options]
    
    launch test runner UI
    
    Options:
      -cf, --configFile <path>  specify a path to *.js file where configuration values are set
      -h, --help                display help for command
    

    🚢 Release process

    1. Create PR from dev branch to master branch
    2. Merge it (new -beta version is automatically released)
    3. Run GitHub Action workflow named Release CI with patch|minor|major depending on your needs to promote your build.

    Alternatively, instead of running GitHub Action for release, you can move on with manual release process:

    1. Switch to master branch and pull latest changes
    2. Run yarn release:patch/minor/major command
    3. Keep dev branch up to date with master

    Above actions will lead to:

    • New npm node module release
    • New GitHub packages node module release
    • New GitHub release (tagged) created with changelog from commit messages

    📃 More resources

    Install

    npm i @synthetixio/synpress

    DownloadsWeekly Downloads

    5,130

    Version

    3.0.5

    License

    MIT

    Unpacked Size

    385 kB

    Total Files

    70

    Last publish

    Collaborators

    • joey-synthetix
    • justinjmoses
    • synthetixio-team
    • ajsantander
    • drptbl
    • andytcf
    • klbyte