TestRelic SDK Examples

Example projects demonstrating how to use @testrelic/playwright-analytics for test analytics — capturing navigation timelines, API call tracking, network statistics, failure diagnostics, and interactive HTML reports.

What examples are available?

Each example is a standalone Playwright project demonstrating different testing scenarios and TestRelic capabilities.

Example	Type	Targets	What It Demonstrates
api-testing	API only	JSONPlaceholder API	CRUD operations, API chaining, response assertions, config options, error handling
unified-testing	E2E + API	Wikipedia + JSONPlaceholder	Browser navigation and API calls in the same test
wikipedia	E2E	en.wikipedia.org	Homepage, search, link navigation, media-heavy pages
flipkart	E2E	flipkart.com	Homepage, product search, product pages, category browsing
google	E2E	google.com	Homepage, search queries, results navigation

Prerequisites

• Node.js >= 18
• Playwright >= 1.35.0

How do I run an example?

With AI Prompts

How do I run an example using an AI assistant?

Copy the appropriate prompt and paste it into your AI coding assistant.

---

For API-only examples (api-testing):

AI Prompt — Run API example

Navigate to the api-testing example directory and run it:

1. cd api-testing
2. npm install
3. npx playwright test

Tell me where the analytics report was written and show me a summary.

---

For browser-based examples (wikipedia, flipkart, google, unified-testing):

AI Prompt — Run browser example

Navigate to the wikipedia example directory and run it:

1. cd wikipedia
2. npm install
3. npx playwright install chromium
4. npx playwright test

Tell me where the analytics report was written and show me a summary.

Manual Steps

Each example is a standalone Playwright project. Pick any example and run:

cd api-testing        # or any other example
npm install
npx playwright test

For browser-based examples (E2E), you also need to install Chromium:

cd wikipedia          # or flipkart, google, unified-testing
npm install
npx playwright install chromium
npx playwright test

What testing modes does TestRelic support?

TestRelic supports three distinct testing modes, each optimized for different scenarios:

What is E2E Testing (Browser) mode?

Uses the page fixture for browser navigation tracking — page load timing, DOM content loaded, network idle detection, and network request statistics.

import { test, expect } from '@testrelic/playwright-analytics/fixture';

test('homepage loads', { tag: ['@e2e'] }, async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Learn more: E2E Testing Guide →

What is API Testing mode?

Uses the request fixture for API call tracking — HTTP method, URL, status code, headers, bodies, response times, and assertions. No browser needed.

import { test as base } from '@playwright/test';
import { testRelicApiFixture } from '@testrelic/playwright-analytics/api-fixture';
import { expect } from '@testrelic/playwright-analytics/fixture';

const test = base.extend(testRelicApiFixture);

test('fetch posts', { tag: ['@api'] }, async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts');
  expect(response.status()).toBe(200);
});

Learn more: API Testing Guide →

What is Unified Testing (Browser + API) mode?

Uses both page and request in the same test — the report shows navigation timeline AND API call details together.

import { test, expect } from '@testrelic/playwright-analytics/fixture';

test('API data matches UI', { tag: ['@e2e', '@api'] }, async ({ page, request }) => {
  const apiResponse = await request.get('https://api.example.com/user/1');
  const user = await apiResponse.json();

  await page.goto('https://example.com/profile');
  await expect(page.locator('.user-name')).toHaveText(user.name);
});

Learn more: Unified Testing Guide →

How do I configure TestRelic in an example project?

Add the TestRelic reporter to your playwright.config.ts:

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['@testrelic/playwright-analytics', {
      outputPath: './test-results/analytics-timeline.json',
      includeStackTrace: true,
      includeCodeSnippets: true,
      includeNetworkStats: true,
    }],
  ],
});

Configuration Details

See the full configuration reference for all available options.

What does each example demonstrate in depth?

What does the Wikipedia example test?

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

What does the Flipkart example test?

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

What does the Google example test?

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 does the API Testing example test?

Tests the JSONPlaceholder API, demonstrating:

• ✅ CRUD operations (GET, POST, PUT, DELETE)
• ✅ API call chaining and data dependencies
• ✅ Response validation and assertions
• ✅ Request/response body capture
• ✅ Error handling and status codes

Key Tests:

• Fetch all posts and validate structure
• Create new post with POST request
• Update existing post with PUT request
• Delete post and verify removal

What does the Unified Testing example test?

Combines browser and API testing, demonstrating:

• ✅ API data fetching before UI interaction
• ✅ Cross-validation between API and UI
• ✅ Hybrid test scenarios
• ✅ Unified reporting with both navigation and API timelines

Key Tests:

• Fetch data from API and verify in UI
• Search Wikipedia and validate API data matches
• Combined browser navigation with API validation

What report types does TestRelic generate?

TestRelic generates comprehensive reports for each testing mode:

• Browser Reports — Navigation timelines, network stats, page load metrics
• API Reports — Request/response tracking, timing, headers, bodies
• Unified Reports — Combined browser + API analytics in a single view

How do I create my own example project?

# 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 (for E2E tests)
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.

How do I inspect a generated report?

After running an example, open the generated report:

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

You'll see:

• ✅ Complete navigation timeline (for E2E tests)
• ✅ API call tracking with request/response details (for API tests)
• ✅ Network statistics for each page visit
• ✅ Test results with pass/fail status
• ✅ Timing information for each navigation/API call
• ✅ Failure diagnostics with stack traces and code snippets

Viewing JSON Reports

Use jq or any JSON viewer to inspect the reports. For a better viewing experience, consider using tools like JSON Crack or your IDE's JSON viewer.

What will I learn from these examples?

These examples demonstrate:

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

How do I customize an example for my own use?

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

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

Where do I go next?

• 📖 E2E Testing Guide — Deep dive into browser testing
• 📖 API Testing Guide — Learn API test analytics
• 📖 Unified Testing Guide — Combine both approaches
• 📊 Understanding Reports — Analyze your test data

License

MIT