readme

.github/workflows/tests.yml

@@ -38,8 +38,8 @@ jobs:
 
     strategy:
       matrix:
-        # names of the test folders: /tests/cypress/e2e/*
-        cypress-target: [ account-related-plugins, branding-plugins-1, branding-plugins-2, form-plugins, others, security-plugins, wordpress ]
+        # names of the test folders: /tests/cypress/e2e/*.\\
+        cypress-target: [ account-related-plugins, branding-plugins-1, branding-plugins-2, form-plugins, others, security-plugins, wordpress, ]
 
     steps:
       - name: Checkout code
@@ -80,13 +80,15 @@ jobs:
       - name: Run Cypress tests
         run: bash ${{ github.workspace }}/tools/run-tests.sh ${{ matrix.cypress-target }}
 
-      - name: Upload Cypress screenshots and WP debug log
+      - name: Upload logs
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: screenshots-and-wp-debug-log-for-${{ matrix.cypress-target }}
+          name: ${{ matrix.cypress-target }}-logs
           path: |
+            ${{ github.workspace }}/tests/cypress/videos
             ${{ github.workspace }}/tests/cypress/screenshots
             ${{ github.workspace }}/tests/cypress/logs
+            ${{ github.workspace }}/tests/cypress/downloads
             /var/www/procaptcha/wp-content/debug.log
           if-no-files-found: ignore

for-devs.md

@@ -84,6 +84,6 @@ Assets compilation:
 
 ### 5.3) For maintainers
 
-If you're a package maintainer,
+If you're a package maintainer, read
 the [for-maintainers.md](https://github.com/prosopo/procaptcha-wordpress-plugin/blob/main/for-maintainers.md) file
-contains extra information about the project. 
+to get additional information about the project. 

for-maintainers.md

@@ -77,6 +77,6 @@ Launching:
 
 `bash tools/run-tests.sh [all|wordpress|form-plugins] [local]`
 
-To open the Cypress App:
+To open the Cypress app:
 
 `cd tests; yarn cy:open`

tests/cypress.config.js

@@ -1,20 +1,40 @@
-const { defineConfig } = require("cypress");
+const {defineConfig} = require("cypress");
+const fs = require('fs');
 
 module.exports = defineConfig({
-  e2e: {
-    setupNodeEvents(on, config) {
-      require("cypress-terminal-report/src/installLogsPrinter")(on, {
-        outputRoot: config.projectRoot + "/cypress/",
-        specRoot: "cypress/e2e",
-        outputTarget: {
-          "logs|html": "html",
+    video: true,
+    e2e: {
+        setupNodeEvents(on, config) {
+            require("cypress-terminal-report/src/installLogsPrinter")(on, {
+                outputRoot: config.projectRoot + "/cypress/",
+                specRoot: "cypress/e2e",
+                outputTarget: {
+                    "logs|html": "html",
+                },
+            });
+            on(
+                'after:spec',
+                (spec, results) => {
+                    if (!results || !results.video) {
+                        return;
+                    }
+
+                    const failures = results.tests.some((test) =>
+                        test.attempts.some((attempt) => attempt.state === 'failed')
+                    );
+
+                    if (failures) {
+                        return;
+                    }
+
+                    fs.unlinkSync(results.video);
+                }
+            )
         },
-      });
+        baseUrl: "http://procaptcha.local",
+        watchForFileChanges: false, // Disable auto-run on file changes.
+        defaultCommandTimeout: 6000, // default 4000.
+        viewportWidth: 1280, // default 1000.
+        viewportHeight: 720, // default 660.
     },
-    baseUrl: "http://procaptcha.local",
-    watchForFileChanges: false, // Disable auto-run on file changes.
-    defaultCommandTimeout: 6000, // default 4000.
-    viewportWidth: 1280, // default 1000.
-    viewportHeight: 720, // default 660.
-  },
 });

tests/cypress/.gitignore

@@ -1,2 +1,3 @@
 downloads/*
-screenshots/*
+screenshots/*
+videos/*

tests/cypress/e2e/account-related-plugins/woocommerce/classes/woo-checkout-classic.ts

@@ -25,7 +25,6 @@ class WooCheckoutClassic extends FormTest {
 			billing_city: "City",
 			billing_state: "UA23",
 			billing_postcode: "69104",
-			billing_phone: "111",
 			billing_email: "[email protected]",
 		};
 		this.messages = {
@@ -52,7 +51,7 @@ class WooCheckoutClassic extends FormTest {
 		// Do not add "?add-to-card" directly to the primary url,
 		// as it causes the "Sorry, your session has expired" issue:
 		// https://github.com/woocommerce/woocommerce-gateway-stripe/issues/551
-		cy.visit("/shop/?add-to-cart=591");
+		cy.visit("/cart/?add-to-cart=591");
 
 		super.visitTargetPage();
 	}

tests/cypress/e2e/account-related-plugins/woocommerce/woocommerce.cy.ts

@@ -1,4 +1,4 @@
-import { IntegrationTest } from "@support/integration-test";
+import {IntegrationTest} from "@support/integration-test";
 import WooOrderTracking from "./classes/woo-order-tracking";
 import WooLoginForm from "./classes/woo-login-form";
 import WooLostPasswordForm from "./classes/woo-lost-password-form";
@@ -7,13 +7,13 @@ import WooCheckoutClassic from "./classes/woo-checkout-classic";
 import WooCheckoutBlocks from "./classes/woo-checkout-blocks";
 
 new IntegrationTest({
-	targetPluginSlugs: ["woocommerce"],
-	forms: [
-		new WooLoginForm(),
-		new WooLostPasswordForm(),
-		new WooRegisterForm(),
-		new WooCheckoutClassic(),
-		new WooCheckoutBlocks(),
-		new WooOrderTracking(),
-	],
+    targetPluginSlugs: ["woocommerce"],
+    forms: [
+        new WooLoginForm(),
+        new WooLostPasswordForm(),
+        new WooRegisterForm(),
+        new WooCheckoutClassic(),
+        new WooCheckoutBlocks(),
+        new WooOrderTracking(),
+    ],
 });

tests/cypress/e2e/form-plugins/gravity-forms/classes/gravity-forms-with-ajax.ts

@@ -1,38 +1,42 @@
 import GravityForms from "./gravity-forms";
 
 class GravityFormsWithAjax extends GravityForms {
-	protected toggleAjaxSubmissionSetting(isActivation: boolean): void {
-		it("toggleAjaxSubmissionSetting", () => {
-			this.integrationTest.login();
+    protected toggleAjaxSubmissionSetting(isActivation: boolean): void {
+        it("toggleAjaxSubmissionSetting", () => {
+            this.integrationTest.login();
 
-			cy.visit("/wp-admin/post.php?post=126&action=edit");
+            cy.visit("/wp-admin/post.php?post=126&action=edit");
 
-			cy.get("#blocks-shortcode-input-1").then(($input) => {
-				true === isActivation
-					? cy.safeType(
-							$input,
-							'[gravityform id="2" title="true" ajax="true"]',
-						)
-					: cy.safeType($input, '[gravityform id="2" title="true"]');
-			});
+            const ajaxArgument = isActivation ? 'ajax="true"' : '';
 
-			cy.get(".editor-post-publish-button").click();
+            this.replaceShortcode(0, `[gravityform id="2" title="true" ${ajaxArgument}]`);
+            this.replaceShortcode(1, `[gravityform id="1" title="true" ${ajaxArgument}]`);
 
-			cy.get(".components-snackbar__content").should("exist");
-		});
-	}
+            cy.get(".editor-post-publish-button").click();
 
-	protected beforeScenario() {
-		super.beforeScenario();
+            cy.get(".components-snackbar__content").should("exist");
+        });
+    }
 
-		this.toggleAjaxSubmissionSetting(true);
-	}
+    protected replaceShortcode(shortcodeNumber: number, shortcode: string): void {
+        cy.get('#editor .blocks-shortcode__textarea')
+            .eq(shortcodeNumber)
+            .then(($input) => {
+                cy.safeType($input, shortcode);
+            });
+    }
 
-	protected afterScenario() {
-		super.afterScenario();
+    protected beforeScenario() {
+        super.beforeScenario();
 
-		this.toggleAjaxSubmissionSetting(false);
-	}
+        this.toggleAjaxSubmissionSetting(true);
+    }
+
+    protected afterScenario() {
+        super.afterScenario();
+
+        this.toggleAjaxSubmissionSetting(false);
+    }
 }
 
 export default GravityFormsWithAjax;

tests/cypress/support/commands.ts

@@ -1,96 +1,96 @@
 import {
-	Settings as SubmitFormSettings,
-	SubmitForm,
+    Settings as SubmitFormSettings,
+    SubmitForm,
 } from "./commands/submit-form";
 import Login from "./commands/login";
 import SafeType from "./commands/safe-type";
 import {
-	RemovePosts,
-	Settings as RemovePostSettings,
+    RemovePosts,
+    Settings as RemovePostSettings,
 } from "./commands/remove-posts";
 import {
-	RemoveUsers,
-	Settings as RemoveUsersSettings,
+    RemoveUsers,
+    Settings as RemoveUsersSettings,
 } from "./commands/remove-users";
 import Chainable = Cypress.Chainable;
 
 declare global {
-	namespace Cypress {
-		interface Chainable {
-			safeType(
-				selectorOrElement: string | JQuery,
-				value: string,
-			): Chainable<JQuery>;
+    namespace Cypress {
+        interface Chainable {
+            safeType(
+                selectorOrElement: string | JQuery,
+                value: string,
+            ): Chainable<JQuery>;
 
-			login(url?: string): Chainable<JQuery>;
+            login(url?: string): Chainable<JQuery>;
 
-			submitForm(settings: SubmitFormSettings): Chainable<JQuery>;
+            submitForm(settings: SubmitFormSettings): Chainable<JQuery>;
 
-			removePosts(settings: RemovePostSettings): Chainable<JQuery>;
+            removePosts(settings: RemovePostSettings): Chainable<JQuery>;
 
-			removeUsers(settings: RemoveUsersSettings): Chainable<JQuery>;
+            removeUsers(settings: RemoveUsersSettings): Chainable<JQuery>;
 
-			getForm(formElementSelector: string): Chainable<JQuery>;
-		}
-	}
+            getForm(formElementSelector: string): Chainable<JQuery>;
+        }
+    }
 }
 
 // with workarounds, otherwise .type below writes too fast, or just fails.
 Cypress.Commands.add(
-	"safeType",
-	(selectorOrElement: string | JQuery, value: string): void => {
-		new SafeType(selectorOrElement, value);
-	},
+    "safeType",
+    (selectorOrElement: string | JQuery, value: string): void => {
+        new SafeType(selectorOrElement, value);
+    },
 );
 
 Cypress.Commands.add("login", (url: string = "/wp-login.php"): void => {
-	// save cookies, to avoid logging in multiple times.
-	cy.session(
-		["procaptcha", "procaptcha"],
-		() => {
-			// Make sure nothing exist yet (to avoid GitHub Actions inner cache-related issues).
-			cy.clearCookies();
-			cy.clearLocalStorage();
-
-			new Login(url);
-		},
-		{
-			validate: () => {
-				cy.visit("/wp-admin/");
-
-				cy.get("h1").should("include.text", "Dashboard");
-			},
-		},
-	);
+    // save cookies, to avoid logging in multiple times.
+    cy.session(
+        ["procaptcha", "procaptcha"],
+        () => {
+            // Make sure nothing exist yet (to avoid GitHub Actions inner cache-related issues).
+            cy.clearCookies();
+            cy.clearLocalStorage();
+
+            new Login(url);
+        },
+        {
+            validate: () => {
+                cy.visit("/wp-admin/");
+
+                cy.get("h1").should("include.text", "Dashboard");
+            },
+        },
+    );
 });
 
 Cypress.Commands.add("submitForm", (settings: SubmitFormSettings): void => {
-	new SubmitForm(settings);
+    new SubmitForm(settings);
 });
 
 Cypress.Commands.add("removePosts", (settings: RemovePostSettings): void => {
-	new RemovePosts(settings);
+    new RemovePosts(settings);
 });
 
 Cypress.Commands.add("removeUsers", (settings: RemoveUsersSettings): void => {
-	new RemoveUsers(settings);
+    new RemoveUsers(settings);
 });
 
 Cypress.Commands.add(
-	"getForm",
-	(formElementSelector: string): Chainable<JQuery> => {
-		return cy.get(formElementSelector).then(($formElement) => {
-			if ("form" === $formElement.prop("tagName").toLowerCase()) {
-				return cy.wrap($formElement);
-			}
-
-			let $form = $formElement.find("form");
-
-			if ($form.length > 0) {
-				return cy.wrap($form);
-			}
-
-			return cy.wrap($formElement);
-		});
-	},
+    "getForm",
+    (formElementSelector: string): Chainable<JQuery> => {
+        return cy.get(formElementSelector).then(($formElement) => {
+            if ("form" === $formElement.prop("tagName").toLowerCase()) {
+                return cy.wrap($formElement);
+            }
+
+            let $form = $formElement.find("form");
+
+            if ($form.length > 0) {
+                return cy.wrap($form);
+            }
+
+            return cy.wrap($formElement);
+        });
+    },
 );