TestRelic SDK Examples

Example projects demonstrating how to use the TestRelic SDK reporters for test analytics — capturing navigation timelines, API call tracking, network statistics, device logs, failure diagnostics, and interactive HTML reports.

Playwright Browser Examples

Each example below is a standalone Playwright project demonstrating different browser testing scenarios with @testrelic/playwright-analytics.

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?

For AI agents

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.

For Human

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 Playwright configuration reference or the Appium 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

---

Appium Mobile Examples

For @testrelic/appium-analytics, the WDIO configuration files in the package itself serve as working examples for Android and iOS:

Example	Platform	What It Demonstrates
wdio.android.conf.ts	Android (UiAutomator2)	Full Android emulator setup with device logs, network capture, commands, screenshots, and video
wdio.ios.conf.ts	iOS (XCUITest)	iOS simulator setup with device logs, console capture, and screenshot-on-failure

See the @testrelic/appium-analytics package reference for complete Android and iOS WDIO configuration examples.

---

License

MIT