Flow Graph

Visualize and understand your application structure.

Flow Graph

The flow graph is a visual map of your application discovered during exploration.

Understanding the Flow Graph

After exploration, you'll see an interactive graph showing:

  • Nodes: Each discovered screen/page
  • Edges: Navigation paths between screens
  • Labels: Screen names and URLs

Reading the Graph

Nodes

Each node represents a unique screen:

  • Blue nodes: Regular screens
  • Green nodes: Successfully tested screens
  • Yellow nodes: Screens with warnings
  • Red nodes: Screens with errors

Click a node to see:

  • Screenshot
  • URL
  • Discovered elements
  • Connected screens

Edges

Lines between nodes show navigation:

  • Solid lines: Direct navigation (links, buttons)
  • Dashed lines: Form submissions
  • Arrows: Direction of navigation

Using the Flow Graph

Finding Untested Areas

Use the graph to identify:

  • Screens without tests (no green highlight)
  • Dead ends (nodes with no outgoing edges)
  • Unreachable screens (disconnected nodes)

Planning Tests

Before creating tests:

  1. Find the screens involved in your flow
  2. Trace the path between them
  3. Note important elements at each step

Verifying Coverage

After creating tests:

  • Green nodes indicate tested screens
  • Aim for coverage of critical paths
  • Focus on user-facing flows first

Navigation Bank

The flow graph includes a "Navigation Bank" - verified navigation elements:

{
  "id": "nav-home",
  "text": "Home",
  "selector": "a[href='/']",
  "navigatesTo": ["/", "/home"]
}

These elements are used to:

  • Generate reliable selectors
  • Build accurate test navigation
  • Handle dynamic content

Refreshing the Graph

Re-run exploration when:

  • You've added new features
  • Navigation has changed
  • The graph seems incomplete

To refresh:

  1. Click Re-explore in the project
  2. Wait for exploration to complete
  3. Review the updated graph

Exporting the Graph

Export the flow graph for documentation:

  1. Click Export in the graph view
  2. Choose format:
    • PNG (image)
    • JSON (data)
    • Mermaid (diagram code)

Interpreting Issues

Disconnected Nodes

If screens appear disconnected:

  • They may require specific actions to reach
  • Authentication may be needed
  • JavaScript navigation may not be detected

Missing Screens

If screens are missing:

  • Increase exploration depth
  • Add authentication credentials
  • Check exclusion patterns

Too Many Nodes

If the graph is overwhelming:

  • Filter by URL pattern
  • Focus on specific sections
  • Use exclusions to limit scope

Tips for Better Graphs

  1. Start authenticated: Explore with login to see more
  2. Adjust depth: Find the right balance for your app
  3. Use exclusions: Skip irrelevant areas
  4. Review regularly: Keep the graph up to date

Next Steps