Skip to content

Conversation

@jyu115
Copy link
Contributor

@jyu115 jyu115 commented Oct 27, 2025

JIRA Ticket(s) if any

Description

Playwright E2E Test Suite for Web SDK

🎯 Overview

This PR adds a comprehensive, production-ready Playwright test suite for the Iterable Web SDK, focusing on in-app messaging features.

Key Stats:

  • 24 tests across 8 test files
  • 100% pass rate on Chromium, Firefox, and WebKit
  • ~3-5 minute CI execution time per browser

📁 Test File Structure

react-example/e2e/
├── authentication.spec.ts           # SDK authentication (1 test)
├── inapp-e2e.spec.ts                # Real API integration (4 tests)
├── inapp/
│   ├── inapp-retrieval.spec.ts     # Message fetching & filtering (5 tests)
│   ├── inapp-error-handling.spec.ts # Error scenarios (2 tests)
│   ├── inapp-positions.spec.ts     # Display positioning (6 tests)
│   ├── inapp-url-handling.spec.ts  # URL transformations (2 tests)
│   ├── inapp-close-button.spec.ts  # Close button features (3 tests)
│   └── inapp-priority.spec.ts      # Priority sorting (1 test)
├── fixtures/
│   ├── test-fixtures.ts            # Custom fixtures for setup/teardown
│   ├── message-factory.ts          # Message creation utilities
│   ├── message-templates.ts        # HTML templates
│   └── inapp-message-mocks.ts      # Mock message data
├── page-objects/
│   ├── BasePage.ts                 # Base page functionality
│   └── pages/InAppPage.ts          # In-app messaging page
└── utils/
    ├── message-helpers.ts          # Test helpers
    └── test-constants.ts           # Shared constants

🧪 Test Coverage

1. SDK Authentication (1 test)

  • setEmail() method validation
  • Email injection into API requests

2. Message Retrieval & Filtering (5 tests)

  • Empty message handling
  • Read message filtering
  • Priority-based sorting
  • Multiple fetch scenarios
  • Pagination support

3. Error Handling (2 tests)

  • API error responses (500, 404)
  • Malformed JSON handling
  • Graceful degradation

4. Display Positioning (6 tests)

  • Center (Modal)
  • Top, Bottom
  • TopRight, BottomRight
  • Full screen

5. Special URL Handling (2 tests)

  • iterable:// protocol transformation
  • action:// protocol transformation
  • Original URL preservation in data attributes

6. Close Button Features (3 tests)

  • Position variations (top-left, top-right)
  • Required dismissal vs automatic dismissal
  • Custom close button behavior

7. Priority Sorting (1 test)

  • Multiple priority levels
  • Correct display order

8. Real API Integration (4 tests)

  • Live Iterable API calls
  • Message display in iframe
  • Pause/resume functionality
  • Multiple fetch attempts

🏗️ Architecture Highlights

Page Object Model (POM)

Clean separation of test logic and page interactions:

// Tests are readable and maintainable
await inAppPage.performFetchMessagesAutoDisplayFlow();
await inAppPage.performDisplayAndCloseMessageFlow(message);

Custom Fixtures

Automatic setup/teardown for common scenarios:

test('my test', async ({ authenticatedInAppPage }) => {
  // Already authenticated, auto-navigated to in-app page
  // Auto-cleanup after test
});

Message Factory Pattern

Consistent, reusable message creation:

const message = MessageFactory.createWithPosition('Center');
await MessageHelpers.mockMessagesAPI(page, [message]);

DRY Principles

  • Centralized constants (test-constants.ts)
  • Reusable helpers (message-helpers.ts)
  • Type-safe message generation (message-factory.ts)

🎯 What We Test (Philosophy)

SDK Behavior

  • Message filtering logic
  • Priority sorting
  • URL transformations
  • Error handling
  • API request/response

Integration Points

  • Iterable API communication
  • Iframe message rendering
  • Event tracking
  • User authentication

📈 Test Execution Time

Browser Setup Test Execution Total
Chromium ~1 min ~2 min ~3 min
Firefox ~1 min ~2 min ~3 min
WebKit ~1 min ~2-3 min ~4 min

Total CI Time: ~4-5 minutes (parallel execution)

@jyu115 jyu115 requested a review from mprew97 as a code owner October 27, 2025 14:19
@codecov-commenter
Copy link

codecov-commenter commented Oct 27, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.49%. Comparing base (da682b8) to head (919d02a).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #537   +/-   ##
=======================================
  Coverage   74.49%   74.49%           
=======================================
  Files          57       57           
  Lines        2741     2741           
  Branches      819      820    +1     
=======================================
  Hits         2042     2042           
- Misses        658      698   +40     
+ Partials       41        1   -40     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jyu115 jyu115 requested a review from pauljung14 October 27, 2025 18:33
@jyu115 jyu115 enabled auto-merge (squash) October 28, 2025 14:32
Copy link
Contributor

@mprew97 mprew97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, left a minor question/suggestion.

import { test, expect } from '@playwright/test';
import { UUATestingPage } from './page-objects/pages/UUATestingPage';

test.describe('UUA Testing Endpoints', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason for the deletion of this file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a first test written to help CI configure. will do follow up phases to increase test coverage for embedded messaging and UUA like what's done here for inapp

@@ -1,7548 +0,0 @@
Arguments:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should add these files to .gitignore.

@jyu115 jyu115 merged commit ab2e745 into main Oct 28, 2025
6 checks passed
@jyu115 jyu115 deleted the MOB-12019-smoke-test-suite branch October 28, 2025 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants