Skip to content

README.md

Latest commit

 

History

History
465 lines (372 loc) · 13.7 KB

README.md

File metadata and controls

465 lines (372 loc) · 13.7 KB
Raw

Playwright E2E Testing - Essential Addons for Elementor

Playwright Node.js License

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

Coverage Automated Total Tests Remaining

🔗 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
  1. Install dependencies:
npm install
  1. 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