diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts index 371e916ea..0ba12035d 100644 --- a/docs/.vitepress/sidebar.ts +++ b/docs/.vitepress/sidebar.ts @@ -13,6 +13,16 @@ export const sidebar: DefaultTheme.Sidebar = { { text: 'Platform Compatibility', link: '/docs/platform-compatibility' }, { text: 'Known Issues', link: '/docs/known-issues' } ] + }, + { + text: 'Guides', + items: [ + { text: 'Wallet Cache', link: '/docs/guides/wallet-cache' }, + { text: 'Debugging Wallet Setups', link: '/docs/guides/wallet-setup-debug' }, + { text: 'Playwright', link: '/docs/guides/playwright' }, + { text: 'Built-in Fixtures', link: '/docs/guides/fixtures' }, + { text: 'CI', link: '/docs/guides/ci' } + ] } ], '/api/': TypedocSidebar diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index 1eeaca158..46eab6288 100644 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -1,9 +1,9 @@ # Getting Started ::: warning -This documentation is for the **alpha** release of Synpress v4. The API is subject to change. +This documentation refers to the **alpha** release of Synpress v4. The API is subject to change. -For Synpress v3 documentation, please refer to [here](https://github.com/Synthetixio/synpress). +For Synpress v3 documentation, please refer [here](https://github.com/Synthetixio/synpress). ::: ## Overview @@ -12,10 +12,10 @@ For Synpress v3 documentation, please refer to [here](https://github.com/Synthet Support for [Cypress](https://www.cypress.io/) is coming soon. ::: -Synpress is an E2E (End-to-End) testing library for Web3 dapps. It can be used with both [Playwright](https://playwright.dev/) ~~and [Cypress](https://www.cypress.io/)~~. +Synpress is an E2E (End-to-End) testing library for Web3 dapps. It can be used with ~~both~~ [Playwright](https://playwright.dev/) ~~and [Cypress](https://www.cypress.io/)~~. Synpress is built with developer experience, stability, and performance in mind: -- **Developer Experience**: Type safety, simple API, comprehensive documentation, support for both Playwright and ~~Cypress~~ and all of its features. +- **Developer Experience**: Type safety, simple API, comprehensive documentation, support for ~~both~~ Playwright ~~and Cypress~~ and all of ~~their~~ its features. - **Stability**: Complete test coverage, bullet-proof wallet integration API. - **Performance**: Optimized for speed, parallelization, and fast feedback loops. @@ -48,3 +48,4 @@ Synpress is now an ESM-only package. Don't use `require()` to import it, and mak For more information on what to do next, check out the following topics: - [**TypeScript**](./typescript) - Learn how to set up TypeScript with Synpress. +- [**Wallet Cache**](./guides/wallet-cache) - Learn what's a wallet cache and how to use it. diff --git a/docs/docs/guides/ci.md b/docs/docs/guides/ci.md new file mode 100644 index 000000000..d10f82a3c --- /dev/null +++ b/docs/docs/guides/ci.md @@ -0,0 +1,17 @@ +# CI + +Running Synpress on CI is very similar to running Playwright on CI. The only difference is that you need an extra step to build the cache before running the tests, like so: + +```yaml +- name: Build cache + run: xvfb-run npx synpress + +- name: Run E2E tests (headful) + run: xvfb-run npx playwright test +``` + +::: warning +The `xvfb-run` is required here in both steps because Synpress and Playwright must run in the headful mode on CI. See the [Known Issues](/docs/known-issues) section for an explanation of why this is the case. +::: + +For a complete example of a CI configuration, see [this file](https://github.com/Synthetixio/synpress/blob/new-dawn/.github/workflows/test.yml#L30), which we use internally to run Synpress tests on GitHub Actions. diff --git a/docs/docs/guides/fixtures.md b/docs/docs/guides/fixtures.md new file mode 100644 index 000000000..c5b05770f --- /dev/null +++ b/docs/docs/guides/fixtures.md @@ -0,0 +1,34 @@ +# Built-in Fixtures + +Synpress has a few built-in Playwright fixtures for you to use in your tests that make it easier to interact with wallets and dapps. Here's the list: + +## `extensionId` + +Returns the extension ID of MetaMask. This is required by the `MetaMask` class to interact with the MetaMask extension. + +## `metamaskPage` + +Returns the `Page` object of the browser tab running the full-screen version of the MetaMask extension. + +## `createAnvilNode` + +This fixture allows you to create a new Anvil node on demand inside a test. It's a wrapper around the [AnvilJS](https://github.com/wevm/anvil.js). See the following usage example: + +```typescript +test('create a new Anvil node', async ({ createAnvilNode }) => { + const { anvil, rpcUrl, chainId } = await createAnvilNode({ + chainId: 1338 + }) +}) +``` + +It's that simple! After the test is finished, the Anvil node is automatically stopped. + +You can specify any of the Anvil's options in the object you pass to the `createAnvilNode` function. + +This function returns an object that contains three properties: +- `anvil` - the Anvil instance, +- `rpcUrl` - the RPC URL of the node, +- `chainId` - the chain ID of the node (useful when you're not passing `chainId` by hand to the `createAnvilNode` function). + +For advanced usages, see our example project [here](https://github.com/Synthetixio/synpress/tree/new-dawn/examples/new-dawn). diff --git a/docs/docs/guides/playwright.md b/docs/docs/guides/playwright.md new file mode 100644 index 000000000..ec4e9881e --- /dev/null +++ b/docs/docs/guides/playwright.md @@ -0,0 +1,93 @@ +# Playwright + +Integrating Synpress into Playwright is quite straightforward. + +Let's digest a simple test step by step: + +::: code-group +```typescript [example.spec.ts] +import { MetaMask, testWithSynpress, unlockForFixture } from '@synthetixio/synpress' +import BasicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(BasicSetup, unlockForFixture) + +const { expect } = test + +test('should connect wallet to the MetaMask Test Dapp', async ({ context, page, extensionId }) => { + const metamask = new MetaMask(context, page, BasicSetup.walletPassword, extensionId) + + await page.goto('/') + + await page.locator('#connectButton').click() + await metamask.connectToDapp() + await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') + + await page.locator('#getAccounts').click() + await expect(page.locator('#getAccountsResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') +}) +``` +::: + +## Import + +First, you need to import the `testWithSynpress` function from `@synthetixio/synpress` and use it to define your `test` function that you'd typically import directly from Playwright: + +```typescript +import { MetaMask, testWithSynpress, unlockForFixture } from '@synthetixio/synpress' +import BasicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(BasicSetup, unlockForFixture) +``` + +The first argument of the `testWithSynpress` function is the wallet setup function you want to use in this test file. + +The second argument is a function that will be used to unlock the wallet before each test. Currently, you have to pass the `unlockForFixture` function from `@synthetixio/synpress` which unlocks the MetaMask wallet, but soon you'll be able to pass here unlock functions from other wallets! + +## Define your test + +Now that you have access to the `test` function that you'd typically import from Playwright, you can use it to define your test: + +```typescript +const { expect } = test + +test('should connect wallet to the MetaMask Test Dapp', async ({ context, page, extensionId }) => { + const metamask = new MetaMask(context, page, BasicSetup.walletPassword, extensionId) + + await page.goto('/') + + await page.locator('#connectButton').click() + await metamask.connectToDapp() + await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') + + await page.locator('#getAccounts').click() + await expect(page.locator('#getAccountsResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') +}) +``` + +You can notice the unusual `extensionId` fixture used here. This fixture is amongst a few others that are provided by Synpress. You can learn more about them in the [Built-in Fixtures](./fixtures) section. + +To access the MetaMask API, you must create an instance of the `MetaMask` class as shown above. To learn more about the constructor and all the methods this class provides, see [its API reference](/api/classes/MetaMask). + +## Run the test + +Now that you have your test defined, you can run it as you would typically do with Playwright: + +```bash +playwright test +``` + +::: warning NOTE +In the current stage of Synpress development, the `playwright test` command will behave differently than you might expect, i.e., it will run in the headed mode by default, similarly to `playwright test --headed`. + +To run your tests in the headless mode, you need to use the `HEADLESS` environmental variable: + +```bash +HEADLESS=test playwrighe test +``` + +This behavior will be changed in the future to resemble Playwright's default behavior. +::: + +::: tip +Synpress now supports **all** features of Playwright, including [Parallelism](https://playwright.dev/docs/test-parallel) and [UI Mode](https://playwright.dev/docs/test-ui-mode)! +::: diff --git a/docs/docs/guides/wallet-cache.md b/docs/docs/guides/wallet-cache.md new file mode 100644 index 000000000..520a368ba --- /dev/null +++ b/docs/docs/guides/wallet-cache.md @@ -0,0 +1,240 @@ +# Wallet Cache + +The wallet cache feature of Synpress is its crown jewel. It allows you to define in a separate file how the wallet should be installed and set up. +Based on this file, Synpress generates a browser cache that is then used as a starting point for the tests. This allows you to skip the wallet installation and setup steps, which can be quite time-consuming. + +## Writing a wallet setup file + +### File name + +Since wallet setup files play a crucial role, they must follow a strict naming convention. The file name must follow this format: `*.setup.{ts,js,mjs}`. + +Here are some examples of valid file names: +- `basic.setup.ts` +- `connected.setup.ts` +- `optimism.setup.ts` +- `multi-user.setup.ts` + +### Import + +Let's start with the import statement. You need to import the `defineWalletSetup` function from `@synthetixio/synpress`: + +```typescript +import { defineWalletSetup } from '@synthetixio/synpress' +``` + +### Prepare seed phrase and password + +Next, you need to define the seed phrase and password that will be used to import the wallet. You can define them as constants, use environment variables, or do whatever suits your needs. + +::: code-group +```typescript [Constants] +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' // [!code focus] +const PASSWORD = 'Password123' // [!code focus] +``` + +```typescript [Environment variables] +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' +import 'dotenv/config' // [!code focus] + +const SEED_PHRASE = process.env.SEED_PHRASE // [!code focus] +const PASSWORD = process.env.WALLET_PASSWORD // [!code focus] +``` +::: + +::: tip NOTE +You can replace `dotenv` with any other alternative to load the environmental variables. +::: + +### Define the wallet setup + +Finally, you need to define the wallet setup steps. This is done by calling the `defineWalletSetup` function. It takes two arguments, the password, and the setup function. + +The setup function is where the magic happens. Contents of this function will be executed in the browser context, which means you can use all browser-related Playwright APIs. + +Here's how you can import a wallet with MetaMask: + +```typescript +import { + MetaMask, // [!code focus] + defineWalletSetup +} from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { // [!code focus] + const metamask = new MetaMask(context, walletPage, PASSWORD) // [!code focus] + + await metamask.importWallet(SEED_PHRASE) // [!code focus] +}) // [!code focus] +``` + +If, on the other hand, you want to use a wallet imported directly from a private key, you still have to import a seed phrase first and then import the wallet from a private key. + +This is due to the fact that MetaMask only allows you to import a wallet from a private key if MetaMask is already initialized with a seed phrase. + +Here's how to do it: + +```typescript +import { + MetaMask, + defineWalletSetup +} from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const metamask = new MetaMask(context, walletPage, PASSWORD) + + await metamask.importWallet(SEED_PHRASE) + await metamask.importWalletFromPrivateKey('0xdeadbeef') // [!code focus] +}) +``` +### Building the cache + +::: warning PREREQUISITE +Before building the cache, you must have relevant Playwright browsers installed on your machine. See [this Playwright guide](https://playwright.dev/docs/browsers) for instructions on how to do it. + +If you forget to install the browsers and try to build the cache first, the cache might be built incorrectly, requiring you to rebuild it using the `--force` flag in case it says the cache already exists. See the [Debugging Wallet Setups](./wallet-setup-debug.md) section for more information. +::: + +Once you've written your wallet setup file, you must build its cache. This is done with our CLI tool `synpress`. Here's how to do it: + +```bash +synpress +``` + +By default, the CLI expects the wallet setup files to be in the `[PROJECT_ROOT]/test/wallet-setup` directory. If you want to use a different one, you can pass it as an argument to the CLI: + +```bash +synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] +``` + +::: tip +Run `synpress --help` to see all available options. +::: + +When you run this command, Synpress will open a browser for each wallet setup file, execute the setup functions, and then save the browser caches. + +::: tip +By default, the browsers will be launched in the headed mode. If you want to run them in the headless mode, you can pass the `--headless` flag to the CLI or set the `HEADLESS` environmental variable to `true`. +::: + +## How it works + +### Basics + +Understanding how the wallet cache works is crucial for writing wallet setup files. + +Let's start with the basics. + +Here's the wallet setup file from the previous section: + +::: code-group +```typescript [basic.setup.ts] +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const metamask = new MetaMask(context, walletPage, PASSWORD) + + await metamask.importWallet(SEED_PHRASE) +}) +``` +::: + +When you run our CLI, it will first analyze the wallet setup file, generate a hash of its contents, and then check if the cache for this hash already exists. If it doesn't, it will open a browser, execute the setup function, and save the cache to the `[PROJECT_ROOT]/.cache-synpress` directory. + +Each cache is saved in a separate directory named after the hash of the wallet setup file. + +::: tip +You should add the `.cache-synpress` directory to your `.gitignore` file. +::: + +::: danger IMPORTANT NOTE +If you intend to use MetaMask to send transactions, sign data, or do anything that requires interactions through the pop-up, you must adjust your wallet setup file by including its extension ID. + +::: details 💡 Click me to see the adjusted wallet setup file +```typescript +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + // This is a workaround for the fact that the MetaMask extension ID changes, and this ID is required to detect the pop-ups. // [!code focus] + // It won't be needed in the near future! 😇 // [!code focus] + const extensionId = await getExtensionId(context, 'MetaMask') // [!code focus] + + const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId) // [!code focus] + + await metamask.importWallet(SEED_PHRASE) +}) +``` +::: + +### Hash generation + +The hash is generated **ONLY** from the contents of the function you pass to the `defineWalletSetup` function. This means you can import other files, define constants, etc., without affecting the hash. + +Based on the wallet setup above, only the following lines will be used to generate the hash: + +```typescript +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' + +const SEED_PHRASE = 'test test test test test test test test test test test junk' +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const metamask = new MetaMask(context, walletPage, PASSWORD) // [!code highlight] + // [!code highlight] + await metamask.importWallet(SEED_PHRASE) // [!code highlight] +}) +``` + +If you change anything in the highlighted code above, the hash will change, and the cache must be rebuilt. + +For example, let's say we get rid of the `SEED_PHRASE` constant and inline it like this: + +```typescript +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' + +const PASSWORD = 'Password123' + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const metamask = new MetaMask(context, walletPage, PASSWORD) + + await metamask.importWallet('test test test test test test test test test test test junk') // [!code focus] +}) +``` + +This simple change will cause the hash to change, which means you'll have to rebuild the cache with the CLI. + +::: tip NOTE +There's one exception to this rule. All `console.log` and `debugger` statements are stripped out before the hash is generated, which means they do **NOT** affect the hash. + +To learn more about this, see the [Debugging Wallet Setup Files](./wallet-setup-debug) section. +::: + +## Things to keep in mind + +Here are a few things that are important to keep in mind when dealing with setup files: + +- You can do whatever you want in the setup function as long as it's not affecting the state of a blockchain in any way. This means you can add wallets, networks, change settings, etc., but you cannot send any transactions. +However, you can still sign data with imported wallets, which is useful for connecting to dapps. With this, you can start tests with a fully configured wallet connected to a dapp. +- You don't have to close the browser or any tabs in the setup function. Synpress will handle everything. +- You can have multiple wallet setup files. Synpress will generate a cache for each of them. However, currently, all caches are built in parallel, so if you have a ton of setup files and a slow computer, it might be impossible to build them. We're working on a solution for this. + +## Using the cache + +Once you've built the cache, you can use it in your tests. Each test can use a different cache. This is useful if you want to test different scenarios. + +Based on the wallet setup file passed to a test, Synpress will generate a hash from it and then check if the cache for this hash exists. If it doesn't, it will immediately throw an error. + +For detailed instructions on using the cache in your tests, see the [Playwright](./playwright) section. diff --git a/docs/docs/guides/wallet-setup-debug.md b/docs/docs/guides/wallet-setup-debug.md new file mode 100644 index 000000000..f748c2a89 --- /dev/null +++ b/docs/docs/guides/wallet-setup-debug.md @@ -0,0 +1,74 @@ +# Debugging Wallet Setups + +By default, Synpress strips out all `console.log` and `debugger` statements from your wallet setup files when generating the cache. +At first glance, it seems impossible to debug your wallet setup files. + +However, we've added a special `--debug` flag to our CLI, which will turn off the stripping of `console.log` and `debugger` statements. + +Let's take the following wallet setup file and let's assume that it doesn't work: + +```typescript +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' +import 'dotenv/config' + +const SEED_PHRASE = process.env.SEED_PHRASE +const PASSWORD = process.env.WALLET_PASSWORD + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const extensionId = await getExtensionId(context, 'MetaMask') + + const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId) + + await metamask.importWallet(SEED_PHRASE) +}) +``` + +You want to debug it because you can't figure out why it's not working. + +To do that, you'd start by checking whether the `SEED_PHRASE` and `PASSWORD` constants are correctly defined by adding two `console.log` statements: + +```typescript +import { MetaMask, defineWalletSetup } from '@synthetixio/synpress' +import 'dotenv/config' + +const SEED_PHRASE = process.env.SEED_PHRASE +const PASSWORD = process.env.WALLET_PASSWORD + +console.log({ SEED_PHRASE, PASSWORD }) // [!code focus] + +export default defineWalletSetup(PASSWORD, async (context, walletPage) => { + const extensionId = await getExtensionId(context, 'MetaMask') + + console.log({ extensionId }) // [!code focus] + + const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId) + + await metamask.importWallet(SEED_PHRASE) +}) +``` + +By default, Synpress will strip out these `console.log` statements, so you won't see anything in the console. + +To disable this behavior, you have to add the `--debug` flag to the CLI command: + +```bash +# With the default path: +synpress --debug + +# With a custom path: +synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] --debug +``` + +If you try to run the command above, it'll say that the cache is already built. That's because the hash hasn't changed since all `console.log` and `debugger` statements were stripped from the file before generating the hash. + +To force rebuild the cache, you'll have to add the `--force` flag: + +```bash +# With the default path: +synpress --debug --force + +# With a custom path: +synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] --debug --force +``` + +Now, you should see the outputs of your `console.log` statements in the console! 🎉 diff --git a/docs/docs/introduction.md b/docs/docs/introduction.md index ea0a4103c..c329539e4 100644 --- a/docs/docs/introduction.md +++ b/docs/docs/introduction.md @@ -3,13 +3,13 @@ ## The Problem at Hand In general, the state of Web3 tooling is excellent. There are numerous options for building frontends, backends, and smart contracts. -However, when it comes to testing, the situation is great, but only when it comes to testing backends and smart contracts. +However, when it comes to testing, the situation is also great, but only when it comes to testing backends and smart contracts. Smart contract testing is in a superb state, thanks to tools like [Hardhat](https://hardhat.org/), [Foundry](https://github.com/foundry-rs/foundry), [Echidna](https://github.com/crytic/echidna), and many more. Backend testing is in an even better state because you can utilize all the tools that are available in the Web2 world. -When it comes to frontend testing, the situation could be better. All Web2 tools used for frontend testing, are not that useful for Web3 dapps, because here we have to deal with things like wallets, and other Web3-specific things. +When it comes to frontend testing, the situation could be better. All Web2 tools used for frontend testing, are not that useful for Web3 dapps, because here we have to deal with stuff like wallets, and other Web3-specific things. That's why, in 2020, we created Synpress, the first ever Web3-native E2E testing library. @@ -34,7 +34,7 @@ Synpress provides a simple yet powerful and fully typed API that is easy to use. Our documentation is comprehensive, and we've made sure it covers everything you need to know about Synpress. -Synpress can be used with ~~two~~ leading E2E testing frameworks out there, i.e., ~~both~~ [Playwright](https://playwright.dev/) ~~and [Cypress](https://www.cypress.io/)~~, with support for all of their features. +Synpress can be used with ~~two~~ leading E2E testing frameworks out there, i.e., ~~both~~ [Playwright](https://playwright.dev/) ~~and [Cypress](https://www.cypress.io/)~~, with support for all of ~~their~~ its features. ## Stability @@ -50,4 +50,4 @@ By speed, we not only mean the time it takes to run the tests but also the time We'd love to show you some fancy graphs, but we have yet to have any since we're still heavily working on the performance aspect of Synpress. -However, check out [this tweet](https://x.com/0xDuckception/status/1741498318860042438) to see the differences we've seen in our own tests when running them with the new Synpress. +However, at this point in time, we can already say that Synpress is the fastest Web3 testing library out there. Check out [this tweet](https://x.com/0xDuckception/status/1741498318860042438) to see the differences we've seen in our own tests when running them with the new Synpress. diff --git a/docs/docs/known-issues.md b/docs/docs/known-issues.md index a947ce380..f871ce8d2 100644 --- a/docs/docs/known-issues.md +++ b/docs/docs/known-issues.md @@ -2,7 +2,7 @@ ## Playwright -The good news is in all of our testing, we haven't encountered any significant issues with Playwright! However, we're aware of the following problems: +The good news is we haven't encountered any significant issues with Playwright in all of our testing! However, we're aware of the following problems: ### Blank MetaMask previews in traces {#my-anchor} @@ -14,4 +14,4 @@ If you require the previews for development purposes, your only option is to com ### MetaMask is not working in headless mode on GitHub Actions CI -Due to a bug in MetaMask, it's impossible to run MetaMask in headless mode on GitHub Actions CI. This bug probably affects other CI providers, but we haven't tested it yet. +Due to a bug in MetaMask, it's impossible to run MetaMask in headless mode on GitHub Actions. We're certain this bug affects other CI providers, however, we have yet to test it. diff --git a/docs/docs/platform-compatibility.md b/docs/docs/platform-compatibility.md index bca2f1b0e..2050ded0c 100644 --- a/docs/docs/platform-compatibility.md +++ b/docs/docs/platform-compatibility.md @@ -4,7 +4,7 @@ While in **alpha**, the compatibility of Synpress is limited, but we're working hard to support more frameworks and platforms as soon as possible. ::: -Synpress, in its current state, is compatible with Playwright (>=1.39.0) only and requires Node 18+. Synpress is compatible with MacOS and Linux. +Synpress, in its current state, is only compatible with Playwright (>=1.39.0) and requires Node 18+. Synpress is compatible with MacOS and Linux. ## Supported CI Providers @@ -12,10 +12,15 @@ Synpress, in its current state, is compatible with Playwright (>=1.39.0) only an We have yet to test any other CI provider than GitHub Actions. However, Synpress should work on all of them. If you encounter any issues, please let us know! ::: +::: tip +See the [CI](./guides/ci) section for more information about how to set up Synpress on CI. +::: + - [GitHub Actions](https://github.com/features/actions) ## Windows Currently, Synpress is not compatible with Windows. In the meantime, we recommend using WSL. - +::: tip NOTE If you're knowledgeable about working with Windows and the Node.js environment, and you'd like to help us make Synpress compatible with Windows, please reach out to us on our Discord. +::: diff --git a/docs/index.md b/docs/index.md index 28841c5f3..bc2696454 100644 --- a/docs/index.md +++ b/docs/index.md @@ -9,10 +9,10 @@ hero: actions: - theme: brand text: Get Started - link: /markdown-examples + link: /docs/getting-started - theme: alt text: Why Synpress? - link: /api-examples + link: /docs/introduction image: src: /synpress-logo.png alt: Synpress @@ -22,12 +22,12 @@ features: title: Setup Browser Once details: Forget about setting up your browser for every test. linkText: Learn more about it - link: /todo + link: /docs/guides/wallet-cache - icon: 🚀 title: Blazingly Fast details: Synpress is written with speed in mind, allowing for super fast serial and parallel testing. linkText: See for yourself - link: /todo + link: /docs/introduction#performance - icon: ⚙️ title: Built-in Anvil Support details: Spin up a local node for each test with one line of code.