Examples

TestRelic includes standalone Playwright projects that demonstrate the SDK against real websites. These examples show how TestRelic captures navigation timelines and test analytics in real-world scenarios.

Example Scenarios

TestRelic has been tested and validated against various real-world websites. Here are some common scenarios you can implement in your own projects:

Example	Website	What It Tests
Wikipedia Tests	en.wikipedia.org	Homepage, search, link navigation, media-heavy pages
E-commerce Tests	flipkart.com	Homepage, product search, product pages, category browsing
Search Engine Tests	google.com	Homepage, search queries, results navigation, pagination

Example Projects

TestRelic provides example projects to help you understand how to use the toolkit effectively. These examples demonstrate various features and real-world usage patterns.

Creating Your Own Example

You can create your own Playwright project based on these examples:

# Create a new directory
mkdir my-testrelic-example
cd my-testrelic-example

# Initialize a new npm project
npm init -y

# Install Playwright and TestRelic
npm install -D @playwright/test
npm install -D @testrelic/playwright-analytics

# Install browser
npx playwright install chromium

# Create your tests using TestRelic fixtures
# Run tests
npx playwright test

The analytics report will be generated at test-results/analytics-timeline.json.

Wikipedia Example

Tests the Wikipedia website, demonstrating:

• Homepage navigation and rendering
• Search functionality with result navigation
• Link clicks within articles
• Navigation timeline for multi-page flows
• Network statistics for media-heavy pages

Key Tests:

• Homepage loads and displays main content
• Search for "JavaScript" and navigate to article
• Follow links within articles
• Track navigation through multiple pages

Flipkart Example

Tests an e-commerce site, demonstrating:

• Homepage and category navigation
• Product search and filtering
• Product detail page navigation
• SPA-style route changes
• Handling of dynamic content loading

Key Tests:

• Homepage loads with featured products
• Search for products by keyword
• Navigate to product details
• Track navigation through category pages

Google Example

Tests the Google search engine, demonstrating:

• Simple homepage load
• Search query submission
• Results page navigation
• Pagination through search results
• Minimal navigation tracking

Key Tests:

• Homepage loads with search box
• Submit search query
• Navigate through search results
• Track single-page navigation flow

What You'll Learn

These examples demonstrate:

1. Basic Setup — How to configure TestRelic in a real project
2. Navigation Tracking — Automatic detection of different navigation types
3. Network Statistics — Request and byte transfer metrics per page
4. Test Organization — Structuring tests with proper fixtures
5. Report Analysis — What data TestRelic captures and how to interpret it

Inspecting Reports

After running an example, open the generated report:

cat test-results/analytics-timeline.json | jq .

You'll see:

• Complete navigation timeline
• Network statistics for each page visit
• Test results with pass/fail status
• Timing information for each navigation
• Any failures with diagnostics

Customizing Examples

Feel free to modify the examples to test your own scenarios:

1. Change URLs — Point tests at different websites
2. Add Tests — Create new test cases
3. Adjust Config — Try different TestRelic options
4. Compare Results — Run the same test with different configurations

These examples are provided to help you understand how TestRelic works and get started quickly with your own projects.