feat: e2e testing setup!

.github/helper/install.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+
+set -e
+
+cd ~ || exit
+
+sudo apt update
+sudo apt install libcups2-dev redis-server mariadb-client-10.6
+
+pip install frappe-bench
+
+git clone "https://github.com/frappe/frappe" --branch "develop" --depth 1
+bench init --skip-assets --frappe-path ~/frappe --python "$(which python)" frappe-bench
+
+mkdir ~/frappe-bench/sites/changemakers.localhost
+
+cp -r "${GITHUB_WORKSPACE}/.github/helper/site_config_mariadb.json" ~/frappe-bench/sites/changemakers.localhost/site_config.json
+
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "SET GLOBAL character_set_server = 'utf8mb4'";
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'";
+
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "CREATE DATABASE test_frappe";
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "CREATE USER 'test_frappe'@'localhost' IDENTIFIED BY 'test_frappe'";
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "GRANT ALL PRIVILEGES ON \`test_frappe\`.* TO 'test_frappe'@'localhost'";
+
+mariadb --host 127.0.0.1 --port 3306 -u root -ptravis -e "FLUSH PRIVILEGES";
+
+
+install_whktml() {
+    wget -O /tmp/wkhtmltox.tar.xz https://github.com/frappe/wkhtmltopdf/raw/master/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
+    tar -xf /tmp/wkhtmltox.tar.xz -C /tmp
+    sudo mv /tmp/wkhtmltox/bin/wkhtmltopdf /usr/local/bin/wkhtmltopdf
+    sudo chmod o+x /usr/local/bin/wkhtmltopdf
+}
+install_whktml &
+
+cd ~/frappe-bench || exit
+
+sed -i 's/watch:/# watch:/g' Procfile
+sed -i 's/schedule:/# schedule:/g' Procfile
+sed -i 's/socketio:/# socketio:/g' Procfile
+sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
+
+bench get-app frappe_dynamic_og "${GITHUB_WORKSPACE}"
+
+bench start &> bench_run_logs.txt &
+
+CI=Yes bench build --force --production &
+build_pid=$!
+
+bench --site changemakers.localhost reinstall --yes
+bench --site changemakers.localhost install-app frappe_dynamic_og
+
+wait $build_pid

.github/helper/site_config_mariadb.json

@@ -0,0 +1,18 @@
+{
+    "db_host": "127.0.0.1",
+    "db_port": 3306,
+    "db_name": "test_frappe",
+    "db_password": "test_frappe",
+    "allow_tests": true,
+    "db_type": "mariadb",
+    "auto_email_id": "test@example.com",
+    "mail_server": "smtp.example.com",
+    "mail_login": "test@example.com",
+    "mail_password": "test",
+    "admin_password": "admin",
+    "root_login": "root",
+    "root_password": "travis",
+    "host_name": "http://f-fog.test:8000",
+    "monitor": 1,
+    "server_script_enabled": true
+}

.github/workflows/playwright.yml

@@ -0,0 +1,96 @@
+name: e2e UI Tests
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+    paths-ignore:
+      - '**.md'
+  pull_request:
+
+
+permissions:
+  contents: read
+
+jobs:
+  tests:
+    timeout-minutes: 120
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    name: Playwright e2e Tests
+
+    services:
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MYSQL_ROOT_PASSWORD: travis
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v2
+
+      - name: Setup Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: "3.11"
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          check-latest: true
+
+      - name: Cache pip
+        uses: actions/cache@v2
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py', '**/setup.cfg') }}
+          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@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install
+        run: bash ${GITHUB_WORKSPACE}/.github/helper/install.sh
+
+      - name: Add Test Site to Hosts
+        run: |
+          echo "127.0.0.1 changemakers.localhost" | sudo tee -a /etc/hosts
+
+      - name: Site Setup
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site changemakers.localhost execute frappe.utils.install.complete_setup_wizard
+          bench --site changemakers.localhost execute frappe.tests.ui_test_helpers.create_test_user
+
+      - name: Install Playwright Browsers
+        working-directory: /home/runner/frappe-bench/apps/frappe_dynamic_og
+        run: yarn playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: /home/runner/frappe-bench/apps/frappe_dynamic_og
+        run: yarn playwright test
+
+      - name: Upload Playwright Tests Report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: /home/runner/frappe-bench/apps/frappe_dynamic_og/playwright-report/
+          retention-days: 30

.gitignore

@@ -9,4 +9,7 @@ changemakers/public/frontend
 changemakers/www/c.html
 node_modules/
 build
-frontend/frappe-ui
+frontend/frappe-ui
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -4,3 +4,11 @@
   </a>
 </p>
 <h1 style="font-size: 16px" align="center">For the Real Changemakers.</h1>
+
+
+<p align="center">
+
+![Server Tests](https://github.com/frappe/changemakers/actions/workflows/ci.yml/badge.svg)
+![e2e Tests](https://github.com/frappe/changemakers/actions/workflows/playwright.yml/badge.svg)
+
+</p>

e2e/auth.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+
+test("user can login", async ({ page }) => {
+  await page.goto("http://changemakers.localhost:8000/c");
+
+  await page.getByPlaceholder("johndoe@mail.com").click();
+  await page.getByPlaceholder("johndoe@mail.com").fill("Administrator");
+  await page.getByPlaceholder("johndoe@mail.com").press("Tab");
+  await page.getByPlaceholder("••••••").fill("admin");
+  await page.getByRole("button", { name: "Log In" }).click();
+
+  const dashboardLink = await page.getByText("Dashboard");
+  const accountLink = await page.getByText("Account");
+
+  expect(dashboardLink).toBeDefined();
+  expect(accountLink).toBeDefined();
+});

e2e/example.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test("test", async ({ page }) => {
+  await page.goto("http://changemakers.localhost:8000/c");
+
+  await page.getByPlaceholder('johndoe@mail.com').click();
+  await page.getByPlaceholder('johndoe@mail.com').fill('Administrator');
+  await page.getByPlaceholder('johndoe@mail.com').press('Tab');
+  await page.getByPlaceholder('••••••').fill('admin');
+  await page.getByRole('button', { name: 'Log In' }).click();
+  await page.getByText('Dashboard').click();
+  await page.getByText('Account').click();
+});
+

package.json

@@ -1,12 +1,15 @@
 {
-    "private": true,
-    "aworkspaces": [
-        "frontend",
-        "frappe-ui"
-    ],
-    "scripts": {
-        "postinstall": "cd frontend && yarn install",
-        "dev": "cd frontend && yarn dev",
-        "build": "cd frontend && yarn build"
-    }
-}
+  "private": true,
+  "aworkspaces": [
+    "frontend",
+    "frappe-ui"
+  ],
+  "scripts": {
+    "postinstall": "cd frontend && yarn install",
+    "dev": "cd frontend && yarn dev",
+    "build": "cd frontend && yarn build"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.29.2"
+  }
+}

playwright.config.ts

@@ -0,0 +1,100 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './e2e',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* 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: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* 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'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    /* 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: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;