Sitelet https://github.com/synpress/docs/commit/d9818726fa5410d699f1e06ef281c461bdfe9fdf
Skip to content

Commit d981872

Browse files
committed
chore: update setup cypress
Signed-off-by: drptbl <jakub.mucha@icloud.com>
1 parent 0ffbf70 commit d981872

1 file changed

Lines changed: 36 additions & 36 deletions

File tree

‎docs/setup-cypress.mdx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,46 +15,52 @@ This guide provides a streamlined setup process for integrating Cypress with Syn
1515
Install 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

2323
1. 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

6066
3. 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

104110
To 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

Comments
 (0)