shopware-e2e-testkit 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# Shopware 6 E2E Smoke Testkit
+
+A ready-to-use E2E/smoke testkit for Shopware 6 Storefront, based on Playwright.
+
+## Features
+- ✅ Quick setup with `init` command.
+- ✅ Pre-configured smoke tests for core storefront functionality.
+- ✅ Page Object Model (POM) based architecture for easy maintenance.
+- ✅ Configurable via environment variables.
+
+## Installation
+
+```bash
+npm install --save-dev shopware-e2e-testkit
+```
+
+## Getting Started
+
+### 1. Initialize the testkit
+
+Run the following command in your project root:
+
+```bash
+npx shopware-testkit init
+```
+
+This will create:
+- `playwright.config.ts`: Playwright configuration.
+- `.env`: Environment variables for your shop URL.
+- `.env.example`: Template for environment variables.
+
+### 2. Configure your Shop URL
+
+Open the `.env` file and set your `SALESCHANNEL_URL`:
+
+```env
+SALESCHANNEL_URL=https://your-shopware-6-store.com
+```
+
+### 3. Run the tests
+
+```bash
+npx shopware-testkit run
+```
+
+You can also specify the URL directly via CLI:
+
+```bash
+npx shopware-testkit run --url https://another-store.com
+```
+
+## Debugging
+
+You can debug the tests using standard Playwright features:
+
+- **UI Mode**: Opens an interactive UI to step through tests.
+  ```bash
+  npx shopware-testkit run --ui
+  ```
+
+- **Debug Mode**: Opens the Playwright Inspector.
+  ```bash
+  npx shopware-testkit run --debug
+  ```
+
+## Continuous Integration (Bitbucket Pipelines)
+
+To run the smoke tests automatically in your Bitbucket Pipelines, you can add a step to your `bitbucket-pipelines.yml`.
+
+### Example Configuration
+
+Using the official Playwright Docker image ensures all browser dependencies are met. You can add this as a separate step in your pipeline:
+
+```yaml
+pipelines:
+  default:
+    - step:
+        name: Shopware E2E Smoke Tests
+        image: mcr.microsoft.com/playwright:v1.49.1-jammy
+        caches:
+          - node
+        script:
+          - npm ci
+          # The testkit picks up SALESCHANNEL_URL and SEARCH_TERM from the environment
+          - npx shopware-testkit run
+        artifacts:
+          - playwright-report/**
+
+  # Manual trigger for specific environment
+  custom:
+    smoke-tests-staging:
+      - step:
+          name: Shopware E2E Smoke Tests (Staging)
+          image: mcr.microsoft.com/playwright:v1.49.1-jammy
+          script:
+            - npm ci
+            - SALESCHANNEL_URL="https://staging.yourshop.com" npx shopware-testkit run
+```
+
+### Environment Variables
+Make sure to define the following **Repository Variables** in Bitbucket (**Repository settings > Pipelines > Repository variables**):
+
+- `SALESCHANNEL_URL`: The URL of your Shopware storefront (e.g., `https://staging.yourshop.com`).
+- `SEARCH_TERM`: (Optional) The product name to search for.
+
+## Included Tests
+
+The smoke testkit covers:
+- **Homepage**: Verifies that the home page loads and essential elements (logo, navigation, footer) are visible.
+- **Search**: Verifies that the search functionality returns results.
+- **Product Detail Page (PDP)**: Verifies that product details and price are displayed.
+- **Cart**: Verifies that products can be added to the cart.
+- **Checkout**: Verifies the guest checkout flow until the confirmation page (without placing an actual order).
+
+## License
+MIT

package/bin/shopware-testkit.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { init } = require('../dist/commands/init');
+const { run } = require('../dist/commands/run');
+const packageJson = require('../package.json');
+
+program
+  .name('shopware-testkit')
+  .description('E2E/smoke testkit for Shopware 6 Storefront')
+  .version(packageJson.version);
+
+program
+  .command('init')
+  .description('Initialize the testkit in the current project')
+  .action(async () => {
+    await init();
+  });
+
+program
+  .command('run')
+  .description('Run the smoke tests')
+  .option('-u, --url <url>', 'Target Shopware URL')
+  .option('-s, --search <term>', 'Search term for product tests')
+  .option('--debug', 'Run tests in debug mode (Playwright Inspector)')
+  .option('--ui', 'Run tests in Playwright UI mode')
+  .action((options) => {
+    run(options);
+  });
+
+program.parse(process.argv);

package/dist/commands/init.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = init;
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+async function init() {
+    const cwd = process.cwd();
+    const templateDir = path.resolve(__dirname, '../../templates');
+    console.log('🚀 Initializing Shopware E2E Testkit...');
+    const filesToCopy = [
+        { src: 'playwright.config.ts', dest: 'playwright.config.ts' },
+        { src: '.env.example', dest: '.env.example' },
+    ];
+    for (const file of filesToCopy) {
+        const srcPath = path.join(templateDir, file.src);
+        const destPath = path.join(cwd, file.dest);
+        if (await fs.pathExists(destPath)) {
+            console.warn(`⚠️  File ${file.dest} already exists, skipping.`);
+        }
+        else {
+            await fs.copy(srcPath, destPath);
+            console.log(`✅ Created ${file.dest}`);
+        }
+    }
+    // Create .env if it doesn't exist
+    const envPath = path.join(cwd, '.env');
+    if (!(await fs.pathExists(envPath))) {
+        await fs.copy(path.join(templateDir, '.env.example'), envPath);
+        console.log('✅ Created .env (from .env.example)');
+    }
+    console.log('\n🎉 Initialization complete!');
+    console.log('Next steps:');
+    console.log('1. Update your .env file with your shop URL.');
+    console.log('2. Run your tests with: npx shopware-testkit run');
+}

package/dist/commands/run.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = run;
+const child_process_1 = require("child_process");
+const path = __importStar(require("path"));
+function run(options) {
+    console.log('🔍 Running Shopware Smoke Tests...');
+    const env = { ...process.env };
+    if (options.url) {
+        env.SALESCHANNEL_URL = options.url;
+        console.log(`🌐 Target URL set to: ${options.url}`);
+    }
+    if (options.search) {
+        env.SEARCH_TERM = options.search;
+        console.log(`🔍 Search term set to: ${options.search}`);
+    }
+    const configPath = path.resolve(process.cwd(), 'playwright.config.ts');
+    const testsPath = path.resolve(__dirname, '../tests');
+    let command = `npx playwright test "${testsPath}" --config="${configPath}"`;
+    if (options.debug) {
+        command += ' --debug';
+    }
+    if (options.ui) {
+        command += ' --ui';
+    }
+    try {
+        // Run playwright test using the local config and pointing to the bundled tests
+        (0, child_process_1.execSync)(command, {
+            stdio: 'inherit',
+            env
+        });
+    }
+    catch (error) {
+        console.error('❌ Tests failed!');
+        process.exit(1);
+    }
+}

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./pages/BasePage"), exports);
+__exportStar(require("./pages/HomePage"), exports);
+__exportStar(require("./pages/SearchPage"), exports);
+__exportStar(require("./pages/ProductPage"), exports);
+__exportStar(require("./pages/CheckoutPage"), exports);

package/dist/pages/BasePage.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePage = void 0;
+class BasePage {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    async goto(path = '/') {
+        await this.page.goto(path);
+    }
+    get headerLogo() {
+        return this.page.locator('.header-logo-main-link').first();
+    }
+    get searchInput() {
+        return this.page.locator('input[name="search"]').first();
+    }
+    get searchButton() {
+        return this.page.locator('.header-search-btn').first();
+    }
+    get cartButton() {
+        return this.page.locator('.header-cart-btn').first();
+    }
+    async searchFor(term) {
+        await this.searchInput.fill(term);
+        await this.searchButton.click();
+    }
+}
+exports.BasePage = BasePage;

package/dist/pages/CheckoutPage.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutPage = void 0;
+const BasePage_1 = require("./BasePage");
+class CheckoutPage extends BasePage_1.BasePage {
+    get offcanvasCartCheckoutButton() {
+        return this.page.locator('.cart-offcanvas .begin-checkout-btn').first();
+    }
+    get guestCheckoutButton() {
+        return this.page.locator('.login-card .btn-secondary').first();
+    }
+    // Guest registration selectors
+    get salutationSelect() { return this.page.locator('#personalSalutation'); }
+    get firstNameInput() { return this.page.locator('#personalFirstName'); }
+    get lastNameInput() { return this.page.locator('#personalLastName'); }
+    get emailInput() { return this.page.locator('#personalMail'); }
+    get streetInput() { return this.page.locator('#billingAddressAddressStreet'); }
+    get zipcodeInput() { return this.page.locator('#billingAddressAddressZipcode'); }
+    get cityInput() { return this.page.locator('#billingAddressAddressCity'); }
+    get countrySelect() { return this.page.locator('#billingAddressAddressCountry'); }
+    get submitGuestRegistrationButton() {
+        return this.page.locator('.checkout-register-submit');
+    }
+    get confirmOrderButton() {
+        return this.page.locator('#confirmFormSubmit');
+    }
+    get checkoutAsideSummary() {
+        return this.page.locator('.checkout-aside-summary');
+    }
+    get grandTotal() {
+        return this.page.locator('.checkout-aside-summary-total').first();
+    }
+    get checkoutFinishTitle() {
+        return this.page.locator('.finish-header');
+    }
+    async goToCheckoutFromOffcanvas() {
+        await this.offcanvasCartCheckoutButton.click();
+    }
+    async fillGuestData(data) {
+        await this.salutationSelect.selectOption({ label: data.salutation });
+        await this.firstNameInput.fill(data.firstName);
+        await this.lastNameInput.fill(data.lastName);
+        await this.emailInput.fill(data.email);
+        await this.streetInput.fill(data.street);
+        await this.zipcodeInput.fill(data.zipcode);
+        await this.cityInput.fill(data.city);
+        await this.countrySelect.selectOption({ label: data.country });
+        await this.submitGuestRegistrationButton.click();
+    }
+    async placeOrder() {
+        // Wait for the TOS checkbox if it exists and check it
+        const tosCheckbox = this.page.locator('#tos');
+        if (await tosCheckbox.isVisible()) {
+            await tosCheckbox.check();
+        }
+        await this.confirmOrderButton.click();
+    }
+}
+exports.CheckoutPage = CheckoutPage;

package/dist/pages/HomePage.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePage = void 0;
+const BasePage_1 = require("./BasePage");
+class HomePage extends BasePage_1.BasePage {
+    get footer() {
+        return this.page.locator('.footer-main');
+    }
+    get mainNavigation() {
+        return this.page.locator('.main-navigation-menu');
+    }
+}
+exports.HomePage = HomePage;

package/dist/pages/ProductPage.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPage = void 0;
+const BasePage_1 = require("./BasePage");
+class ProductPage extends BasePage_1.BasePage {
+    get buyButton() {
+        return this.page.locator('.buy-widget .btn-buy').first();
+    }
+    get productPrice() {
+        return this.page.locator('.product-detail-price').first();
+    }
+    get cartAlert() {
+        return this.page.locator('.alert-success').first();
+    }
+    get offcanvasCartItem() {
+        return this.page.locator('.offcanvas-cart-items .line-item').first();
+    }
+    async addToCart() {
+        await this.buyButton.click();
+        // Wait for offcanvas cart
+        await this.page.waitForSelector('.offcanvas.show');
+    }
+}
+exports.ProductPage = ProductPage;

package/dist/pages/SearchPage.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchPage = void 0;
+const BasePage_1 = require("./BasePage");
+class SearchPage extends BasePage_1.BasePage {
+    get productItems() {
+        return this.page.locator('.cms-element-product-listing .product-box');
+    }
+    async getFirstProductName() {
+        return this.productItems.first().locator('.product-name').textContent();
+    }
+    async clickFirstProduct() {
+        await this.productItems.first().locator('.product-name').click();
+    }
+}
+exports.SearchPage = SearchPage;

package/dist/tests/storefront-smoke.spec.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const HomePage_1 = require("../pages/HomePage");
+const SearchPage_1 = require("../pages/SearchPage");
+const ProductPage_1 = require("../pages/ProductPage");
+const CheckoutPage_1 = require("../pages/CheckoutPage");
+test_1.test.describe('Shopware 6 Storefront Smoke Tests', () => {
+    const searchTerm = process.env.SEARCH_TERM || 'Main product';
+    (0, test_1.test)('should load the homepage', async ({ page }) => {
+        const homePage = new HomePage_1.HomePage(page);
+        await homePage.goto();
+        await (0, test_1.expect)(homePage.headerLogo).toBeVisible();
+        await (0, test_1.expect)(homePage.mainNavigation).toBeVisible();
+        await (0, test_1.expect)(homePage.footer).toBeVisible();
+    });
+    (0, test_1.test)('should search for a product', async ({ page }) => {
+        const homePage = new HomePage_1.HomePage(page);
+        await homePage.goto();
+        await homePage.searchFor(searchTerm);
+        const searchPage = new SearchPage_1.SearchPage(page);
+        await (0, test_1.expect)(searchPage.productItems.first()).toBeVisible();
+        const productName = await searchPage.getFirstProductName();
+        (0, test_1.expect)(productName?.toLowerCase()).toContain(searchTerm.toLowerCase());
+    });
+    (0, test_1.test)('should view product detail page and add to cart', async ({ page }) => {
+        const homePage = new HomePage_1.HomePage(page);
+        await homePage.goto();
+        await homePage.searchFor(searchTerm);
+        const searchPage = new SearchPage_1.SearchPage(page);
+        await searchPage.clickFirstProduct();
+        const productPage = new ProductPage_1.ProductPage(page);
+        await (0, test_1.expect)(productPage.productPrice).toBeVisible();
+        await (0, test_1.expect)(productPage.buyButton).toBeVisible();
+        await productPage.addToCart();
+        await (0, test_1.expect)(productPage.cartAlert).toBeVisible();
+        await (0, test_1.expect)(productPage.offcanvasCartItem).toBeVisible();
+        const checkoutPage = new CheckoutPage_1.CheckoutPage(page);
+        await (0, test_1.expect)(checkoutPage.offcanvasCartCheckoutButton).toBeVisible();
+    });
+    (0, test_1.test)('should reach the checkout confirmation page as a guest', async ({ page }) => {
+        // Navigate to a product and add to cart
+        const homePage = new HomePage_1.HomePage(page);
+        await homePage.goto();
+        await homePage.searchFor(searchTerm);
+        const searchPage = new SearchPage_1.SearchPage(page);
+        await searchPage.clickFirstProduct();
+        const productPage = new ProductPage_1.ProductPage(page);
+        await productPage.addToCart();
+        await (0, test_1.expect)(productPage.cartAlert).toBeVisible();
+        await (0, test_1.expect)(productPage.offcanvasCartItem).toBeVisible();
+        const checkoutPage = new CheckoutPage_1.CheckoutPage(page);
+        await checkoutPage.goToCheckoutFromOffcanvas();
+        // Click guest checkout button
+        await checkoutPage.guestCheckoutButton.click();
+        // Fill guest data
+        await checkoutPage.fillGuestData({
+            salutation: 'Mr.',
+            firstName: 'John',
+            lastName: 'Doe',
+            email: `test-${Date.now()}@example.com`,
+            street: 'Test Street 1',
+            zipcode: '12345',
+            city: 'Test City',
+            country: 'Germany'
+        });
+        // Verify confirmation page instead of placing order
+        await (0, test_1.expect)(checkoutPage.confirmOrderButton).toBeVisible();
+        await (0, test_1.expect)(checkoutPage.checkoutAsideSummary).toBeVisible();
+        await (0, test_1.expect)(checkoutPage.grandTotal).toBeVisible();
+        await (0, test_1.expect)(page).toHaveURL(/.*\/confirm/);
+    });
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "shopware-e2e-testkit",
+  "version": "1.0.0",
+  "description": "Shopware 6 E2E Smoke Testkit",
+  "main": "dist/index.js",
+  "bin": {
+    "shopware-testkit": "./bin/shopware-testkit.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "playwright test",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@playwright/test": "^1.59.1",
+    "commander": "^14.0.3",
+    "dotenv": "^17.4.2",
+    "fs-extra": "^11.3.5"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.6.2",
+    "typescript": "^6.0.3"
+  }
+}

package/templates/.env.example

@@ -0,0 +1,8 @@
+# Shopware Sales Channel URL
+SALESCHANNEL_URL=https://your-shopware-store.com
+
+# (Optional) Search term for product tests
+# SEARCH_TERM=Main product
+
+# (Optional) Credentials for guest checkout if needed for specific tests
+# Usually guest checkout doesn't need pre-existing credentials

package/templates/playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+dotenv.config({ path: path.resolve(process.cwd(), '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  /* 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: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.SALESCHANNEL_URL || 'http://localhost',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});