Merge pull request #189 from elgentos/gitlab-main

Sync gitlab-main to main

Author: developer-elgentos

CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2025-10-23
+
+### Added
+- Added footer tests for subscribing to the newsletter and currency switcher.
+- Added a Notification Utility to validate Magento frontend messages.
+- Added a console.log utility tool to prevent having to use `console.log`.
+
+### Changed
+- Rewritten `setup.spec.ts` for better legibility. Setup will now also check if elements are present and active (e.g., coupon codes) and no longer writes to `.env`.
+- Improved the capability of the Magewire loading utility to better handle various states of the Magewire loading element.
+- Improved usage of TypeScript `@` path aliases (e.g., `@utils`, `@poms`, `@config`) for easier customization and maintainability.
+- Updated `translate-json.js` and `install.js` to class-based files for consistency.
+- Updated README to reflect new updates.
+- Updated Magento Admin and frontend specs to ensure tests run successfully.
+- Fixed GitHub workflow and installation scripts for reliability.
+
+### Removed
+- Removed setup toggles to avoid the use of `.only()` as this can easily lead to mistakes. Use `grep` instead.
+
+### Fixed
+- Fixed various ‘false negatives’ where tests would fail due to poor hydration methods, including country selection and state selection fields which change based on the selected country.
+- Fixed ‘race condition’ in the `change_quantity_in_cart` test which sometimes caused the quantity to not be properly updated.
+- Minor fixes for ‘multimatch’ selector errors.
+- Fixed typos and minor issues in multiple files for better stability.
+
+### New Contributors
+- [@Vinai](https://github.com/Vinai)
+
 ## [2.2.0] - 2025-08-04
 
 ### Added
@@ -19,13 +47,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Removed
 - Removed setup toggles to avoid the use of `.only()` as this can easily lead to mistakes. Use ‘grep’ instead.
 
-
 ### Fixed
 - Fixed various ‘false negatives’ where tests would fail due to poor hydration methods. Among these is the country selection and the state selection field, which changes based on the selected country.
 - Fixed ‘race condition’ in the `change_quantity_in_cart` test which sometimes caused the quantity to not be properly updated.
 - Minor fixes for ‘multimatch’ selector errors
 
-
 ## [2.1.0-alpha] - 2025-07-08
 
 ### Added
@@ -90,6 +116,9 @@ Due to a difference in releases between the GitHub version and the npm package,
 
 - Various fixes for stability, better adherence to the DRY-principle and separation of concerns.
 
+### New Contributors
+- [@LS-Myron](https://github.com/LS-Myron)
+
 ## [1.0.0-alpha] - 2025-01-29
 The initial Alpha Release!
 
@@ -99,3 +128,7 @@ The initial Alpha Release!
 - Test cases for key features such as creating an account, ordering a product,  adding a coupon code, and more.
 - Element identifiers, input values, and outcome markers added in JSON files to make customization easier.
 - Example GitHub Actions workflow to show how easily our tool can be integrated into the CI/CD pipeline.
+
+### New Contributors
+- [@shayfaber](https://github.com/shayfaber)
+- [@dheesen](https://github.com/dheesen)

tests/setup.spec.ts

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { test as base } from '@playwright/test';
+import { test } from '@playwright/test';
 import { inputValues } from '@config';
 import { requireEnv } from '@utils/env.utils';
 import { createLogger } from '@utils/logger';
@@ -13,14 +13,14 @@ const logger = createLogger('Setup');
 const magentoAdminUsername = requireEnv('MAGENTO_ADMIN_USERNAME');
 const magentoAdminPassword = requireEnv('MAGENTO_ADMIN_PASSWORD');
 
-base.beforeEach(async ({ page }, testInfo) => {
+test.beforeEach(async ({ page }, testInfo) => {
   const magentoAdminPage = new MagentoAdminPage(page);
   await magentoAdminPage.login(magentoAdminUsername, magentoAdminPassword);
 });
 
-base.describe('Setting up the testing environment', () => {
+test.describe('Setting up the testing environment', () => {
   // Set tests to serial mode to ensure the order is followed.
-  base.describe.configure({mode:'serial'});
+  test.describe.configure({mode:'serial'});
 
   /**
    * @feature Magento Admin Configuration (disable login CAPTCHA)
@@ -33,14 +33,13 @@ base.describe('Setting up the testing environment', () => {
    * @but if the browser is not Chromium
    * @then the test is skipped with an appropriate message
    */
-  base('Disable_login_captcha', { tag: '@setup' }, async ({ page, browserName }, testInfo) => {
-    base.skip(browserName !== 'chromium', `Disabling login captcha through Chromium. This is ${browserName}, therefore test is skipped.`);
+  test('Disable_login_captcha', { tag: '@setup' }, async ({ page, browserName }, testInfo) => {
+    test.skip(browserName !== 'chromium', `Disabling login captcha through Chromium. This is ${browserName}, therefore test is skipped.`);
 
     const magentoAdminPage = new MagentoAdminPage(page);
     await magentoAdminPage.disableLoginCaptcha();
   });
 
-
   /**
    * @feature Magento Admin Configuration (Enable multiple admin logins)
    * @scenario Enable multiple admin logins only in Chromium browser
@@ -54,13 +53,12 @@ base.describe('Setting up the testing environment', () => {
    * @but if the browser is not Chromium
    * @then the test is skipped with an appropriate message
    */
-  base('Enable_multiple_admin_logins', { tag: '@setup' }, async ({ page, browserName }, testInfo) => {
-    base.skip(browserName !== 'chromium', `Disabling login captcha through Chromium. This is ${browserName}, therefore test is skipped.`);
+  test('Enable_multiple_admin_logins', { tag: '@setup' }, async ({ page, browserName }, testInfo) => {
+    test.skip(browserName !== 'chromium', `Disabling login captcha through Chromium. This is ${browserName}, therefore test is skipped.`);
 
     const magentoAdminPage = new MagentoAdminPage(page);
     await magentoAdminPage.enableMultipleAdminLogins();
   });
-  
 
   /**
    * @feature Cart Price Rules Configuration
@@ -70,7 +68,7 @@ base.describe('Setting up the testing environment', () => {
    * @and the admin creates a new cart price rule with the specified coupon code
    * @then the coupon code is successfully saved and available for use
    */
-  base('Set_up_coupon_codes', { tag: '@setup'}, async ({page, browserName}, testInfo) => {
+  test('Set_up_coupon_codes', { tag: '@setup'}, async ({page, browserName}, testInfo) => {
     const magentoAdminPage = new MagentoAdminPage(page);
     const browserEngine = browserName?.toUpperCase() || "UNKNOWN";
     const couponCode = requireEnv(`MAGENTO_COUPON_CODE_${browserEngine}`);
@@ -87,14 +85,14 @@ base.describe('Setting up the testing environment', () => {
    * @and submits the registration form with first name, last name, email, and password
    * @then a new customer account is successfully created for testing purposes
    */
-  base('Create_test_accounts', { tag: '@setup'}, async ({page, browserName}, testInfo) => {
+  test('Create_test_accounts', { tag: '@setup'}, async ({page, browserName}, testInfo) => {
     const magentoAdminPage = new MagentoAdminPage(page);
     const registerPage = new RegisterPage(page);
     const browserEngine = browserName?.toUpperCase() || "UNKNOWN";
     const accountEmail = requireEnv(`MAGENTO_EXISTING_ACCOUNT_EMAIL_${browserEngine}`);
     const accountPassword = requireEnv('MAGENTO_EXISTING_ACCOUNT_PASSWORD');
 
-    await base.step(`Check if ${accountEmail} is already registered`, async () => {
+    await test.step(`Check if ${accountEmail} is already registered`, async () => {
       const customerLookUp = await magentoAdminPage.checkIfCustomerExists(accountEmail);
       if(customerLookUp){
         testInfo.skip(true, `${accountEmail} was found in user table, this step is skipped. If you think this is incorrect, consider removing user from the table and try running the setup again.`);

tests/utils/apiClient.utils.ts

@@ -0,0 +1,157 @@
+// @ts-check
+
+import { request, expect, APIRequestContext, APIResponse } from '@playwright/test';
+import { requireEnv } from '@utils/env.utils';
+
+class ApiClient {
+  private context!: APIRequestContext;
+  private token: string | undefined;
+  private tokenExpiry: number | undefined;
+
+  constructor() {}
+
+  /**
+   * Initializes the ApiClient by ensuring a valid token and setting up the request context.
+   * @returns {Promise<ApiClient>} A Promise that resolves to an instance of ApiClient.
+   */
+  async create(): Promise<ApiClient> {
+    await this.ensureToken();
+
+    this.context = await request.newContext({
+      baseURL: requireEnv('PLAYWRIGHT_BASE_URL'),
+      extraHTTPHeaders: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.token}`,
+      },
+    });
+
+    return this;
+  }
+
+  /**
+   * Ensures the API token is valid, refreshing it if expired or absent.
+   * @private
+   * @returns {Promise<void>}
+   */
+  private async ensureToken(): Promise<void> {
+    if (!this.token || this.isTokenExpired()) {
+      this.token = await this.refreshIntegrationToken();
+    }
+  }
+
+  /**
+   * Fetches a new API token from the server and sets the expiry time.
+   * @private
+   * @returns {Promise<string>} A Promise that resolves to the token string.
+   * @throws {Error} If token retrieval fails.
+   */
+  private async refreshIntegrationToken(): Promise<string> {
+    const tempContext = await request.newContext({
+      baseURL: requireEnv('PLAYWRIGHT_BASE_URL'),
+      extraHTTPHeaders: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const response = await tempContext.post('/rest/V1/integration/admin/token', {
+      data: {
+        username: requireEnv('MAGENTO_API_USERNAME'),
+        password: requireEnv('MAGENTO_API_PASSWORD'),
+      },
+    });
+
+    if (!response.ok()) {
+      const errorBody = await response.text();
+      await tempContext.dispose();
+      throw new Error(`Failed to obtain integration token: ${response.status()} ${errorBody}`);
+    }
+
+    const token = await response.json();
+    const expiresHeader = response.headers()['expires'];
+    if (expiresHeader) {
+        this.tokenExpiry = new Date(expiresHeader).getTime();
+    } else {
+        this.tokenExpiry = Date.now() + (3600 * 1000);
+    }
+
+    await tempContext.dispose();
+    return token;
+  }
+
+  /**
+   * Determines if the current token is expired.
+   * @private
+   * @returns {boolean} True if the token is expired, otherwise false.
+   */
+  private isTokenExpired(): boolean {
+    return !this.tokenExpiry || Date.now() >= this.tokenExpiry;
+  }
+
+  /**
+   * Performs a GET request to the specified URL.
+   * @param {string} url The endpoint URL to send the request to.
+   * @returns {Promise<any>} A Promise that resolves to the response JSON.
+   */
+  async get(url: string): Promise<any> {
+    const response = await this.context.get(url);
+    return this.handleResponse(response);
+  }
+
+  /**
+   * Performs a POST request with the given payload to the specified URL.
+   * @param {string} url The endpoint URL to send the request to.
+   * @param {Record<string, unknown>} payload The data payload to send with the request.
+   * @returns {Promise<any>} A Promise that resolves to the response JSON.
+   * @throws {Error} If the response indicates failure.
+   */
+  async post(url: string, payload: Record<string, unknown>): Promise<any> {
+    const response = await this.context.post(url, { data: payload });
+    return this.handleResponse(response);
+  }
+
+  /**
+   * Performs a PUT request with the given payload to the specified URL.
+   * @param {string} url The endpoint URL to send the request to.
+   * @param {Record<string, unknown>} payload The data payload to send with the request.
+   * @returns {Promise<any>} A Promise that resolves to the response JSON.
+   * @throws {Error} If the response indicates failure.
+   */
+  async put(url: string, payload: Record<string, unknown>): Promise<any> {
+    const response = await this.context.put(url, { data: payload });
+    return this.handleResponse(response);
+  }
+
+  /**
+   * Performs a DELETE request to the specified URL.
+   * @param {string} url The endpoint URL to send the request to.
+   * @returns {Promise<void>} A Promise indicating successful deletion.
+   */
+  async delete(url: string): Promise<void> {
+    const response = await this.context.delete(url);
+    return this.handleResponse(response);
+  }
+
+  /**
+   * Handles an API response, checking for success and parsing the JSON body.
+   * @param {APIResponse} response The response object to handle.
+   * @returns {Promise<any>} A Promise that resolves to the response JSON.
+   * @throws {Error} If the response is not successful.
+   */
+  async handleResponse(response: APIResponse): Promise<any> {
+    if (!response.ok()) {
+      const body = await response.text();
+      throw new Error(`API call failed [${response.status()}]: ${body}`);
+    }
+    return await response.json();
+  }
+
+  /**
+   * Disposes of the current request context.
+   * @returns {Promise<void>}
+   */
+  async dispose(): Promise<void> {
+    await this.context.dispose();
+  }
+}
+
+export default ApiClient;