Add Cypress tests for WordPress Playground

cypress.config.js

@@ -8,6 +8,9 @@ module.exports = defineConfig({
     setupNodeEvents() {
       // This function can be used to register custom Cypress plugins or event listeners.
       // Currently not in use, but left for future extensibility.
-    }
+    },
+    // Add configuration for WordPress Playground
+    experimentalWebKitSupport: true,
+    chromeWebSecurity: false
   }
 });

cypress/e2e/playground-multisite.cy.js

@@ -0,0 +1,58 @@
+describe('WordPress Playground Multisite Tests', () => {
+  beforeEach(() => {
+    // Visit the WordPress Playground page
+    cy.visit('/multisite.html');
+    
+    // Wait for the iframe to load
+    cy.get('iframe').should('be.visible');
+  });
+
+  it('Can access the site', () => {
+    // Switch to the iframe context
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).should('exist');
+    });
+  });
+
+  it('Can access the network admin area', () => {
+    // WordPress Playground should auto-login as admin
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).find('#wpadminbar').should('exist');
+    });
+  });
+
+  it('Plugin is network activated', () => {
+    // WordPress Playground should auto-activate the plugin
+    cy.get('iframe').then($iframe => {
+      // Navigate to network plugins page
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Click on Network Admin in the admin bar
+      cy.wrap($body).find('#wpadminbar #wp-admin-bar-network-admin a').click();
+      
+      // Click on Plugins in the network admin menu
+      cy.wrap($body).find('#menu-plugins a[href*="plugins.php"]').first().click();
+      
+      // Check if the plugin is network active
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"]').should('exist');
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"] .network_active').should('exist');
+    });
+  });
+
+  it('Network settings page loads correctly', () => {
+    cy.get('iframe').then($iframe => {
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Navigate to the network settings page
+      cy.wrap($body).find('#wpadminbar #wp-admin-bar-network-admin a').click();
+      cy.wrap($body).find('#menu-settings a[href*="settings.php"]').first().click();
+      
+      // Check if the network settings page loaded correctly
+      cy.wrap($body).find('h1').should('contain', 'Network Settings');
+    });
+  });
+});

cypress/e2e/playground-single-site.cy.js

@@ -0,0 +1,54 @@
+describe('WordPress Playground Single Site Tests', () => {
+  beforeEach(() => {
+    // Visit the WordPress Playground page
+    cy.visit('/index.html');
+    
+    // Wait for the iframe to load
+    cy.get('iframe').should('be.visible');
+  });
+
+  it('Can access the site', () => {
+    // Switch to the iframe context
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).should('exist');
+    });
+  });
+
+  it('Can access the admin area', () => {
+    // WordPress Playground should auto-login as admin
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).find('#wpadminbar').should('exist');
+    });
+  });
+
+  it('Plugin is activated', () => {
+    // WordPress Playground should auto-activate the plugin
+    cy.get('iframe').then($iframe => {
+      // Navigate to plugins page
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Click on Plugins in the admin menu
+      cy.wrap($body).find('#menu-plugins a[href*="plugins.php"]').first().click();
+      
+      // Check if the plugin is active
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"]').should('exist');
+    });
+  });
+
+  it('Plugin settings page loads correctly', () => {
+    cy.get('iframe').then($iframe => {
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Navigate to the plugin settings page
+      cy.wrap($body).find('#menu-settings a[href*="options-general.php"]').first().click();
+      cy.wrap($body).find('a[href*="options-general.php?page=wp-plugin-starter-template"]').click();
+      
+      // Check if the settings page loaded correctly
+      cy.wrap($body).find('h1').should('contain', 'WP Plugin Starter Template');
+    });
+  });
+});

package.json

@@ -15,8 +15,8 @@
     "test:multisite:headless": "cypress run --config specPattern=cypress/e2e/multisite.cy.js",
     "setup:playground:single": "bash bin/setup-test-env.sh playground-single",
     "setup:playground:multisite": "bash bin/setup-test-env.sh playground-multisite",
-    "test:playground:single": "npm run setup:playground:single && sleep 10 && npm run test:single:headless",
+    "test:playground:single": "npm run setup:playground:single && sleep 10 && cypress run --config specPattern=cypress/e2e/playground-single-site.cy.js",
-    "test:playground:multisite": "npm run setup:playground:multisite && sleep 10 && npm run test:multisite:headless",
+    "test:playground:multisite": "npm run setup:playground:multisite && sleep 10 && cypress run --config specPattern=cypress/e2e/playground-multisite.cy.js",
     "build": "./build.sh",
     "lint:php": "composer run-script phpcs",
     "lint:php:simple": "composer run-script phpcs:simple",
@@ -48,6 +48,8 @@
   "homepage": "https://github.com/wpallstars/wp-plugin-starter-template-for-ai-coding#readme",
   "devDependencies": {
     "@wordpress/env": "^8.12.0",
+    "@wp-playground/blueprints": "^1.0.28",
+    "@wp-playground/client": "^1.0.28",
     "cypress": "^13.6.4"
   }
 }