Skip to main content

​
Pages

Pages define what URLs Vision captures and how to capture them.

​
Creating Pages

# Simple page
BrainzLab::Vision.create_page(
  name: "Homepage",
  url: "https://example.com"
)

# With configuration
BrainzLab::Vision.create_page(
  name: "Dashboard",
  url: "https://example.com/dashboard",
  browser: :chromium,
  viewport: { width: 1280, height: 720 },
  wait_for: :network_idle,
  threshold: 0.01  # 1% difference allowed
)

​
Capture Settings

​
Viewports

BrainzLab::Vision.create_page(
  name: "Homepage - Mobile",
  url: "https://example.com",
  viewport: { width: 375, height: 812 },  # iPhone X
  device_scale_factor: 3
)

# Predefined viewports
BrainzLab::Vision.create_page(
  name: "Homepage - Desktop",
  url: "https://example.com",
  viewport: :desktop  # 1280x720
)

​
Wait Strategies

# Wait for network to be idle
BrainzLab::Vision.create_page(
  url: "https://example.com",
  wait_for: :network_idle
)

# Wait for specific element
BrainzLab::Vision.create_page(
  url: "https://example.com",
  wait_for_selector: ".main-content"
)

# Wait for custom time
BrainzLab::Vision.create_page(
  url: "https://example.com",
  wait_time: 2000  # 2 seconds
)

​
Full Page vs Viewport

# Capture full scrollable page
BrainzLab::Vision.create_page(
  url: "https://example.com/long-page",
  full_page: true
)

# Capture only visible viewport
BrainzLab::Vision.create_page(
  url: "https://example.com",
  full_page: false  # default
)

​
Element Handling

​
Hide Dynamic Elements

# Hide elements that change (ads, dates, etc.)
BrainzLab::Vision.create_page(
  url: "https://example.com",
  hide_selectors: [
    ".advertisement",
    ".timestamp",
    ".random-content"
  ]
)

​
Mask Elements

# Mask elements with colored overlay
BrainzLab::Vision.create_page(
  url: "https://example.com",
  mask_selectors: [
    ".user-avatar",
    ".dynamic-chart"
  ],
  mask_color: "#FF00FF"  # Magenta overlay
)

​
Wait for Element

# Wait for content to load
BrainzLab::Vision.create_page(
  url: "https://example.com/dashboard",
  wait_for_selector: ".data-loaded",
  timeout: 10000  # 10 second timeout
)

​
Authentication

​
With Cookies

BrainzLab::Vision.create_page(
  url: "https://example.com/dashboard",
  cookies: [
    { name: "session", value: "abc123", domain: "example.com" }
  ]
)

​
With HTTP Auth

BrainzLab::Vision.create_page(
  url: "https://example.com/admin",
  http_auth: {
    username: "admin",
    password: "secret"
  }
)

​
With Custom Headers

BrainzLab::Vision.create_page(
  url: "https://example.com/api-docs",
  headers: {
    "Authorization" => "Bearer token123"
  }
)

​
JavaScript Execution

# Execute JS before capture
BrainzLab::Vision.create_page(
  url: "https://example.com",
  before_capture: <<~JS
    document.querySelector('.cookie-banner').remove();
    window.scrollTo(0, 500);
  JS
)

​
Page Groups

Organize pages into groups: 
# Create group
BrainzLab::Vision.create_page_group("Marketing Pages", [
  { name: "Homepage", url: "https://example.com" },
  { name: "Pricing", url: "https://example.com/pricing" },
  { name: "About", url: "https://example.com/about" }
])

# Run group
BrainzLab::Vision.run_group("Marketing Pages")