NotificationX E2E Test Automation

Full admin + frontend Playwright test suite for NotificationX (Free + Pro)

About The Project

NotificationX is a popular WordPress FOMO (Fear of Missing Out) and social proof notification plugin. It displays real-time sales alerts, review popups, download stats, comments, cookie notices, growth alerts, and more — driving conversions through social proof.

This project provides comprehensive end-to-end automation testing for NotificationX using Playwright. It covers admin panel exploration, notification creation via Add New and Quick Builder wizards, frontend display verification, analytics validation, and full CRUD operations across all notification types.

(back to top)

Built With

• 
• 

(back to top)

Getting Started

Prerequisites

• Node.js version 22 LTS
• npm

Installation

1. Clone the repo

   git clone <repo-url>

2. Install NPM packages

   npm install

3. Create the .env file and provide necessary details

   cp .env.example .env

   Required variables:

   BASE_URL=https://your-site.com
   ADMIN_USER=admin@email.com
   ADMIN_PASS=your-password

4. Install Playwright browsers

   npx playwright install --with-deps

(back to top)

Usage

# Run all tests (headless)
npm test

# Run in headed mode (visible browser)
npm run test:headed

# Run with Playwright UI
npm run test:ui

# Run a specific test file
npx playwright test tests/1-explore-sections.spec.js

# View HTML report
npm run report

For more examples, refer to the Playwright Documentation

(back to top)

Project Structure

notificationx-e2e/
├── .env                                       # Environment variables (BASE_URL, credentials)
├── .env.example                               # Template for .env
├── .github/workflows/playwright.yml           # GitHub Actions: schedule + manual + Slack
├── .gitignore                                 # Standard ignores
├── package.json                               # Dependencies & scripts
├── playwright.config.js                       # Playwright configuration
├── README.md                                  # This file
├── helpers/
│   ├── utils.js                               # Shared utilities (safeGoto, gotoNxPage, etc.)
│   └── slack.js                               # Slack payload builder (used by CI)
├── snapshots/                                 # Reference screenshots
├── tests/
│   ├── auth.setup.js                          # Admin authentication with storage state
│   ├── 1-add-new-notifications.spec.js        # Create all notification types via Add New
│   ├── 2-quick-builder-notifications.spec.js  # Create all types via Quick Builder
│   ├── 3-frontend-check.spec.js               # Frontend display, click, analytics
│   ├── 4-navigation-tests.spec.js             # Admin sidebar, URLs, wizard navigation
│   └── 5-exit-intent.spec.js                  # Exit Intent themes, positions, trigger
└── playwright/
    └── .auth/                                 # Authentication storage states (gitignored)

(back to top)

Test Flow

Tests are ordered 1 through 5 and designed to run sequentially:

1. Add New Notifications (1-add-new-notifications.spec.js)

Creates every notification type through the Add New multi-step wizard:

WooCommerce (Sales), WooCommerce (Reviews), Sales Notification, Cookie Notice, eLearning, Notification Bar, Announcement, Reviews, Contact Form, Download Stats, Comments, Discount Alert, Donations, Flashing Tab, Growth Alert, Custom Notification, Video, Email Subscription, Page Analytics, Exit Intent Popup.

Behaviour settings: Display The Last → 2000, Display From The Last → 2000.

After all are created, all notifications are deleted.

2. Quick Builder Notifications (2-quick-builder-notifications.spec.js)

Same notification types created through the Quick Builder flow, with the same behaviour settings. All deleted after creation.

3. Frontend Check (3-frontend-check.spec.js)

Creates displayable notifications, generates analytics data, and verifies display:

• Comment Notification
• Cookie Notice
• Notification Bar / Announcement
• Custom Notification
• Growth Alert with Tea product (Low Stock Threshold = 99)

Then:

1. Visits the homepage and shop multiple times
2. Clicks on visible notifications
3. Returns to admin → Analytics and checks stats
4. Deletes all notifications

4. Navigation Tests (4-navigation-tests.spec.js)

Admin-focused navigation:

• Sidebar submenus (Dashboard, All NotificationX, Add New, Settings, Analytics, Quick Builder)
• Direct URL access to each NX admin page
• Add New wizard step navigation (forward, previous, tab clicks)
• Dashboard controls (page size, bulk action, search, date filter)
• Settings page tab navigation
• Quick Builder tab navigation
• Cross-navigation between all NX pages

5. Exit Intent Popup (5-exit-intent.spec.js)

Dedicated coverage for the Exit Intent Popup notification type:

• Themes 1–7 — create and publish with each (all 7 are usable on the live site since Pro is active)
• Positions — Center, Bottom Left, Bottom Right
  • Each position creates the popup AND verifies on the frontend: triggers mouseout to the top edge, checks the popup appears in the correct quadrant, and confirms a position-related class is present in the DOM
• Custom content — change title, subtitle, and submit button text
• Frontend trigger — mouse leave to the top of the viewport surfaces the popup
• Frontend close — close button dismisses the popup

(back to top)

Error Handling & Resilience

Scenario	How It's Handled
DB Connection Error	safeGoto() detects "Error Establishing a Database Connection", waits 2 minutes, retries once
Email Verification Screen	handleEmailVerification() clicks "The email is correct" if WordPress shows the admin email check
Slow NX Admin Load	Extended timeouts (120s test, 60s navigation, 30s action) with networkidle waits
Missing Notifications	Delete functions gracefully handle empty lists

(back to top)

Notification Types Reference

NotificationX (Free + Pro with WooCommerce) supports these notification types:

Category	Types	Needs External Data?
WooCommerce	Sales, Reviews	Yes (orders/reviews)
Growth Alert	Growth Alert	Yes
Cookie Notice	Cookie Notice, GDPR	No
eLearning	LearnPress, Tutor LMS	Yes (enrollments)
Sales Notification	WooCommerce Sales	Yes (orders)
Notification Bar	Announcement Bar	No
Contact Form	WPForms, Ninja, Fluent, Gravity, Elementor	Yes (submissions)
Download Stats	WordPress.org Downloads	Yes (download data)
Comments	WP Comments	No (uses existing)
Discount Alert	WooCommerce Discounts	Yes
Donations	Give WP, others	Yes
Flashing Tab	Browser Tab Flash	No
Custom Notification	Manual Data Entry	No
Video	Video Embeds	No
Email Subscription	MailChimp, ConvertKit, etc.	Yes
Exit Intent Popup	Custom (3 free themes + 4 PRO themes, 3 positions)	No

(back to top)

Roadmap

• Create all notification types via Add New
• Create all notification types via Quick Builder
• Frontend notification display verification
• Frontend notification click tracking
• Analytics stats verification
• Admin navigation tests
• Exit Intent Popup dedicated coverage (themes, positions, frontend trigger)
• CI/CD pipeline (GitHub Actions + Slack notifications)
• Cross-browser support (Firefox, WebKit)
• Multi-role testing (editor, subscriber views)

(back to top)

Contact

Muammar Shahrear - @Muammar Shahrear - shahrearmuammar@gmail.com

(back to top)

About the Author

Muammar Shahrear is a software tester and researcher specializing in test automation, AI agents, WordPress plugin testing, and SaaS product quality assurance. He completed his B.Sc. and M.Sc. from the Institute of Information Technology (IIT), Jahangirnagar University (JU), Bangladesh, and also holds an M.Sc. from Technische Hochschule Mittelhessen (THM), Germany.

• 
• 

(back to top)

Acknowledgments

• Playwright
• NotificationX
• othneildrew/Best-README-Template

(back to top)