Skip to main content
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')

​
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

@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")')

@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.