@@ -15,46 +15,52 @@ This guide provides a streamlined setup process for integrating Cypress with Syn
1515Install Cypress and Synpress in your project:
1616
1717``` bash
18- npm install --save-dev cypress @synthetixio/synpress@latest
18+ npm install --save-dev cypress @synthetixio/synpress
1919```
2020
2121## Setup
2222
23231 . Create a Cypress configuration file (` cypress.config.ts ` ) in your project root:
2424
2525 ``` typescript
26- import { configureSynpressForMetaMask } from " @synthetixio/synpress/cypress" ;
27- import { defineConfig } from " cypress" ;
26+ // Import necessary Cypress and Synpress modules
27+ import { configureSynpressForMetaMask } from ' @synthetixio/synpress/cypress'
28+ import { defineConfig } from ' cypress'
2829
30+ // Define Cypress configuration
2931 export default defineConfig ({
3032 chromeWebSecurity: true ,
3133 e2e: {
32- baseUrl: " http://localhost:9999" ,
33- specPattern: " test/cypress/**/*.cy.{js,jsx,ts,tsx}" ,
34- supportFile: " src/cypress/support/e2e.{js,jsx,ts,tsx}" ,
34+ baseUrl: ' http://localhost:9999' ,
35+ specPattern: ' test/cypress/**/*.cy.{js,jsx,ts,tsx}' ,
36+ supportFile: ' src/cypress/support/e2e.{js,jsx,ts,tsx}' ,
3537 testIsolation: false ,
3638 async setupNodeEvents(on , config ) {
37- return configureSynpressForMetaMask (on , config );
39+ return configureSynpressForMetaMask (on , config )
3840 },
3941 },
40- });
42+ })
4143 ```
4244
43- 2 . Create a support file (` src/cypress/support/e2e.ts ` ) and import Synpress commands :
45+ 2 . Create a support file (` src/cypress/support/e2e.ts ` ):
4446
4547 ``` typescript
46- import { synpressCommandsForMetaMask } from " @synthetixio/synpress/cypress/support" ;
48+ // Import Synpress commands for MetaMask
49+ import { synpressCommandsForMetaMask } from ' @synthetixio/synpress/cypress/support'
4750
48- Cypress .on (" uncaught:exception" , () => {
49- // failing the test
50- return false ;
51- });
51+ // Handle uncaught exceptions
52+ Cypress .on (' uncaught:exception' , () => {
53+ // returning false here prevents Cypress from failing the test
54+ return false
55+ })
5256
53- synpressCommandsForMetaMask ();
57+ // Initialize Synpress commands
58+ synpressCommandsForMetaMask ()
5459
60+ // Visit the base URL before each test
5561 before (() => {
56- cy .visit (" / " );
57- });
62+ cy .visit (' / ' )
63+ })
5864 ```
5965
60663 . Update your ` tsconfig.json ` to include Cypress types:
@@ -72,20 +78,20 @@ npm install --save-dev cypress @synthetixio/synpress@latest
7278
7379## Writing Tests
7480
75- Here's an optimized example of how to write tests using Cypress with Synpress integration :
81+ Here's an example of how to write tests using Cypress with Synpress:
7682
77- 1 . Create a new test file (e.g., ` test/cypress/e2e/metamask.cy.ts ` ):
83+ 1 . Create a test file (e.g., ` test/cypress/e2e/metamask.cy.ts ` ):
7884
7985 ``` typescript
80- describe (' MetaMask' , () => {
81- it (' should connect wallet and display account information ' , () => {
82- // Click the connect button to initiate wallet connection
86+ describe (' MetaMask Integration ' , () => {
87+ it (' should connect wallet and verify account' , () => {
88+ // Click the connect button
8389 cy .get (' #connectButton' ).click ()
8490
85- // Use Synpress command to connect MetaMask to the dApp
91+ // Connect MetaMask to the dApp
8692 cy .connectToDapp ()
8793
88- // Verify that the connected account address is displayed correctly
94+ // Verify the connected account address
8995 cy .get (' #accounts' ).should (
9096 ' have.text' ,
9197 ' 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
@@ -103,24 +109,18 @@ Here's an optimized example of how to write tests using Cypress with Synpress in
103109
104110To run your Cypress tests with Synpress:
105111
106- 1 . Ensure your local development server is running (if testing against a local app).
112+ 1 . Start your local development server (if testing against a local app).
107113
108- 2 . Run the tests using the following command :
114+ 2 . Run the tests:
109115
110116 ``` bash
111117 npx cypress run --browser chrome --headed
112118 ```
113119
114- This will execute your tests using Cypress with Synpress integration in headless mode .
120+ This will execute your tests using Cypress with Synpress integration.
115121
116122## Next Steps
117123
118- - Dive deeper into Synpress capabilities:
119-
120- - Study the [ Synpress API documentation] ( /api-reference/ ) for comprehensive command and utility details.
121- - Explore advanced features like custom network management, gas fee optimization, and event listeners.
122-
123- - Enhance your test suite:
124- - Implement complex scenarios such as token transfers, smart contract interactions, and multi-step dApp workflows.
125- - Simulate various network conditions to ensure robust dApp performance.
126- - Utilize Synpress's built-in commands for MetaMask interactions and blockchain operations.
124+ - Explore the [ API documentation] ( /api-reference/ ) for detailed Synpress functionalities
125+ - Check out example projects in the [ Synpress GitHub repository] ( https://github.com/Synthetixio/synpress/tree/dev/examples )
126+ - Join our [ Discord community] ( https://discord.gg/XhZKSRGtWc ) for support and best practices
0 commit comments