77 lines
2.4 KiB
Markdown
77 lines
2.4 KiB
Markdown
# End-to-End with Playwright
|
|
Here you can find our framework independant E2E tests written with [playwright](https://playwright.dev/).
|
|
|
|
## Installation
|
|
```bash
|
|
cd tests/playwright # check if you are in the correct directory
|
|
|
|
pnpm install # install node dependencies
|
|
npx playwright install # follow the instructions to install browsers
|
|
```
|
|
|
|
## Running the tests
|
|
```bash
|
|
pnpm run test:react # runs all the tests headless for react
|
|
pnpm run test:react:ui # runs tests for react in UI mode, good for debugging
|
|
|
|
pnpm run test:svelte # runs all the tests headless for svelte
|
|
pnpm run test:svelte:ui # runs tests for svelte in UI mode, good for debugging
|
|
```
|
|
|
|
## Creating new tests
|
|
You can find all test implementations in the respective example projects under `/examples/react` and `/examples/svelte`. These example projects are also used for active development, so you can ignore most of the code in them.
|
|
|
|
### Create new example or use an existing one
|
|
You will find all of the flows currently implemented for E2E testing at `/examples/{framework}/src/generic-tests`. Here you can create a new flow you want to write you test on by creating a new file and defining all of the props that will be applied to the components like this:
|
|
```javascript
|
|
// NewFolder/NewTest.ts
|
|
export default {
|
|
flowProps: {
|
|
minZoom: 0.25,
|
|
maxZoom: 4,
|
|
fitView: true,
|
|
nodes: [
|
|
{
|
|
id: '1',
|
|
data: { label: '1' },
|
|
position: { x: 0, y: 0 },
|
|
type: 'input',
|
|
},
|
|
{
|
|
id: '2',
|
|
data: { label: '2' },
|
|
position: { x: -100, y: 100 },
|
|
},
|
|
{
|
|
id: '3',
|
|
data: { label: '3' },
|
|
position: { x: 100, y: 100 },
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
id: 'first-edge',
|
|
source: '1',
|
|
target: '2',
|
|
},
|
|
{
|
|
id: 'second-edge',
|
|
source: '1',
|
|
target: '3',
|
|
},
|
|
],
|
|
},
|
|
backgroundProps: { /*... */},
|
|
panelProps: { /*... */},
|
|
minimapProps: { /*... */},
|
|
controlsProps: { /*... */},
|
|
} satisfies FlowConfig;
|
|
```
|
|
|
|
:warning: The directory and filename you choose will determine the route of the test case. Here it will reachable under `http://localhost:3000/tests/generic/newDirectory/newTest`. (3000 is the port of the react examples, it might differ for other frameworks)
|
|
|
|
### Create new E2E test case
|
|
Now you can start writing you new test case under `/tests/playwright/e2e`
|
|
|
|
|