Update dependencies and add Playwright fixtures for Magento testing

package.json

@@ -1,6 +1,7 @@
 {
   "name": "magento2-core",
   "version": "1.0.0",
+  "type": "module",
   "description": "1. [About seQura](#about-sequra) 2. [Installation guide](https://sequra.atlassian.net/wiki/spaces/DOC/pages/1377304583/MAGENTO+2) 3. [Sign-up](#sign-up) 4. [For developers](#for-developers)",
   "main": "index.js",
   "scripts": {},
@@ -9,6 +10,7 @@
   "license": "ISC",
   "devDependencies": {
     "@playwright/test": "^1.49.1",
-    "@types/node": "^22.10.7"
+    "@types/node": "^22.10.7",
+    "playwright-fixture-for-plugins": "github:sequra/playwright-fixture-for-plugins#feature/Setup-project"
   }
 }

playwright.config.js

@@ -36,9 +36,9 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'example',
+      name: 'configuration-payment-methods',
       use: { ...devices['Desktop Chrome'] },
-      testMatch: 'example.spec.js',
+      testMatch: '004-configuration-payment-methods.spec.js',
     },
   ],
 });

tests-e2e/fixtures/MagentoBackOffice.js

@@ -0,0 +1,69 @@
+import { BackOffice } from 'playwright-fixture-for-plugins';
+export default class MagentoBackOffice extends BackOffice {
+
+    /**
+     * Init the locators with the locators available
+     * 
+     * @returns {Object}
+     */
+    initLocators() {
+        return {
+            usernameInput: () => this.page.locator('#username'),
+            passwordInput: () => this.page.locator('#login'),
+            loginButton: () => this.page.locator('.action-login'),
+            // menuBarItemSales: () => this.page.locator('#menu-magento-sales-sales'),
+            menuBarItemSeQuraLink: () => this.page.locator('[data-ui-id="menu-sequra-core-menu"] > a'),
+        };
+    }
+
+    /**
+     * Login
+     * 
+     * @param {Object} options Additional options
+     * @returns {Promise<void>}
+     */
+    async login(options = { waitUntil: 'load' }) {
+        const user = process.env.M2_ADMIN_USER;
+        const pass = process.env.M2_ADMIN_PASSWORD;
+        const usernameInput = this.locators.usernameInput();
+
+        try {
+            await this.page.goto(`${this.baseURL}/${process.env.M2_BACKEND_FRONTNAME}`, { waitUntil: 'domcontentloaded' });
+            await this.expect(usernameInput, 'Username input is visible').toBeVisible({ timeout: 100 });
+        }
+        catch {
+            return;
+        }
+
+        console.log(`Logging in as user: "${user}" with password: "${pass}"`);
+
+        await usernameInput.fill(user);
+        await this.locators.passwordInput().fill(pass);
+        await this.locators.loginButton().click();
+        await this.page.waitForURL(/admin/, options);
+    }
+
+    /**
+     * Logout
+     * 
+     * @param {Object} options Additional options
+     * @returns {Promise<void>}
+     */
+    async logout(options = {}) {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     * Navigate to SeQura settings page
+     * 
+     * @param {Object} options
+     * @param {string} options.page The page within settings to navigate to
+     */
+    async gotoSeQuraSettings(options = { page: '' }) {
+        await this.login();
+        // await this.locators.menuBarItemSales().click();
+        const link = this.locators.menuBarItemSeQuraLink();
+        const url = (await link.getAttribute('href')) + `#${options.page}`;
+        await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+    }
+}

tests-e2e/fixtures/MagentoSeQuraHelper.js

@@ -0,0 +1,31 @@
+import { SeQuraHelper } from 'playwright-fixture-for-plugins';
+
+export default class MagentoSeQuraHelper extends SeQuraHelper {
+
+    /**
+     * Init the webhooks available
+     * 
+     * @returns {Object} The webhooks available
+     */
+    initWebhooks() {
+        return {
+            clear_config: 'clear_config',
+            dummy_config: 'dummy_config',
+            // dummyServicesConfig: 'dummy_services_config',
+            // removeDbTables: 'remove_db_tables'
+        };
+    }
+
+     /**
+     * Prepare the URL to use
+     * 
+     * @param {Object} options Additional options
+     * @param {string} options.webhook The webhook
+     * @param {Array<Object>} options.args The arguments to pass to the webhook. Each argument is an object with `name` and `value` properties
+     * @returns {string} The URL to use
+     */
+     getWebhookUrl(options = { webhook, args: [] }) {
+        const { webhook, args } = options;
+        return `${this.baseURL}/rest/V1/sequrahelper/webhook/?sq-webhook=${webhook}${this.getWebhookUrlArgs(args)}`;
+    }
+}

tests-e2e/fixtures/test.js

@@ -0,0 +1,23 @@
+import { test as baseTest, expect } from "@playwright/test";
+import { PaymentMethodsSettingsPage } from "playwright-fixture-for-plugins";
+import MagentoBackOffice from "./MagentoBackOffice";
+import MagentoSeQuraHelper from "./MagentoSeQuraHelper";
+
+const test = baseTest.extend({
+    backOffice: async ({ page, baseURL }, use) => await use(new MagentoBackOffice(page, baseURL, expect)),
+    helper: async ({ page, baseURL, request }, use) => await use(new MagentoSeQuraHelper(page, baseURL, expect, request)),
+    paymentMethodsSettingsPage: async ({ page, baseURL, request, backOffice, helper}, use) =>  await use(new PaymentMethodsSettingsPage(page, baseURL, expect, request, backOffice, helper)),
+});
+
+test.afterEach(async ({ page }, testInfo) => {
+    if (testInfo.status !== testInfo.expectedStatus) {
+        const screenshotPath = testInfo.outputPath(`screenshot.png`);
+        testInfo.attachments.push({
+            name: 'screenshot', path:
+                screenshotPath, contentType: 'image/png'
+        });
+        await page.screenshot({ path: screenshotPath, fullPage: true });
+    }
+});
+
+export { test, expect };

tests-e2e/specs/004-configuration-payment-methods.spec.js

@@ -0,0 +1,18 @@
+import { test } from '../fixtures/test';
+
+test.describe('Configuration', () => {
+  test('Payment methods', async ({ helper, paymentMethodsSettingsPage }) => {
+    // Setup
+    const { dummy_config } = helper.webhooks;
+    const countries = [
+      { name: 'Spain', paymentMethods: ['Paga Después', 'Divide tu pago en 3', 'Paga Fraccionado'] },
+      { name: 'France', paymentMethods: ['Payez en plusieurs fois'] },
+      { name: 'Italy', paymentMethods: ['Pagamento a rate'] },
+      { name: 'Portugal', paymentMethods: ['Pagamento Fracionado'] }
+    ];
+    // Execution
+    await helper.executeWebhook({ webhook: dummy_config });
+    await paymentMethodsSettingsPage.goto();
+    await paymentMethodsSettingsPage.expectAvailablePaymentMethodsAreVisible(countries);
+  });
+});