End-to-End with Playwright

Here you can find our framework independant E2E tests written with playwright.

Installation

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

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:

// 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;

⚠️ 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