Skip to content

Commit

Permalink
Merge pull request #569 from 0xsend/dev
Browse files Browse the repository at this point in the history
deploy
  • Loading branch information
0xBigBoss authored Jul 10, 2024
2 parents 93f2638 + 8102d41 commit 42c3da7
Show file tree
Hide file tree
Showing 30 changed files with 948 additions and 815 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deploy-staging.yml
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ concurrency:

jobs:
deploy:
runs-on: ubuntu-latest
runs-on: self-hosted
steps:
- uses: actions/checkout@v4
with:
Expand Down
3 changes: 2 additions & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"yoavbls.pretty-ts-errors",
"dbaeumer.vscode-eslint",
"usernamehw.errorlens",
"naumovs.color-highlight"
"naumovs.color-highlight",
"mkhl.direnv"
]
}
4 changes: 2 additions & 2 deletions apps/distributor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
"@supabase/supabase-js": "2.44.2",
"@wagmi/core": "^2.10.5",
"app": "workspace:*",
"express": "^4.18.2",
"express": "^4.19.2",
"pino": "^8.16.1",
"viem": "^2.13.7"
},
"devDependencies": {
"@types/bun": "latest",
"@types/express": "^4",
"@types/supertest": "^2.0.16",
"debug": "^4.3.4",
"debug": "^4.3.5",
"dotenv-cli": "^7.3.0",
"supertest": "^6.3.3",
"typescript": "^5.5.3"
Expand Down
2 changes: 1 addition & 1 deletion apps/next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"react-native-web": "~0.19.10",
"sharp": "0.32.6",
"vercel": "^33.5.2",
"zod": "^3.22.4"
"zod": "^3.23.8"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.4.19",
Expand Down
65 changes: 65 additions & 0 deletions docs/testing-like-a-playwright-boss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@

# Testing Like a Playwright Boss

This is a guide to testing like a playwright boss. It dives into how to leverage playwrght to test Send app. It also covers how to debug and troubleshoot tests.

## Setup

Ensure you have already followed the [CONTRIBUTING](/CONTRIBUTING.md) guide.

- Install [VSCode](https://code.visualstudio.com/): A code editor that supports running and debugging Playwright tests.
- Install ["ms-playwright.playwright"](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright): A VSCode extension that provides syntax highlighting and code completion for Playwright tests.
- Install [direnv](https://direnv.net/): A tool that loads environment variables from `.envrc` files.
- Install ["mkhl.direnv"](https://marketplace.visualstudio.com/items?itemName=mkhl.direnv): A VSCode extension that load environment variables from `.envrc` files into the VSCode environment.
- Install browsers:
- Using VSCode: Press Shift+Command+P to open the Command Palette in VSCode, type 'Playwright' and select 'Install Playwright Browsers'.
- Using the Playwright CLI: Run `npx playwright install chromium firefox webkit` to install the browsers.
Once those are installed, you will need to allow the `.envrc` file to load environment variables. Any time it changes, it should prompt you to reload the VSCode environment.

For the rest of the guide, we will assume you are using VSCode.

### Running Tests

You'll want to visit the **Testing** tab in the VSCode sidebar. From there, in the **Test Explorer** panel, you can run and debug tests.

There should be icons for running and debugging tests. Typically, I only run one test at a time. There are also a number of settings that are available for Playwright when running from VSCode. You can find them at the bottom of the **Testing** sidebar.

A few of my favorite settings are:

- **Projects**: This is where you can select which projects to run tests for. Typically, I select one, either chromium or firefox.
- **Settings**: This is where you can select which settings to use for the test run such as running the browser in headless mode or not.
- **Tools**:
- **Pick Locator** allows you to select which locator to use for finding elements on the page from the currently running test and open browser.
- **Record New**: Gives you the ability to record a new test
- **Record at Cursor**: Gives you the ability to record a test which will input at the current editor's pane cursor position.

### Debugging Tests

When debugging tests, you can use the **Debug Console** to see the output of the test. You can also use the **Debug Console** to interact with the browser.

This runs Playwright in debug mode which will pause at breakpoints and allow you to interact with the browser. It also removes the global timeout which is set by default to 30 seconds. This is useful for debugging tests as it allows you to run tests for longer periods of time.

You also have access to the console developer tools which can be useful for debugging to see what is happening in the browser.

### Writing Tests

Playwright tests are written in TypeScript. You can find the test files in the [`/packages/playwright/tests`](/packages/playwright) directory. There are a number of examples of tests in there. Send app leverages a number of fixtures to make testing easier. These fixtures are located in the [`/packages/playwright/tests/fixtures`](/packages/playwright/tests/fixtures) directory.

#### Considerations

You want to put yourself in the shoes of a user, not a developer. However, you should isolate the feature you are testing as much as possible. E.g. auth vs onboarding vs sending tokens. They are all different features and should be tested separately. Use fixtures to isolate them and reuse them across tests.

#### Test Recording

Use the **Record New** button or **Record at Cursor** to record a new tests or use the pick locator to select the locator to use for the test. This way you can easily interact with the browser and see what is happening.

## Non-VSCode Setup (Playwright CLI)

Running playwright tests in VSCode is a great way to get started, but you can also leverage the playwright CLI to run tests and debug them. You can use the [**Playwright Inspector**](https://playwright.dev/docs/inspector) to debug tests. To start Playwright in debug mode, you can run the following command:

```shell
cd packages/playwright
npx playwright test --debug
```

This will run the tests in debug mode and pause at breakpoints. There should be a popup which gives you commands during this interactive debugging session.
4 changes: 2 additions & 2 deletions packages/api/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
"@trpc/server": "11.0.0-next-beta.264",
"@wagmi/core": "^2.10.5",
"app": "workspace:*",
"debug": "^4.3.4",
"debug": "^4.3.5",
"p-queue": "^8.0.1",
"superjson": "^1.13.1",
"viem": "^2.13.7",
"zod": "^3.22.4"
"zod": "^3.23.8"
}
}
Loading

0 comments on commit 42c3da7

Please sign in to comment.