Fix WordPress Playground tests: improve login handling, implement CodeRabbit suggestions

.github/workflows/playground-tests-fix.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [ main ]
 
+concurrency:
+  group: playground-tests-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   playground-test:
     name: WordPress Playground Tests
@@ -23,16 +27,20 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Install WordPress Playground CLI
+    - name: Add WordPress Playground CLI to dependencies
-      run: npm install -g @wp-playground/cli
+      run: npm install --save-dev @wp-playground/cli
 
     - name: Create plugin zip
       run: |
         mkdir -p dist
-        zip -r dist/plugin.zip . -x "node_modules/*" "dist/*" ".git/*"
+        zip -r dist/plugin.zip . \
+          -x "node_modules/**" "dist/**" ".git/**" ".github/**" ".wiki/**"
 
     - name: Run tests with WordPress Playground
       run: |
+        # Set base URL for Cypress
+        export CYPRESS_BASE_URL=http://localhost:8888
+
         # Start WordPress Playground with our blueprint
         npx @wp-playground/cli server --blueprint playground/blueprint.json --port 8888 --login &
 
@@ -41,4 +49,11 @@ jobs:
         timeout 60 bash -c 'until curl -s http://localhost:8888; do sleep 2; done'
 
         # Run Cypress tests against WordPress Playground
-        npx cypress run --config specPattern=cypress/e2e/playground-single-site.cy.js
+        npx cypress run --spec "cypress/e2e/playground-single-site.cy.js"
+
+    - name: Upload Cypress artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-playground-results
+        path: cypress/videos,cypress/screenshots

.github/workflows/playground-tests.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [ main ]
 
+concurrency:
+  group: playground-tests-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   code-quality:
     name: Code Quality Check
@@ -54,16 +58,20 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Install WordPress Playground CLI
+    - name: Add WordPress Playground CLI to dependencies
-      run: npm install -g @wp-playground/cli
+      run: npm install --save-dev @wp-playground/cli
 
     - name: Create plugin zip
       run: |
         mkdir -p dist
-        zip -r dist/plugin.zip . -x "node_modules/*" "dist/*" ".git/*"
+        zip -r dist/plugin.zip . \
+          -x "node_modules/**" "dist/**" ".git/**" ".github/**" ".wiki/**"
 
     - name: Run tests with WordPress Playground
       run: |
+        # Set base URL for Cypress
+        export CYPRESS_BASE_URL=http://localhost:8888
+
         # Start WordPress Playground with our blueprint
         npx @wp-playground/cli server --blueprint playground/blueprint.json --port 8888 --login &
 
@@ -72,7 +80,14 @@ jobs:
         timeout 60 bash -c 'until curl -s http://localhost:8888; do sleep 2; done'
 
         # Run Cypress tests against WordPress Playground
-        npx cypress run --config specPattern=cypress/e2e/playground-single-site.cy.js
+        npx cypress run --spec "cypress/e2e/playground-single-site.cy.js"
+
+    - name: Upload Cypress artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-single-site-results
+        path: cypress/videos,cypress/screenshots
 
   playground-multisite-test:
     name: WordPress Playground Multisite Tests
@@ -91,16 +106,20 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Install WordPress Playground CLI
+    - name: Add WordPress Playground CLI to dependencies
-      run: npm install -g @wp-playground/cli
+      run: npm install --save-dev @wp-playground/cli
 
     - name: Create plugin zip
       run: |
         mkdir -p dist
-        zip -r dist/plugin.zip . -x "node_modules/*" "dist/*" ".git/*"
+        zip -r dist/plugin.zip . \
+          -x "node_modules/**" "dist/**" ".git/**" ".github/**" ".wiki/**"
 
     - name: Run tests with WordPress Playground
       run: |
+        # Set base URL for Cypress
+        export CYPRESS_BASE_URL=http://localhost:8888
+
         # Start WordPress Playground with our blueprint
         npx @wp-playground/cli server --blueprint playground/multisite-blueprint.json --port 8888 --login &
 
@@ -109,7 +128,14 @@ jobs:
         timeout 60 bash -c 'until curl -s http://localhost:8888; do sleep 2; done'
 
         # Run Cypress tests against WordPress Playground
-        npx cypress run --config specPattern=cypress/e2e/playground-multisite.cy.js
+        npx cypress run --spec "cypress/e2e/playground-multisite.cy.js"
+
+    - name: Upload Cypress artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-multisite-results
+        path: cypress/videos,cypress/screenshots
 
   performance-test:
     name: WordPress Performance Tests

cypress/e2e/playground-multisite.cy.js

@@ -14,8 +14,17 @@ describe('WordPress Playground Multisite Tests', () => {
     // Visit the network admin dashboard
     cy.visit('/wp-admin/network/');
 
+    // Fill in the login form if needed
+    cy.get('body').then(($body) => {
+      if ($body.hasClass('login')) {
+        cy.get('#user_login').type('admin');
+        cy.get('#user_pass').type('password');
+        cy.get('#wp-submit').click();
+      }
+    });
+
     // Check if we're logged in to the network admin
-    cy.get('body').should('have.class', 'wp-admin');
+    cy.get('#wpadminbar').should('exist');
   });
 
   it('Plugin is network activated', () => {

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

@@ -14,8 +14,17 @@ describe('WordPress Playground Single Site Tests', () => {
     // Visit the admin dashboard
     cy.visit('/wp-admin/');
 
+    // Fill in the login form if needed
+    cy.get('body').then(($body) => {
+      if ($body.hasClass('login')) {
+        cy.get('#user_login').type('admin');
+        cy.get('#user_pass').type('password');
+        cy.get('#wp-submit').click();
+      }
+    });
+
     // Check if we're logged in
-    cy.get('body').should('have.class', 'wp-admin');
+    cy.get('#wpadminbar').should('exist');
   });
 
   it('Plugin is activated', () => {