diff --git a/README.md b/README.md index 832a9bab3..be37fe60b 100644 --- a/README.md +++ b/README.md @@ -1,191 +1,31 @@ -[![npm version](https://badge.fury.io/js/%40synthetixio%2Fsynpress.svg)](https://badge.fury.io/js/%40synthetixio%2Fsynpress) -![Synpress CI](https://github.com/Synthetixio/synpress/workflows/Synpress%20CI/badge.svg?branch=master) -[![CodeQL](https://github.com/Synthetixio/synpress/actions/workflows/codeql.yml/badge.svg?branch=master)](https://github.com/Synthetixio/synpress/actions/workflows/codeql.yml) -[![Release CI](https://github.com/Synthetixio/synpress/actions/workflows/release.yml/badge.svg?branch=master)](https://github.com/Synthetixio/synpress/actions/workflows/release.yml) -[![synpress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/count/ohpeaz/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/ohpeaz/runs) -[![Discord](https://img.shields.io/discord/1103781993394733136.svg?color=768AD4&label=discord&logo=https%3A%2F%2Fdiscordapp.com%2Fassets%2F8c9701b98ad4372b58f13fd9f65f966e.svg)](https://discord.gg/XhZKSRGtWc) -[![Twitter Follow](https://img.shields.io/twitter/follow/synpress_.svg?label=synpress&style=social)](https://twitter.com/synpress_) - -> **We're Hiring ๐** โ Think you have what it takes? We're looking for Software -> Engineer, -> [find out more](https://mirror.xyz/synpress.eth/FXhd5-7e7wBmYYtfmqkF0h7FhDBRUGuGF6j-D7jPpvM). - -# - -
- -
- Synpress
- is E2E testing framework
based on Cypress
- and Playwright
- with support for MetaMask.
-
- Power users:
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -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. - -๐ฅ Synpress works out-of-the-box with other frameworks! There is no need to use -it directly. Check -[usage examples](https://github.com/Synthetixio/synpress/#usage-examples) for -more details. - -# โจ๏ธ New release - -โ ๏ธ This branch showcases the current stable release of Synpress which will receive **only** critical hotfixes. โ ๏ธ +`@agoric/synpress` is a testing framework designed to test DApps that use the Keplr Wallet. -Active development of the upcoming version of Synpress is happening on [this branch](https://github.com/Synthetixio/synpress/tree/new-dawn). -The new release is a full rewrite of Synpress and will feature major breaking changes, and multitude of new features and improvements across the board such as: -- โญ Full TypeScript support -- โญ Multi-wallet support -- โญ Full parallelism support -- โญ Test runtime speed **faster** than any other Web3 alternative, and **equal** to native Web2 frameworks - -Curious and want to learn more? ๐ค - -[Read this Twitter thread ๐งต](https://twitter.com/0xDuckception/status/1712961542176596054) and do not forget to check out the attached document there! - -# Table of content - -- [](#) -- [](#-1) -- [Table of content](#table-of-content) - - [๐งโ๐คโ๐ง Community](#-community) - - [๐ฅ๏ธ Install](#๏ธ-install) - - [โ๏ธ Supported frameworks](#๏ธ-supported-frameworks) - - [๐ Supported wallets](#-supported-wallets) - - [โ๏ธ Usage examples:](#๏ธ-usage-examples) - - [๐ Features](#-features) - - [๐ท Example setup for eslint and tsconfig](#-example-setup-for-eslint-and-tsconfig) - - [โก Important notes](#-important-notes) - - [๐ณ Using with Docker](#-using-with-docker) - - [Requirements](#requirements) - - [Some neat features](#some-neat-features) - - [How to run e2e tests for Synpress using Docker](#how-to-run-e2e-tests-for-synpress-using-docker) - - [๐โโ๏ธ CI tips \& tricks](#๏ธ-ci-tips--tricks) - - [๐งช Usage \& commands](#-usage--commands) - - [๐ Environmental variables](#-environmental-variables) - - [๐ข Release process](#-release-process) - - [๐ More resources](#-more-resources) - -## ๐งโ๐คโ๐ง Community - -- [Discord](https://discord.gg/XhZKSRGtWc) => for **live support** and direct - chat with devs. -- [Twitter](https://twitter.com/synpress_) => for updates and announcements. +For full commands and their examples, +[check here](https://github.com/agoric-labs/synpress/blob/master/support/index.d.ts). ## ๐ฅ๏ธ Install ```bash # with pnpm -pnpm add --save-dev @synthetixio/synpress +pnpm add --save-dev @agoric/synpress # with npm -npm install --save-dev @synthetixio/synpress +npm install --save-dev @agoric/synpress # with yarn -yarn add -D @synthetixio/synpress +yarn add -D @agoric/synpress ``` -## โ๏ธ Supported frameworks - -- [Synpress](https://github.com/Synthetixio/synpress) -- [Playwright](https://playwright.dev/) (as a plugin) -- [Cypress](https://github.com/cypress-io/cypress) (as a plugin) - ## ๐ Supported wallets -- [MetaMask](https://metamask.io/) - -## โ๏ธ Usage examples: - -- [โญ Synpress examples](https://github.com/drptbl/synpress-examples/) -- [Synpress e2e tests](https://github.com/Synthetixio/synpress/tree/dev/tests/e2e) - ---- +- [Keplr](https://www.keplr.app) +- [MetaMask](https://metamask.io/) (Currently in alpha) -For full Synpress commands and their examples, -[check here](https://github.com/Synthetixio/synpress/blob/dev/docs/synpress-commands.md). - -To see in which direction Synpress is headed to, take a look at -[planning board](https://github.com/orgs/Synthetixio/projects/14). - -## ๐ Features - -- Added support for metamask ๐ฆ -- Supports headless mode ๐ค (`synpress run --headless`) - - Recommended for local development (but - [not for CI yet](https://developer.chrome.com/articles/new-headless/) as - it's new and experimental) -- Integrated with - [Docker ๐ณ](https://github.com/Synthetixio/synpress#-using-with-docker) - - Recommended for - [CI](https://github.com/Synthetixio/synpress#ci-tips--tricks) - - Includes VNC and [noVNC](https://novnc.com/info.html) - - Integrated video recording ๐ฅ (full screen) - - Exposes noVNC with [ngrok](https://ngrok.com/) (optional) -- Easy to debug ๐ - - Improved error handling - - Supports [cypress](https://docs.cypress.io/guides/guides/debugging) and - [playwright](https://playwright.dev/docs/debug) 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](https://github.com/Synthetixio/synpress/issues/346#issuecomment-1060506096) -- 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](https://github.com/Synthetixio/synpress/tree/dev/tests/e2e/specs) -- 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 +## ๐ท Example setup Project structure: @@ -196,11 +36,8 @@ project_dir โโโ 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`): @@ -209,7 +46,7 @@ project_dir const path = require('path'); const synpressPath = path.join( process.cwd(), - '/node_modules/@synthetixio/synpress', + '/node_modules/@agoric/synpress', ); module.exports = { @@ -220,301 +57,72 @@ module.exports = { 2. Create `support.js` inside your tests folder (`/project_dir/tests/e2e`): ```js -import '@synthetixio/synpress/support/index'; +import '@agoric/synpress/support/index'; ``` _^ hint: you can also use this file to extend synpress - add custom commands, and more.._ -3. Create `tsconfig.json` inside your tests folder (`/project_dir/tests/e2e`): - +3. Add a command to your package.json file ```json { - "compilerOptions": { - "allowJs": true, - "baseUrl": "../../node_modules", - "types": [ - "cypress", - "@synthetixio/synpress/support", - "cypress-wait-until", - "@testing-library/cypress" - ], - "outDir": "./output" - }, - "include": ["**/*.*"] + ... + "scripts": { + ... + "test:e2e": "EXTENSION=keplr synpress run" + } } ``` -4. 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](https://github.com/Synthetixio/synpress/blob/dev/synpress.config.js) -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 notes - -Synpress doesn't seem to communicate with metamask properly if -`"chromeWebSecurity": false` flag is set. More about it -[here](https://github.com/Synthetixio/synpress/issues/17). - -Thanks to -[new headless mode in Chrome](https://developer.chrome.com/articles/new-headless/), -tests are now working in headless mode ๐ค (`synpress run --headless`). However, -I recommend to use it only for local development as this feature is new and -experimental and may cause issues on CI (UNIX). So please, stick to non-headless -mode on CI. - -In the past, tests worked only in non-headless mode because extensions were not -supported in headless mode by -[playwright](https://playwright.dev/docs/chrome-extensions) and -[Cypress](https://docs.cypress.io/api/plugins/browser-launch-api.html#Add-browser-extensions). -As a workaround, we've provided Docker ๐ณ containers. They solved this issue and -it's an alternative. - -You have to setup `xvfb` and window manager (like `fluxbox` or `xfce4`) to run -tests without issues on CI (together with `DISPLAY` env var). Take a look at -[CI tips & tricks](https://github.com/Synthetixio/synpress/tree/dev/.github/workflows) -for working examples. - -There is a global -[`before()`](https://github.com/synthetixio/synpress/blob/dev/support/index.js#L27) -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 word3 ..'` (delimited with spaces) 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` => 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()`](https://github.com/synthetixio/synpress/blob/dev/support/index.js#L29) -to following: - -`setupMetamask(secretWordsOrPrivateKey, network, password)`, for example: -`setupMetamask('word1 word2 word3 ..', 'mainnet', 'password')` (delimited with -spaces). - -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=