Basic Browser Navigation

---

This guide demonstrates how to test basic browser navigation flows using Playwright in LoadForge. Perfect for testing user journeys across multiple pages and measuring navigation performance.

Use Cases

• Testing multi-page user flows
• Measuring page load performance across navigation
• Validating navigation elements and links
• Testing complex user journeys

Key Features

• Multi-page Navigation: Navigate through different pages and sections
• Performance Timing: Measure individual page load times
• Element Interaction: Click links and buttons to navigate
• Different Navigation Methods: Text-based, CSS selectors, and XPath

Example Implementation

from locust import task
from locust_plugins.users.playwright import PlaywrightUser, PageWithRetry, pw, event

class NavigationUser(PlaywrightUser):
    @task(3)
    @pw
    async def home_to_products_flow(self, page: PageWithRetry):
        """Navigate from home to products section"""
        async with event(self, "Homepage Load"):
            await page.goto("/")
        
        async with event(self, "Products Page"):
            async with page.expect_navigation():
                await page.click('a:has-text("Products")')
        
        async with event(self, "Product Detail"):
            async with page.expect_navigation():
                await page.click('.product-item:first-child a')

    @task(2)
    @pw
    async def about_contact_flow(self, page: PageWithRetry):
        """Navigate through about and contact pages"""
        async with event(self, "About Page"):
            await page.goto("/about")
        
        async with event(self, "Contact Page"):
            async with page.expect_navigation():
                await page.click('a[href="/contact"]')
        
        # Test different navigation methods
        async with event(self, "Services Page"):
            async with page.expect_navigation():
                await page.click('nav ul li:nth-child(2) a')

    @task(1)
    @pw
    async def complex_navigation_flow(self, page: PageWithRetry):
        """Test complex multi-step navigation"""
        # Start from homepage
        async with event(self, "Homepage"):
            await page.goto("/")
        
        # Navigate to blog
        async with event(self, "Blog Section"):
            async with page.expect_navigation():
                await page.click('//nav//a[contains(., "Blog")]')
        
        # Click on first blog post
        async with event(self, "Blog Post"):
            async with page.expect_navigation():
                await page.click('.blog-post:first-child .read-more')
        
        # Navigate back using browser back
        async with event(self, "Back to Blog"):
            await page.go_back()
        
        # Navigate to homepage using logo
        async with event(self, "Back to Home"):
            async with page.expect_navigation():
                await page.click('.logo')

    @task(1)
    @pw
    async def search_and_navigate(self, page: PageWithRetry):
        """Test search functionality and result navigation"""
        async with event(self, "Search Page"):
            await page.goto("/")
            
        # Perform search
        await page.fill('input[name="search"]', 'test query')
        async with event(self, "Search Results"):
            async with page.expect_navigation():
                await page.click('button:has-text("Search")')
        
        # Click on first result
        if await page.locator('.search-result').count() > 0:
            async with event(self, "Search Result Detail"):
                async with page.expect_navigation():
                    await page.click('.search-result:first-child a')

Navigation Strategies

1. Text-Based Navigation

await page.click('a:has-text("Products")')
await page.click('button:has-text("Learn More")')

2. CSS Selector Navigation

await page.click('#main-nav a[href="/services"]')
await page.click('.product-card:first-child .view-details')

3. XPath Navigation

await page.click('//nav//a[contains(., "Contact")]')
await page.click('//footer//a[@href="/privacy"]')

4. nth-child Navigation

await page.click('nav ul li:nth-child(3) a')
await page.click('.menu-items:nth-child(2)')

Performance Considerations

• Use event() context manager to measure specific navigation steps
• Combine page.expect_navigation() with clicks to ensure proper timing
• Test navigation performance under different network conditions
• Measure total user journey time vs individual page loads

Common Patterns

Breadcrumb Navigation Testing

@task
@pw
async def breadcrumb_navigation(self, page: PageWithRetry):
    await page.goto("/products/category/item")
    
    # Navigate using breadcrumbs
    async with event(self, "Breadcrumb to Category"):
        async with page.expect_navigation():
            await page.click('.breadcrumb a:has-text("Category")')
    
    async with event(self, "Breadcrumb to Products"):
        async with page.expect_navigation():
            await page.click('.breadcrumb a:has-text("Products")')

Menu Navigation Testing

@task
@pw
async def menu_navigation(self, page: PageWithRetry):
    await page.goto("/")
    
    # Test dropdown menu navigation
    await page.hover('.nav-dropdown')
    async with event(self, "Dropdown Item"):
        async with page.expect_navigation():
            await page.click('.dropdown-menu a:first-child')

Testing Tips

1. Wait for Navigation: Always use page.expect_navigation() for reliable navigation timing
2. Element Visibility: Check if navigation elements are visible before clicking
3. Multiple Strategies: Test different ways users might navigate (links, buttons, menus)
4. Back/Forward: Include browser back/forward button testing in user flows
5. Error Handling: Test navigation to non-existent pages and error scenarios

This script provides comprehensive browser navigation testing that measures performance while validating different navigation patterns your users might follow.