Skip to main content

Create Your First Workflow

In this tutorial you'll build a simple two-node workflow in the Playrunner visual editor: an Environment config node feeds variables into a Playwright test run.

Prerequisites: Complete Getting Started first.

Step 1 — Open the Editor​

Navigate to the URL printed by ./start-local.sh. With defaults, that is http://127.0.0.1:3100. Open Projects and select a project, or use New Project to create one. On the Project Dashboard, open a workflow card to edit it, or choose New Workflow.

New workflows use the project's configured starting nodes. If Environment and Playwright nodes are already present, use those nodes in the following steps instead of adding duplicates.

Step 2 — Add an Environment node​

  1. Click the + button to open the node selector.
  2. Choose Environment.
  3. The node appears on the canvas. Click it to open its configuration panel.
  4. Add a variable your tests can use, such as BASE_URL.

Step 3 — Add a Playwright node​

  1. Open the node selector again.
  2. Choose Playwright.
  3. Drag it to the right of the Environment node.

Step 4 — Connect the nodes​

If the starting nodes are already connected, keep their existing connection. Otherwise, click the output port on the right edge of the Environment node and drag a connection line to the input port on the left edge of the Playwright node.

The workflow now reads: "Use these environment variables → run Playwright tests".

Environment and Schedule nodes do not accept inbound workflow connections. If you open the node selector while drawing a connection, nodes without inbound support appear disabled as connection targets.

Step 5 — Configure the Playwright node​

Click the Playwright node to open its panel:

  • Repository — select a GitHub repo (you'll connect GitHub in the next tutorial)
  • Branch — choose a branch, e.g. main
  • Playwright version — pick the version matching your project

Step 6 — Save the workflow​

Click Save workflow in the top toolbar. Your workflow is persisted to PostgreSQL through the Prisma-backed API and will be available next time you open the editor.

Step 7 — Name and describe the workflow​

Return to the project's dashboard through Projects in the sidebar.

  1. Open the workflow card's More options menu (⋯).
  2. Choose Edit workflow.
  3. Update Workflow name and Description (optional). Descriptions can span multiple lines; use them to explain what the workflow checks or when to run it.
  4. Choose Save changes.

The card shows the saved description immediately, and it remains after reloading. Editing these details preserves the workflow's nodes, connections, and execution settings.

Clear the description and save to restore the default card text. Cancel discards unsaved edits. If saving fails, the dialog shows an error and keeps your draft so you can retry.

Next steps​

➡️ Connect GitHub