This guide provides a quick setup process for Playwright with Synpress to automate tests for Web3 dapps. Note that this is a basic configuration, and Synpress offers many more advanced functions and features for comprehensive testing.
Create a basic wallet setup file (e.g., wallet-setup/basic.setup.ts):
Copy
// Import necessary Synpress modulesimport { defineWalletSetup } from '@synthetixio/synpress'import { MetaMask } from '@synthetixio/synpress/playwright'// Define a test seed phrase and passwordconst SEED_PHRASE = 'test test test test test test test test test test test junk'const PASSWORD = 'Tester@1234'// Define the basic wallet setupexport default defineWalletSetup(PASSWORD, async (context, walletPage) => { // Create a new MetaMask instance const metamask = new MetaMask(context, walletPage, PASSWORD) // Import the wallet using the seed phrase await metamask.importWallet(SEED_PHRASE) // Additional setup steps can be added here, such as: // - Adding custom networks // - Importing tokens // - Setting up specific account states})
Create a test file (e.g., tests/example.spec.ts):
Copy
// Import necessary Synpress modules and setupimport { testWithSynpress } from '@synthetixio/synpress'import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'import basicSetup from '../wallet-setup/basic.setup'// Create a test instance with Synpress and MetaMask fixturesconst test = testWithSynpress(metaMaskFixtures(basicSetup))// Extract expect function from testconst { expect } = test// Define a basic test casetest('should connect wallet to the MetaMask Test Dapp', async ({ context, page, metamaskPage, extensionId,}) => { // Create a new MetaMask instance const metamask = new MetaMask( context, metamaskPage, basicSetup.walletPassword, extensionId ) // Navigate to the homepage await page.goto('/') // Click the connect button await page.locator('#connectButton').click() // Connect MetaMask to the dapp await metamask.connectToDapp() // Verify the connected account address await expect(page.locator('#accounts')).toHaveText( '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266' ) // Additional test steps can be added here, such as: // - Sending transactions // - Interacting with smart contracts // - Testing dapp-specific functionality})