ci: Init automated UI tests

.github/helper/install_dependencies.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -e
+
+echo "Setting Up System Dependencies..."
+
+sudo apt update
+sudo apt remove mysql-server mysql-client
+sudo apt install libcups2-dev redis-server mariadb-client-10.6
+
+install_wkhtmltopdf() {
+  wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb
+  sudo apt install ./wkhtmltox_0.12.6-1.focal_amd64.deb
+}
+install_wkhtmltopdf &

.github/workflows/ci.yml

@@ -4,13 +4,9 @@ name: CI
 on:
   push:
     branches:
-      - develop
+      - master
   pull_request:
 
-concurrency:
-  group: develop-builder-${{ github.event.number }}
-  cancel-in-progress: true
-
 jobs:
   tests:
     runs-on: ubuntu-latest
@@ -77,6 +73,7 @@ jobs:
 
       - name: Setup
         run: |
+          bash ${GITHUB_WORKSPACE}/.github/helper/install_dependencies.sh
           pip install frappe-bench
           bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
           mysql --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"

.github/workflows/on_release.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
       - name: Setup dependencies
         run: |
           npm install @semantic-release/git @semantic-release/exec --no-save
@@ -29,4 +29,4 @@ jobs:
           GIT_AUTHOR_EMAIL: "[email protected]"
           GIT_COMMITTER_NAME: "Frappe PR Bot"
           GIT_COMMITTER_EMAIL: "[email protected]"
-        run: npx semantic-release
+        run: npx semantic-release

.github/workflows/ui-tests.yml

@@ -0,0 +1,118 @@
+name: UI Test
+
+on:
+  pull_request:
+  push:
+    branches: master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    name: UI Tests (Cypress)
+
+    services:
+      redis-cache:
+        image: redis:alpine
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      redis-socketio:
+        image: redis:alpine
+        ports:
+          - 12000:6379
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MARIADB_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v3
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          check-latest: true
+
+      - name: Add to Hosts
+        run: |
+          echo "127.0.0.1 builder.test" | sudo tee -a /etc/hosts
+      - name: Cache pip
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-ui-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-ui-
+      - name: Cache cypress binary
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress
+
+      - name: Setup
+        run: |
+          bash ${GITHUB_WORKSPACE}/.github/helper/install_dependencies.sh
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          mysql --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mysql --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench get-app builder $GITHUB_WORKSPACE
+          bench new-site --db-root-password root --admin-password admin builder.test
+          bench --site builder.test install-app builder
+          echo "Starting Bench..."
+          cd ~/frappe-bench
+          sed -i 's/^watch:/# watch:/g' Procfile
+          sed -i 's/^schedule:/# schedule:/g' Procfile
+          bench start &> ~/frappe-bench/bench_start.log &
+        env:
+          CI: 'Yes'
+
+      - name: Show bench output
+        run: cat ~/frappe-bench/bench_start.log || true
+
+      - name: Site Setup
+        run: |
+          cd ~/frappe-bench/
+          bench --site builder.test execute frappe.utils.install.complete_setup_wizard
+          bench --site builder.test execute frappe.tests.ui_test_helpers.create_test_user
+
+      - name: UI Tests
+        run: cd ~/frappe-bench/apps/builder/frontend && yarn test
+
+      - name: Stop server
+        run: |
+          ps -ef | grep "[f]rappe serve" | awk '{print $2}' | xargs kill -s SIGINT
+          sleep 5
+      - name: Show bench output
+        if: ${{ always() }}
+        run: cat ~/frappe-bench/bench_start.log || true

builder/__init__.py

@@ -1,3 +1,3 @@
 
-__version__ = '1.3.1'
+__version__ = '1.4.0'
 

frontend/cypress.config.js

@@ -0,0 +1,13 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  projectId: "jvejd7",
+	e2e: {
+		baseUrl: "http://builder.test:8000",
+		adminPassword: "admin",
+	},
+	retries: {
+		runMode: 2,
+		openMode: 0,
+	},
+});

frontend/cypress/e2e/landing.cy.js

@@ -0,0 +1,8 @@
+describe("Builder Landing", () => {
+	before(() => {
+		cy.login();
+	});
+	it("Open builder page", () => {
+		cy.visit("builder/home");
+	});
+});

frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/support/commands.js

@@ -0,0 +1,38 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+Cypress.Commands.add("login", (email, password) => {
+	if (!email) {
+		email = Cypress.config("testUser") || "Administrator";
+	}
+	if (!password) {
+		password = Cypress.config("adminPassword");
+	}
+	cy.request({
+		url: "/api/method/login",
+		method: "POST",
+		body: { usr: email, pwd: password },
+	});
+});

frontend/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build --base=/assets/builder/frontend/ && yarn copy-html-entry",
     "copy-html-entry": "cp ../builder/public/frontend/index.html ../builder/www/builder.html",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test-local": "cypress open --e2e --browser chrome",
+    "test": "npx cypress run --record --key fa50a4df-569e-41bc-8600-850331fd1630"
   },
   "dependencies": {
     "@tiptap/extension-color": "^2.0.4",
@@ -33,6 +35,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "3",
     "autoprefixer": "^10.4.2",
+    "cypress": "^13.3.2",
     "eslint": "^8.38.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.11.0",