PSPAYPAL-815 add first cypress e2e test

.github/workflows/development.yml

@@ -230,6 +230,36 @@ jobs:
             source/coverage.xml
             source/phpunit.xml
 
+  cypress_tests:
+    needs: [install_shop_with_module]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Start Cypress container
+        run: |
+          docker run -d --name cypress \
+            --network=host \
+            -v "$(pwd)/source:/e2e" \
+            cypress/included:12.17.3
+          sleep 5
+
+      - name: Run Cypress tests
+        env:
+          CYPRESS_TESTS_SHOP_DOMAIN: "http://localhost.local"
+          CYPRESS_TESTS_SHOP_USER_NAME: "[email protected]"
+          CYPRESS_TESTS_SHOP_USER_PASSWORD: "oxidoxid"
+          CYPRESS_TESTS_SHOP_USER_FIRST_NAME: "Test"
+          CYPRESS_TESTS_SHOP_USER_LAST_NAME: "Shoper"
+          CYPRESS_TESTS_SHOP_USER_STREET: "Teststreet"
+          CYPRESS_TESTS_SHOP_USER_STREET_NUMBER: "1"
+          CYPRESS_TESTS_SHOP_USER_ZIP: "12345"
+          CYPRESS_TESTS_SHOP_USER_LOCATION: "Testcity"
+        run: |
+          docker exec -it cypress \
+          bash -c "cd /e2e && npx cypress run"
+
+      - name: Stop Cypress container
+        if: always()
+        run: docker rm -f cypress
 #  codeception_tests:
 #    strategy:
 #      fail-fast: false

tests/.gitignore

@@ -0,0 +1 @@
+defineCypressVars.sh

tests/README.md

@@ -0,0 +1,18 @@
+# cypress
+## quick start
+- install cypress if you haven't already
+  - `npm install cypress`
+- copy environment variables
+  - `cp defineCypressVars.sh.dist defineCypressVars.sh`
+- before running cypress tests you need to define the environment variables in the shell in which you run cypress
+  - run `source defineCypressVars.sh`
+- open cypress
+  - `npx cypress open`
+- or just run cypress tests
+  - `npx cypress run`
+
+## config files
+- cypress.config.js contains configuration for cypress tests
+- tsconfig.json contains configuration for typescript
+- webpack.config.js contains configuration for webpack
+- cypress/plugins/index.js contains configuration for cypress plugins

tests/cypress/e2e/checkout-with-register-and-invoice.cy.js

@@ -0,0 +1,20 @@
+import { PageFactoryService } from "../service/PageFactoryService";
+import { ShopDomainService } from "../service/ShopDomainService";
+
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit(ShopDomainService.getShopUrl())
+
+    PageFactoryService.getStartPage(cy).putFirstNewItemInBasket()
+
+    PageFactoryService.getUserPage(cy).clickRegisterButton()
+
+    PageFactoryService.getRegisterPage(cy).register()
+
+    PageFactoryService.getPaymentPage(cy).payByInvoiceAndGoNext()
+
+    PageFactoryService.getOrderConfirmPage(cy).confirm()
+
+    PageFactoryService.getThankYouPage(cy).assertOrderCompleted()
+  })
+})

tests/cypress/page/OrderConfirmPage.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+export class OrderConfirmPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    confirm() {
+        this.cy.get('.sticky-md-top > .btn').click();
+    }
+}

tests/cypress/page/PaymentPage.ts

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+export class PaymentPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    payByInvoiceAndGoNext() {
+        this.cy.get('#payment_oxidinvoice').check();
+        this.cy.get('.sticky-md-top > .btn').click();
+    }
+}

tests/cypress/page/RegisterPage.ts

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+import { UniqueEmailService } from '../service/UniqueEmailService';
+export class RegisterPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    register() {
+        this.cy.get('#userLoginName').type(UniqueEmailService.generateUniqueEmail(Cypress.env("TESTS_SHOP_USER_NAME")));
+        this.cy.get('#userPassword').type(Cypress.env('TESTS_SHOP_USER_PASSWORD'));
+        this.cy.get('#userPasswordConfirm').type(Cypress.env('TESTS_SHOP_USER_PASSWORD'));
+        this.cy.get('#invadr_oxuser__oxfname').select('MRS');
+        this.cy.get('[name="invadr[oxuser__oxfname]"]').type(Cypress.env('TESTS_SHOP_USER_FIRST_NAME'));
+        this.cy.get('[name="invadr[oxuser__oxlname]"]').type(Cypress.env('TESTS_SHOP_USER_LAST_NAME'));
+        this.cy.get('[name="invadr[oxuser__oxstreet]"]').type(Cypress.env('TESTS_SHOP_USER_STREET'));
+        this.cy.get('[name="invadr[oxuser__oxstreetnr]"]').type(Cypress.env('TESTS_SHOP_USER_STREET_NUMBER'));
+        this.cy.get('[name="invadr[oxuser__oxzip]"]').type(Cypress.env('TESTS_SHOP_USER_ZIP'));
+        this.cy.get('[name="invadr[oxuser__oxcity]"]').type(Cypress.env('TESTS_SHOP_USER_LOCATION'));
+        this.cy.get('#invCountrySelect').first().select(1);
+
+        this.cy.get('#userFormSubmit').first().click();
+    }
+}

tests/cypress/page/StartPage.ts

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+export class StartPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    putFirstNewItemInBasket() {
+        this.cy.get('.product-img-wrapper a').first().scrollIntoView().click({force: true})
+        this.cy.get('#toBasket').click();
+        this.cy.get('.btn.btn-minibasket').first().click();
+        this.cy.get('.modal-dialog .modal-body a').first().click();
+    }
+}

tests/cypress/page/ThankYouPage.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+export class ThankYouPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    assertOrderCompleted() {
+        this.cy.get('#thankyouPage').should('have.id', 'thankyouPage');
+    }
+}

tests/cypress/page/UserPage.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+export class UserPage {
+    cy: Cypress.cy;
+
+    constructor(cy: Cypress.Chainable)
+    {
+        this.cy = cy;
+    }
+
+    clickRegisterButton() {
+        this.cy.get('#optionRegistration button').first().click();
+    }
+}

tests/cypress/plugins/index.js

@@ -0,0 +1,9 @@
+const webpack = require('@cypress/webpack-preprocessor');
+
+module.exports = (on, config) => {
+    const options = {
+        webpackOptions: require('../../webpack.config'),
+    };
+
+    on('file:preprocessor', webpack(options));
+};

tests/cypress/service/PageFactoryService.ts

@@ -0,0 +1,27 @@
+import {OrderConfirmPage} from "../page/OrderConfirmPage";
+import {PaymentPage} from "../page/PaymentPage";
+import {RegisterPage} from "../page/RegisterPage";
+import {StartPage} from "../page/StartPage";
+import {ThankYouPage} from "../page/ThankYouPage";
+import {UserPage} from "../page/UserPage";
+
+export class PageFactoryService {
+    static getOrderConfirmPage(cy: Cypress.Chainable): OrderConfirmPage {
+        return new OrderConfirmPage(cy);
+    }
+    static getPaymentPage(cy: Cypress.Chainable): PaymentPage {
+        return new PaymentPage(cy);
+    }
+    static getRegisterPage(cy: Cypress.Chainable): RegisterPage {
+        return new RegisterPage(cy);
+    }
+    static getStartPage(cy: Cypress.Chainable): StartPage {
+        return new StartPage(cy);
+    }
+    static getThankYouPage(cy: Cypress.Chainable): ThankYouPage {
+        return new ThankYouPage(cy);
+    }
+    static getUserPage(cy: Cypress.Chainable): UserPage {
+        return new UserPage(cy);
+    }
+}

tests/cypress/service/ShopDomainService.ts

@@ -0,0 +1,5 @@
+export class ShopDomainService {
+    static getShopUrl() {
+        return 'https://' + Cypress.env('TESTS_SHOP_DOMAIN');
+    }
+}

tests/cypress/service/UniqueEmailService.ts

@@ -0,0 +1,7 @@
+export class UniqueEmailService {
+    static generateUniqueEmail(email: string) {
+        const [localPart, domain] = email.split('@');
+        const uniquePostfix = Date.now();
+        return `${localPart}+${uniquePostfix}@${domain}`;
+    }
+}

tests/defineCypressVars.sh.dist

@@ -0,0 +1,9 @@
+export CYPRESS_TESTS_SHOP_DOMAIN='paul.oxiddev.de'
+export CYPRESS_TESTS_SHOP_USER_NAME='[email protected]'
+export CYPRESS_TESTS_SHOP_USER_PASSWORD='oxidoxid'
+export CYPRESS_TESTS_SHOP_USER_FIRST_NAME='Test'
+export CYPRESS_TESTS_SHOP_USER_LAST_NAME='Shoper'
+export CYPRESS_TESTS_SHOP_USER_STREET='Teststreet'
+export CYPRESS_TESTS_SHOP_USER_STREET_NUMBER='1'
+export CYPRESS_TESTS_SHOP_USER_ZIP='12345'
+export CYPRESS_TESTS_SHOP_USER_LOCATION='Testcity'

tests/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES6",                         // Set the JavaScript version to ES6
+    "module": "CommonJS",                    // Set the module format to CommonJS (which Cypress uses)
+    "strict": true,                          // Enable strict type-checking options
+    "esModuleInterop": true,                 // Ensure compatibility between TypeScript and CommonJS modules
+    "skipLibCheck": true,                    // Skip type checking for declaration files
+    "resolveJsonModule": true                // Enable importing of JSON modules
+  },
+  "include": [
+    "cypress/**/*.ts",
+    "node_modules/cypress/types/**/*.d.ts"
+  ]
+}

tests/webpack.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    resolve: {
+        extensions: ['.ts', '.js'],  // Make sure to include '.ts'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+};