Initial push

.env

@@ -0,0 +1 @@
+BASE_URL=https://hyva-demo.elgentos.io/

.env.example

@@ -0,0 +1 @@
+BASE_URL=https://hyva-demo.elgentos.io/

.gitignore

@@ -0,0 +1,9 @@
+.idea/
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+playwright.config.ts
+package-lock.json
+/tests/fixtures/test-flags.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Elgentos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,195 @@
+# Magento 2 BDD E2E testing suite
+
+A Behavior Driven Development (BDD) End-To-End (E2E) testing suite for Magento 2 using Gherkin syntax in JSDoc and Playwright.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Why BDD and Gherkin in JSDoc for Magento 2](#why-bdd-and-gherkin-in-jsdoc-for-magento-2)
+- [Features](#features)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Usage](#usage)
+  - [Writing Tests](#writing-tests)
+  - [Running Tests](#running-tests)
+- [Examples](#examples)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+
+## Introduction
+
+Welcome to the Magento 2 BDD E2E Testing Suite! This project is an open-source initiative aimed at simplifying and enhancing the way developers write and maintain end-to-end tests for Magento 2 applications.
+
+By combining the power of Behavior Driven Development (BDD) with the flexibility of Playwright and the clarity of Gherkin syntax embedded in JSDoc comments, we aim to make testing more accessible, readable, and maintainable for both developers and non-technical stakeholders.
+
+## Why BDD and Gherkin in JSDoc for Magento 2
+
+Testing in Magento 2 can be complex due to its extensive functionality and customizable nature. Traditional testing methods often result in tests that are hard to read and maintain, especially as the application grows.
+
+**Behavior Driven Development (BDD)** focuses on the behavior of the application from the user's perspective. It encourages collaboration between developers, QA engineers, and business stakeholders by using a shared language to describe application behavior.
+
+[Gherkin syntax](https://cucumber.io/docs/gherkin/reference/) is a domain-specific language that uses natural language constructs to describe software behaviors. By embedding Gherkin steps directly into JSDoc comments, we achieve several benefits:
+
+- **Readability**: tests become self-documenting and easier to understand.
+- **Maintainability**: changes in requirements can be quickly reflected in the test descriptions.
+- **Collaboration**: non-technical team members can read and even help write test cases.
+- **Integration**: embedding in JSDoc keeps the test descriptions close to the implementation, reducing context switching.
+
+[Playwright](https://playwright.dev/) is a powerful automation library that supports all modern browsers. It offers fast and reliable cross-browser testing, which is essential for ensuring Magento 2 applications work seamlessly across different environments.
+
+By integrating these technologies, this testing suite provides a robust framework that simplifies the process of writing, running, and maintaining end-to-end tests for Magento 2.
+
+## Features
+
+- **Gherkin Syntax in JSDoc**: write human-readable test steps directly in your code comments.
+- **Playwright integration**: utilize Playwright's powerful automation capabilities for testing across different browsers.
+- **Magento 2 specific utilities**: predefined steps and helpers tailored for Magento 2's unique features.
+- **Collaborative testing**: enable collaboration between technical and non-technical team members.
+- **Extensible architecture**: easily extend and customize to fit your project's needs.
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js**: Ensure you have Node.js installed (version 14 or higher).
+- **Magento 2 instance**: A running instance of Magento 2 for testing purposes. Elgentos sponsors a [Hyvä demo website](https://hyva-demo.elgentos.io/) for this project.
+- **Git**: Version control system to clone the repository.
+
+### Installation
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/elgentos/magento2-bdd-e2e-testing-suite.git
+   ```
+
+2. **Navigate to the project directory**
+
+   ```bash
+   cd magento2-bdd-e2e-testing-suite
+   ```
+
+3. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+4. **Configure environment**
+
+   Copy the example environment file and update it with your configuration.
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Update `.env` with your Magento 2 instance URL and other necessary settings.
+
+## Usage
+
+### Writing tests
+
+Tests are written in JavaScript using the Gherkin syntax within JSDoc comments. This approach keeps the test descriptions close to the implementation, making it easier to maintain and understand.
+
+Here's an example of how to write a test:
+
+```javascript
+/**
+ * @given I am on the Magento 2 homepage
+ * @when I search for "Example Product"
+ * @then I should see "Example Product" in the search results
+ */
+test('User can search for a product', async ({ page }) => {
+  // Test implementation using Playwright
+});
+```
+
+### Running tests
+
+To execute the tests, run:
+
+```bash
+npx playwright test
+```
+
+This command will run all tests located in the `tests` directory.
+
+You can also run a specific test file:
+
+```bash
+npx playwright test tests/example.test.js
+```
+
+## Examples
+
+Below are some example tests to illustrate how to write and structure your tests.
+
+### User registration test
+
+```javascript
+/**
+ * @given I am on the registration page
+ * @when I fill in the registration form with valid data
+ * @and I submit the form
+ * @then I should see a confirmation message
+ */
+test('User can register an account', async ({ page }) => {
+  // Implementation details
+});
+```
+
+### Checkout process test
+
+```javascript
+/**
+ * @given I have a product in my cart
+ * @when I proceed to checkout
+ * @and I complete the checkout process
+ * @then I should receive an order confirmation
+ */
+test('User can complete the checkout process', async ({ page }) => {
+  // Implementation details
+});
+```
+
+## Contributing
+
+We welcome contributions to enhance this project! Here's how you can get involved:
+
+1. **Clone this repository**
+
+   ```bash
+   git clone https://github.com/elgentos/magento2-bdd-e2e-testing-suite
+   ```
+
+2. **Create a branch**
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+3. **Make your changes**
+
+4. **Commit your changes**
+
+   ```bash
+   git commit -am 'Add a new feature'
+   ```
+
+5. **Push to your fork**
+
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+6. **Open a pull request**: Go to the original repository and open a pull request with a detailed description of your changes.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Contact
+
+If you have any questions, suggestions, or feedback, please open an issue on GitHub.

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "magento2-bdd-e2e-testing-suite",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@playwright/test": "^1.47.2",
+    "@types/node": "^22.7.4"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5"
+  }
+}

playwright.config.example.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL: process.env.BASE_URL || 'https://hyva-demo.elgentos.io/',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Ignore https errors if they apply (should only happen on local) */
+    ignoreHTTPSErrors: true,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

tests/example.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import websites from './fixtures/before/websites.json';
+import exampleExpects from './fixtures/verify/expects/example.json';
+import exampleSelectors from './fixtures/during/selectors/example.json';
+
+/**
+ * @feature Playwright websites title verification
+ *   @scenario User verifies the title of the Playwright website
+ *     @given I navigate to the Playwright website
+ *     @then the page title should contain "Playwright"
+ */
+test('User verifies the title of the Playwright website', async ({ page }) => {
+  await page.goto(websites.playwrightWebsite);
+  await expect(page).toHaveTitle(new RegExp(exampleExpects.playwrightPageTitle));
+});
+
+/**
+ * @feature Get started navigation
+ *    @scenario User navigates to the Installation page via the Get Started link
+ *      @given  I am on the Playwright website
+ *      @when   I click on the "Get started" link
+ *      @then   I should see the "Installation" heading
+ */
+test('User navigates to the Installation page via the Get Started link', async ({ page }) => {
+  await page.goto(websites.playwrightWebsite);
+  await page.getByRole('link', { name: exampleSelectors.getStartedSelectorText }).click();
+  await expect(page.getByRole('heading', { name: exampleExpects.playwrightHeader})).toBeVisible();
+});

tests/fixtures/before/slugs.json

@@ -0,0 +1 @@
+{}

tests/fixtures/before/websites.json

@@ -0,0 +1,3 @@
+{
+    "playwrightWebsite": "https://playwright.dev/"
+}

tests/fixtures/during/selectors/example.json

@@ -0,0 +1,3 @@
+{
+    "getStartedSelectorText": "Get started"
+}

tests/fixtures/verify/expects/example.json

@@ -0,0 +1,4 @@
+{
+    "playwrightHeader": "Installation",
+    "playwrightPageTitle": "Playwright"
+}