caddis-plugin: Instructions file for GitHub Copilot

Playwright Testing Instructions

Guidelines for writing robust, maintainable end-to-end tests using Playwright applications.

Test Structure

Python Test Template

import pytest
from playwright.sync_api import Page, expect

class TestNetworkDashboard:
    """Tests for the Network Dashboard feature."""
    
    @pytest.fixture(autouse=True)
    def setup(self, page: Page):
        """Navigate to the dashboard before each test."""
        page.goto("/dashboard")
        # Wait for dashboard to load
        expect(page.locator("h1")).to_have_text("Network Dashboard")
    
    def test_displays_key_metrics(self, page: Page):
        """Verify key metrics are displayed on the dashboard."""
        # Arrange - setup is handled by fixture
        
        # Act - page is already loaded
        
        # Assert
        expect(page.get_by_role("heading", name="Total Users")).to_be_visible()
        expect(page.get_by_test_id("active-users-metric")).to_have_text_matching(r"\d+")
        expect(page.get_by_role("img", name="Traffic Chart")).to_be_visible()
    
    def test_filter_by_date_range(self, page: Page):
        """Verify filtering by date range updates the data."""
        # Arrange
        date_picker = page.get_by_label("Date Range")
        
        # Act
        date_picker.click()
        page.get_by_role("option", name="Last 7 Days").click()
        
        # Assert
        expect(page.get_by_text("Showing data for Last 7 Days")).to_be_visible()
        # Verify chart updated
        expect(page.locator(".chart-container")).to_have_attribute(
            "data-range", "7d"
        )

TypeScript Test Template

import { test, expect } from '@playwright/test';

test.describe('Network Dashboard', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/dashboard');
        await expect(page.locator('h1')).toHaveText('Network Dashboard');
    });

    test('displays key metrics', async ({ page }) => {
        // Verify metrics are visible
        await expect(page.getByRole('heading', { name: 'Total Users' }))
            .toBeVisible();
        await expect(page.getByTestId('active-users-metric'))
            .toHaveText(/\d+/);
    });

    test('filter by date range updates data', async ({ page }) => {
        // Open date picker
        await page.getByLabel('Date Range').click();
        
        // Select option
        await page.getByRole('option', { name: 'Last 7 Days' }).click();
        
        // Verify update
        await expect(page.getByText('Showing data for Last 7 Days'))
            .toBeVisible();
    });
});