Divi5 Layout Compatibility Automation

This is a custom Playwright automation framework designed to loop through all Divi5 grid layouts, predictably reset the WordPress site, cleanly import layouts one-by-one, and check all generated frontend pages for backward compatibility issues.

Understanding the layout of this project will help you modify and scale it.

playwright-tests/
├── .auth/                        # Auto-generated. Caches your WordPress admin login session.
├── pages/                        # Page Object Models (POM) holding specific website logic
│   ├── LayoutDashboard.ts        # Handles grabbing layout names, injecting the UI prompt, and waiting for imports to natively finish.
│   ├── PreviewPage.ts            # Loops through generated pages and looks for Divi5 backward compatibility warnings.
│   └── ResetPage.ts              # Interacts with the WP Reset plugin to cleanly wipe the site before every new test loop.
├── tests/
│   └── divi5-compatibility.spec.ts # The main orchestration file. It runs the loop, catches server 502 crashes, and commands the POMs.
├── utils/
│   └── CustomLogger.ts           # Responsible for printing the final beautiful ASCII summary table to your terminal.
├── global-setup.ts               # Runs only once explicitly at the start to log into WordPress and cache the cookies.
└── playwright.config.ts          # Core config file (sets up the 1-worker limit, base URLs, and maximizes the browser window).

Since this is a standard Node.js project, it is fully portable! You don't need to copy everything, just follow these simple steps.

Copy this entire playwright-tests folder to your new PC. (Tip: You don't need to copy the heavy node_modules or .auth folders as they will be freshly auto-generated).

1. Ensure your new computer has Node.js installed (nodejs.org).
2. Ensure you have your local WordPress environment running (like LocalWP).

Open your terminal inside the playwright-tests folder on your new PC and run:

npm install
npx playwright install

If your WordPress URL or Login differs on the new PC, update them quickly:

• playwright.config.ts: Update the baseURL property to match your new local WordPress domain.
• global-setup.ts: Update the hardcoded username and password inside page.fill to match the admin credentials of the new environment.

Start the test loop in headed mode (to use the interactive popup):

npx playwright test --headed

If you want to create a brand new automated test for a completely different feature (e.g., verifying a newly built plugin or checkout flow), follow these instructions:

1. Create a Test File: Go to the tests/ folder and create a new file ending in .spec.ts (e.g. checkout-flow.spec.ts).
2. Import Playwright: Add import { test, expect } from '@playwright/test'; to the top.
3. Write the Test Block:

test.describe('Example Plugin Verification', () => {
   test('Check new plugin UI', async ({ page }) => {
       // Since global-setup.ts handles login, you are automatically authenticated!
       await page.goto('/wp-admin/admin.php?page=your-plugin');
       
       // Write your automation logic here
       await expect(page.locator('.my-plugin-title')).toBeVisible();
   });
});

4. Execute: Run npx playwright test --headed. Playwright will automatically detect and run your new .spec.ts file! Note that to run a specific file, you can type npx playwright test tests/checkout-flow.spec.ts.

Since testing and importing Divi layouts automatically in rapid succession can be heavily resource-intensive, your local WordPress environment (e.g. LocalWP) may timeout with a 502 Bad Gateway error if not configured properly. Update your local configurations:

Update your proxy and fastcgi limits to prevent proxy timeouts:

fastcgi_pass php;
fastcgi_buffer_size 128k;
fastcgi_buffers 4 256k;
fastcgi_busy_buffers_size 256k;
fastcgi_read_timeout 1200s;

proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;

Increase your server execution time limit:

max_execution_time = 3600

Increase your process manager child limits so the server can handle multiple rapid background streams:

pm.max_children = 50

(Note: The main test script natively features a global exception handler that catches 502 Server Crashes during testing, pauses for 15 seconds to let the local server heal, logs the layout as a failure, and gently continues to the next layout!)

Mir Monoarul Alam

• 🌐 Portfolio: mirm.pro
• 💼 LinkedIn: linkedin.com/in/mirmpro
• 📧 Email: anik_cse@live.com
• 📱 Phone: +8801713289118