<aside> ⚠️

Synpress has support for macOS and Linux, but it doesn’t support Windows yet. WSL can be used as a workaround.

</aside>

<aside> ☑️

Dotenvx is required to load environment variables in the tests.

</aside>

🎭 Synpress with Playwright

1. Install Playwright: pnpm create playwright

2. Install Synpress: pnpm add @synthetixio/synpress --save-dev

3. Check playwright.config.ts

   • Test default folder is './tests’ for Playwright but './test’ for Synpress. The latter should be used in order to correctly load the wallet setup.
   • Uncomment baseURL line (default is localhost).

4. Create wallet-setup folder within test folder

5. Create basic.setup.ts within wallet-setup folder:

   import { defineWalletSetup } from '@synthetixio/synpress'
   import { MetaMask } from '@synthetixio/synpress/playwright'
   import '@dotenvx/dotenvx/config';
   
   const SEED_PHRASE = process.env.SEED_PHRASE || "";
   const PASSWORD = process.env.WALLET_PASSWORD || "";
   
   export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
       const metamask = new MetaMask(context, walletPage, PASSWORD)
   
       await metamask.importWallet(SEED_PHRASE)
   })
   

6. Create spec files within test folder: example.spec.ts

   import { testWithSynpress } from '@synthetixio/synpress'
   import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
   import basicSetup from './wallet-setup/basic.setup'
   
   // Set up the test environment with Synpress and MetaMask fixtures, using the basic setup configuration
   const test = testWithSynpress(metaMaskFixtures(basicSetup))
   
   const { expect } = test
   
   test('should connect MetaMask wallet', async ({ context, page, metamaskPage, extensionId }) => {
     // Create a new MetaMask instance with the provided context, page, password, and extension ID
     const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword, extensionId)
   
     await page.goto('/')
     await page.getByTestId('connect-wallet-button').click()
     await page.getByTestId('wallet-option-metaMask').click()
     await metamask.connectToDapp()
   
     await expect(page.getByRole('heading', { name: 'Welcome to Privacy Pools' })).toBeVisible();
   })
   

7. Build wallet cache: npx synpress. If there are issues with the wallet setup files, --force flag can be used to force the cache to rebuild.

8. Run the test: npx playwright test

Create a custom fixture for code reuse

Playwright custom fixtures are helpful for reusing setups, data, contexts, and states including, in this case, the wallet setup.

For example, create testWithMetaMask.ts fixture:

import { testWithSynpress } from '@synthetixio/synpress';
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright';
import basicSetup from '../wallet-setup/basic.setup';

export const testWithMetaMask = testWithSynpress(metaMaskFixtures(basicSetup)).extend<{
    metamask: MetaMask
}>({
    metamask: async ({ context, metamaskPage, extensionId }, use) => {
        const metamask = new MetaMask(
            context,
            metamaskPage,
            basicSetup.walletPassword,
            extensionId
        )
        await use(metamask)
    },
})

In the tests, import the fixture:

import { testWithMetaMask as test } from './fixtures/testWithMetamask';

test.beforeEach('open start URL and connect wallet', async ({ page, metamask }) => {
  await page.goto('/');
  await page.getByTestId('connect-wallet-button').click();
  await page.getByTestId('wallet-option-metaMask').click();
  await metamask.connectToDapp();
});

Add POM (Page Object Model)

1. Create the page objects: