Playwright E2E Testing - Essential Addons for Elementor

Automated end-to-end testing suite for all Essential Addons for Elementor demo pages

📋 Overview

This project provides comprehensive automated testing for Essential Addons for Elementor demo pages. It uses Playwright to perform visual regression testing and functional validation across all widget demos.

---

🎯 Project Status

📊 Test Coverage

🔗 VIEW LIVE TEST REPORTS →

✅ 81 Demos Automated | 🧪 324 Total Tests | ⏳ 34 Demos Remaining | 📈 70.43% Complete

---

🎯 Purpose

• Automate testing for all Essential Addons demo pages
• Perform visual regression testing using screenshot comparison
• Ensure widget functionality across different layouts
• Maintain quality and consistency of demo pages
• Provide continuous integration support

✨ Features

• Visual Regression Testing: Screenshot-based comparison with 3% pixel difference tolerance
• Parallel Execution: Tests run in parallel for faster execution
• Comprehensive Coverage: 324 test cases across 81 widgets (70.43% of 115 total widgets)
• CI/CD Ready: Configured for continuous integration environments
• Detailed Reporting: HTML reports with screenshots, traces, and videos
• Network Optimization: Blocks unnecessary third-party scripts for faster tests
• Category Completion: 6 categories fully automated (Content, Documentation, Marketing, LearnDash, Form Styler, WooCommerce)

🚀 Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd playwright-e2e-ea

2. Install dependencies:

npm install

3. Install Playwright browsers:

npx playwright install

How To Update Playwright

# Update playwright
npm install -D @playwright/test@latest

# Install new browsers
npx playwright install

# See what version of Playwright you have by running the following command
npx playwright --version

Configuration

The project uses environment variables for configuration. Create a .env file in the root directory:

BASE_URL=https://essential-addons.com

🧪 Running Tests

Run all tests

npx playwright test

Run tests in headed mode

npx playwright test --headed

Run specific test file

npx playwright test tests/creative-elements/interactive-cards.spec.js

View test report

npx playwright show-report

📁 Project Structure

playwright-e2e-ea/
├── tests/                          # Test files organized by category (81 spec files, 324 tests)
│   ├── content-elements/            # Content element tests (25 specs, 111 tests) ✨
│   │   ├── advanced-accordion.spec.js
│   │   ├── advanced-google-map.spec.js
│   │   ├── advanced-menu.spec.js
│   │   ├── advanced-search.spec.js
│   │   ├── advanced-tabs.spec.js
│   │   ├── breadcrumbs.spec.js
│   │   ├── code-snippet.spec.js
│   │   ├── content-toggle.spec.js
│   │   ├── creative-buttons.spec.js
│   │   ├── dual-color-headline.spec.js
│   │   ├── event-calendar.spec.js
│   │   ├── feature-list.spec.js
│   │   ├── flip-box.spec.js
│   │   ├── info-box.spec.js
│   │   ├── logo-carousel.spec.js
│   │   ├── offcanvas-content.spec.js
│   │   ├── protected-content.spec.js
│   │   ├── simple-menu.spec.js
│   │   ├── static-product.spec.js
│   │   ├── sticky-video.spec.js
│   │   ├── team-members-carousel.spec.js
│   │   ├── team-members.spec.js
│   │   ├── testimonial-slider.spec.js
│   │   ├── testimonials.spec.js
│   │   └── tooltip.spec.js
│   ├── creative-elements/          # Creative element tests (15 specs, 71 tests)
│   │   ├── countdown.spec.js
│   │   ├── counter.spec.js
│   │   ├── divider.spec.js
│   │   ├── fancy-chart.spec.js
│   │   ├── fancy-text.spec.js
│   │   ├── filterable-gallery.spec.js
│   │   ├── image-accordion.spec.js
│   │   ├── image-comparison.spec.js
│   │   ├── image-hotspots.spec.js
│   │   ├── image-scroller.spec.js
│   │   ├── interactive-cards.spec.js
│   │   ├── interactive-circle.spec.js
│   │   ├── interactive-promo.spec.js
│   │   ├── one-page-nav.spec.js
│   │   └── progress-bar.spec.js
│   ├── documentation-elements/     # Documentation element tests (3 specs, 5 tests) ✨
│   │   ├── betterdocs-category-box.spec.js
│   │   ├── betterdocs-category-grid.spec.js
│   │   └── betterdocs-search-form.spec.js
│   ├── dynamic-content-elements/  # Dynamic content element tests (3 specs, 10 tests)
│   │   ├── advanced-data-table.spec.js
│   │   ├── content-timeline.spec.js
│   │   └── table.spec.js
│   ├── form-styler-elements/       # Form styler element tests (11 specs, 34 tests) ✨
│   │   ├── caldera-forms.spec.js
│   │   ├── contact-form-7.spec.js
│   │   ├── fluent-forms.spec.js
│   │   ├── formstack.spec.js
│   │   ├── gravity-forms.spec.js
│   │   ├── login-register-form.spec.js
│   │   ├── mailchimp.spec.js
│   │   ├── ninja-forms.spec.js
│   │   ├── typeform.spec.js
│   │   ├── weforms.spec.js
│   │   └── wpforms.spec.js
│   ├── learndash-elements/         # LearnDash element tests (1 spec, 5 tests) ✨
│   │   └── learndash-course-list.spec.js
│   ├── marketing-elements/         # Marketing element tests (4 specs, 22 tests) ✨
│   │   ├── call-to-action.spec.js
│   │   ├── multicolumn-pricing-table.spec.js
│   │   ├── price-menu.spec.js
│   │   └── pricing-table.spec.js
│   ├── social-elements/            # Social element tests (3 specs, 6 tests)
│   │   ├── instagram-feed.spec.js
│   │   ├── twitter-feed-carousel.spec.js
│   │   └── twitter-feed.spec.js
│   ├── woocommerce-elements/       # WooCommerce element tests (16 specs, 60 tests) ✨
│   │   ├── woo-account-dashboard.spec.js
│   │   ├── woo-add-to-cart.spec.js
│   │   ├── woo-cart.spec.js
│   │   ├── woo-checkout.spec.js
│   │   ├── woo-cross-sells.spec.js
│   │   ├── woo-product-carousel.spec.js
│   │   ├── woo-product-compare.spec.js
│   │   ├── woo-product-gallery.spec.js
│   │   ├── woo-product-grid.spec.js
│   │   ├── woo-product-images.spec.js
│   │   ├── woo-product-list.spec.js
│   │   ├── woo-product-price.spec.js
│   │   ├── woo-product-rating.spec.js
│   │   ├── woo-product-slider.spec.js
│   │   ├── woo-thank-you.spec.js
│   │   └── woocommerce-product-collections.spec.js
│   └── example.spec.js             # Example test
├── global-setup.js                 # Global test configuration
├── playwright.config.js            # Playwright configuration
├── package.json                    # Project dependencies
└── README.md                       # This file

✨ = Fully automated category (100% coverage)

⚙️ Configuration Details

Playwright Config

• Test Directory: ./tests
• Parallel Execution: Enabled
• Workers: 4 (in CI and local)
• Timeout: 30 seconds per test
• Retries: 1 (in CI), 0 (local)
• Screenshot Diff Tolerance: 3% max pixel ratio
• Base URL: https://essential-addons.com

Global Setup

The global-setup.js file includes:

• Route blocking for third-party analytics and tracking scripts
• Custom page goto wrapper with domcontentloaded wait
• Lightbox close button handler

📊 Publishing Reports

To publish test reports to the live server:

npm run publish-report

This command uses rsync to deploy the playwright-report directory to the remote server.

🎨 Test Patterns

Basic Test Structure

import { test, expect } from "../../global-setup";

test.describe("Widget Name", () => {
  let slug = "/widget-slug";
  let heading = "Widget Name";

  test.beforeEach(async ({ page }) => {
    await page.goto(slug);
    await expect.soft(page.getByRole("heading", { name: heading, exact: true })).toBeVisible();
  });

  test("Layout 01", async ({ page }) => {
    const section = page.getByTestId("element-id");
    await section.scrollIntoViewIfNeeded();
    await expect(section).toHaveScreenshot();
  });
});

📈 Automation Progress

This section tracks the automation status of all Essential Addons for Elementor demo pages. Checked items have automated tests implemented.

Content Elements (24)

• Advanced Search
• Event Calendar
• Info Box
• Testimonial Slider
• Testimonials
• Toggle
• Simple Menu
• Flip Box
• Team Member Carousel
• Team Member
• Protected Content
• Feature List
• Creative Buttons
• Logo Carousel
• Advanced Accordion
• Tooltip
• Offcanvas
• Breadcrumb
• Static Product
• Dual Color Heading
• Advanced Tabs
• Sticky Video
• Advanced Menu
• Code Snippet

Dynamic Content Elements (13)

• Advanced Data Table
• Advanced Google Map
• Post Grid
• Business Reviews
• Post Block
• Content Ticker
• Data Table
• NFT Gallery
• Post Timeline
• Content Timeline
• Smart Post List
• Dynamic Gallery
• Post Carousel

Marketing Elements (4)

• Pricing Table
• Call to Action
• Price Menu
• Multicolumn Pricing Table

Creative Elements (20)

• Interactive Circle
• Filterable Gallery
• Divider
• Lightbox and Modal
• SVG Draw
• Interactive Cards
• Image Hotspots
• Fancy Text
• Flip Carousel
• Fancy Chart
• Interactive Promo
• Image Scroller
• Counter
• Progress Bar
• Stacked Cards
• One Page Navigation
• Image Comparison
• Countdown
• Image Accordion
• 360 Degree Photo Viewer

Figma Design (1)

• Figma to Elementor Converter

Form Styler Elements (11)

• Typeform
• MailChimp
• weForms
• Contact Form 7
• Caldera Forms
• Formstack
• WPForms
• Login Register Form
• Gravity Forms
• Ninja Forms
• FluentForm

Social Elements (4)

• Twitter Feed Carousel
• Twitter Feed
• Instagram Feed
• Facebook Feed

LearnDash Elements (1)

• LearnDash Course List

Documentation Elements (3)

• BetterDocs Category Grid
• BetterDocs Category Box
• BetterDocs Search Form

WooCommerce Elements (16)

• Woo Thank You
• Woo Cart
• Woo Product Carousel
• Woo Product Gallery
• Woo Checkout
• Woo Product Slider
• Woo Product Collections
• Woo Product Grid
• Woo Product Compare
• Woo Cross Sells
• Woo Account Dashboard
• Woo Product List
• Woo Product Price
• Woo Add To Cart
• Woo Product Rating
• Woo Product Images

Extensions (18)

• Dynamic Tags
• Scroll To Top
• Content Protection
• Post Duplicator
• Table of Contents
• Parallax
• Reading Progress Bar
• Particles
• Advanced Tooltip
• Conditional Display
• Wrapper Link
• Interactive Animations
• Hover Interaction
• Custom JS
• Cross-Domain Copy Paste
• Liquid Glass Effects
• Custom Cursor
• Image Masking
• Vertical Text Orientation

---

Total Progress: 81/115 demos automated (70.43%) | 324 individual test cases

Breakdown by Category:

Category	Demos	Tests	Coverage
✅ Content Elements	24/24	111 tests	100% ✨
✅ Creative Elements	15/20	71 tests	75%
✅ Documentation Elements	3/3	5 tests	100% ✨
✅ Dynamic Content Elements	4/13	10 tests	31%
✅ Form Styler Elements	11/11	34 tests	100% ✨
✅ LearnDash Elements	1/1	5 tests	100% ✨
✅ Marketing Elements	4/4	22 tests	100% ✨
✅ Social Elements	3/4	6 tests	75%
✅ WooCommerce Elements	16/16	60 tests	100% ✨
⏳ Figma Design	0/1	0 tests	0%
⏳ Extensions	0/18	0 tests	0%

🎉 Fully Automated Categories: Content Elements, Documentation Elements, Marketing Elements, LearnDash Elements, Form Styler Elements, WooCommerce Elements

🔗 Links

• Essential Addons for Elementor
• Demo Pages
• Live Test Reports
• Playwright Documentation