Merge pull request #8874 from weseek/support/add-test-for-installer

support: Add playwright test for installer

.github/workflows/ci-app-prod.yml

@@ -49,7 +49,7 @@ concurrency:
 jobs:
 
   test-prod-node18:
-    uses: weseek/growi/.github/workflows/reusable-app-prod.yml@master
+    uses: weseek/growi/.github/workflows/reusable-app-prod.yml@support/add-test-for-installer
     with:
       node-version: 18.x
       skip-e2e-test: true
@@ -58,7 +58,7 @@ jobs:
 
 
   test-prod-node20:
-    uses: weseek/growi/.github/workflows/reusable-app-prod.yml@master
+    uses: weseek/growi/.github/workflows/reusable-app-prod.yml@support/add-test-for-installer
     with:
       node-version: 20.x
       skip-e2e-test: ${{ contains( github.event.pull_request.labels.*.name, 'dependencies' ) }}

.github/workflows/ci-app.yml

@@ -44,10 +44,9 @@ jobs:
           path: |
             **/node_modules
             !**/node_modules/.cache/turbo
-          key: node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+          key: node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
+            node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-
 
       - name: Cache/Restore dist
         uses: actions/cache@v4
@@ -56,9 +55,8 @@ jobs:
             **/.turbo
             **/dist
             **/node_modules/.cache/turbo
-          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ github.sha }}
+          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.sha }}
           restore-keys: |
-            dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
             dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
 
       - name: Install dependencies
@@ -110,10 +108,9 @@ jobs:
           path: |
             **/node_modules
             !**/node_modules/.cache/turbo
-          key: node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+          key: node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
+            node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-
 
       - name: Cache/Restore dist
         uses: actions/cache@v4
@@ -122,9 +119,8 @@ jobs:
             **/.turbo
             **/dist
             **/node_modules/.cache/turbo
-          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ github.sha }}
+          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.sha }}
           restore-keys: |
-            dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
             dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
 
       - name: Install dependencies
@@ -186,10 +182,10 @@ jobs:
           path: |
             **/node_modules
             !**/node_modules/.cache/turbo
-          key: node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+          key: node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
-            node_modules-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
+            node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-
+            node_modules-app-devdependencies-${{ runner.OS }}--node${{ matrix.node-version }}-
 
       - name: Cache/Restore dist
         uses: actions/cache@v4
@@ -198,9 +194,8 @@ jobs:
             **/.turbo
             **/dist
             **/node_modules/.cache/turbo
-          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-${{ github.sha }}
+          key: dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.sha }}
           restore-keys: |
-            dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-${{ github.ref_name }}-
             dist-ci-app-${{ runner.OS }}-node${{ matrix.node-version }}-
 
       - name: Install dependencies

.github/workflows/reusable-app-prod.yml

@@ -53,9 +53,8 @@ jobs:
         path: |
           **/node_modules
           !**/node_modules/.cache/turbo
-        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
           node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-
 
     - name: Install dependencies
@@ -71,9 +70,8 @@ jobs:
           **/dist
           **/node_modules/.cache/turbo
           ${{ github.workspace }}/apps/app/.next
-        key: dist-app-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ github.sha }}
+        key: dist-app-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.sha }}
         restore-keys: |
-          dist-app-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
           dist-app-prod-${{ runner.OS }}-node${{ inputs.node-version }}-
 
     - name: Build
@@ -166,9 +164,8 @@ jobs:
         path: |
           **/node_modules
         # shared key with build-prod
-        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
           node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-
 
     - name: Install dependencies
@@ -216,7 +213,7 @@ jobs:
       fail-fast: false
       matrix:
         # List string expressions that is comma separated ids of tests in "test/cypress/integration"
-        spec-group: ['10', '20', '21', '22', '23', '30', '40', '50', '60']
+        spec-group: ['20', '21', '22', '23', '30', '40', '50', '60']
 
     services:
       mongodb:
@@ -257,11 +254,10 @@ jobs:
       with:
         path: |
           **/node_modules
-        # shared key with ci-app.yml
-        key: node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+        # saved key by build-prod
+        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-
+          node_modules-app-build-prod-${{ runner.OS }}--node${{ inputs.node-version }}-
 
     - name: Cache/Restore Cypress files
       uses: actions/cache@v4
@@ -351,12 +347,14 @@ jobs:
     if: ${{ !inputs.skip-e2e-test }}
 
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:latest
 
-    # strategy:
-    #   fail-fast: false
-    #   matrix:
-    #     # List string expressions that is comma separated ids of tests in "test/cypress/integration"
-    #     spec-group: ['10', '20', '21', '22', '23', '30', '40', '50', '60']
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
+        shard: [1/2, 2/2]
 
     services:
       mongodb:
@@ -384,21 +382,10 @@ jobs:
       with:
         path: |
           **/node_modules
-        # shared key with ci-app.yml
-        key: node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-
-
-    - name: Cache/Restore Playwright files
-      uses: actions/cache@v4
-      id: playwright-cache
-      with:
-        path: |
-          ~/.cache/ms-playwright
-        key: deps-for-playwright-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
+        # saved key by build-prod
+        key: node_modules-app-build-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          deps-for-playwright-${{ runner.OS }}-node${{ inputs.node-version }}-
+          node_modules-app-build-prod-${{ runner.OS }}--node${{ inputs.node-version }}-
 
     - name: Install dependencies
       run: |
@@ -406,13 +393,8 @@ jobs:
         yarn --frozen-lockfile
 
     - name: Install Playwright browsers
-      if: steps.playwright-cache.outputs.cache-hit != 'true'
       run: |
-        yarn playwright install
-
-    - name: Install Playwright system dependencies
-      run: |
-        sudo yarn playwright install-deps
+        yarn playwright install --with-deps ${{ matrix.browser }}
 
     - name: Download production files artifact
       uses: actions/download-artifact@v4
@@ -428,8 +410,17 @@ jobs:
       run: |
         cat config/ci/.env.local.for-ci >> .env.production.local
 
+    - name: Playwright Run (--project=chromium/installer)
+      if: ${{ matrix.browser == 'chromium' }}
+      working-directory: ./apps/app
+      run: |
+        yarn playwright test --project=chromium/installer
+      env:
+        HOME: /root # ref: https://github.com/microsoft/playwright/issues/6500
+        MONGO_URI: mongodb://mongodb:27017/growi-playwright-installer
+        ELASTICSEARCH_URI: http://localhost:${{ job.services.elasticsearch.ports['9200'] }}/growi
+
     - name: Copy dotenv file for automatic installation
-      # if: ${{ matrix.spec-group != '10' }}
       working-directory: ./apps/app
       run: |
         cat config/ci/.env.local.for-auto-install >> .env.production.local
@@ -443,9 +434,10 @@ jobs:
     - name: Playwright Run
       working-directory: ./apps/app
       run: |
-        yarn playwright test
+        yarn playwright test --project=${{ matrix.browser }} --shard=${{ matrix.shard }}
       env:
-        MONGO_URI: mongodb://localhost:${{ job.services.mongodb.ports['27017'] }}/growi-test-playwright
+        HOME: /root # ref: https://github.com/microsoft/playwright/issues/6500
+        MONGO_URI: mongodb://mongodb:27017/growi-playwright
         ELASTICSEARCH_URI: http://localhost:${{ job.services.elasticsearch.ports['9200'] }}/growi
 
     - name: Slack Notification

.github/workflows/reusable-app-reg-suit.yml

@@ -65,11 +65,10 @@ jobs:
       with:
         path: |
           **/node_modules
-        # shared key with ci-app.yml
-        key: node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}
+        # saved key by launch-prod
+        key: node_modules-app-launch-prod-${{ runner.OS }}-node${{ inputs.node-version }}-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-${{ github.ref_name }}-
-          node_modules-ci-app-${{ runner.OS }}-node${{ inputs.node-version }}-
+          node_modules-app-launch-prod-${{ runner.OS }}--node${{ inputs.node-version }}-
 
     - name: Install dependencies
       run: |

apps/app/playwright.config.ts

@@ -55,24 +55,35 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     // Setup project
-    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    { name: 'setup', testMatch: /.*\.setup\.ts/, testIgnore: /auth\.setup\.ts/ },
+    { name: 'auth', testMatch: /auth\.setup\.ts/ },
 
     {
-      name: 'chromium',
+      name: 'chromium/installer',
       use: { ...devices['Desktop Chrome'] },
+      testMatch: /10-installer\/.*\.spec\.ts/,
       dependencies: ['setup'],
     },
 
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      testIgnore: /10-installer\/.*\.spec\.ts/,
+      dependencies: ['setup', 'auth'],
+    },
+
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
-      dependencies: ['setup'],
+      testIgnore: /10-installer\/.*\.spec\.ts/,
+      dependencies: ['setup', 'auth'],
     },
 
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
-      dependencies: ['setup'],
+      testIgnore: /10-installer\/.*\.spec\.ts/,
+      dependencies: ['setup', 'auth'],
     },
 
     /* Test against mobile viewports. */

apps/app/playwright/10-installer/install.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test';
+
+test('Installer', async({ page }) => {
+  await page.goto('/');
+  await page.waitForURL('/installer');
+
+  // show installer form
+  await expect(page.getByTestId('installerForm')).toBeVisible();
+
+  // choose Japanese
+  await page.getByTestId('dropdownLanguage').click();
+  await page.getByTestId('dropdownLanguageMenu-ja_JP').click();
+  await expect(page.getByRole('textbox', { name: 'ユーザーID' })).toBeVisible();
+  await expect(page.getByRole('textbox', { name: 'ユーザーID' })).toHaveAttribute('placeholder', 'ユーザーID');
+
+  // choose Chinese
+  await page.getByTestId('dropdownLanguage').click();
+  await page.getByTestId('dropdownLanguageMenu-zh_CN').click();
+  await expect(page.getByRole('textbox', { name: '用户ID' })).toBeVisible();
+  await expect(page.getByRole('textbox', { name: '用户ID' })).toHaveAttribute('placeholder', '用户ID');
+  // // choose English
+  await page.getByTestId('dropdownLanguage').click();
+  await page.getByTestId('dropdownLanguageMenu-en_US').click();
+  await expect(page.getByRole('textbox', { name: 'User ID' })).toBeVisible();
+  await expect(page.getByRole('textbox', { name: 'User ID' })).toHaveAttribute('placeholder', 'User ID');
+
+  await page.getByRole('textbox', { name: 'User ID' }).focus();
+
+  // fill form
+  await page.getByLabel('User ID').fill('admin');
+  await page.getByLabel('User ID').press('Tab');
+  await expect(page.getByRole('textbox', { name: 'Name' })).toBeFocused();
+
+  await page.getByLabel('Name').fill('Admin');
+  await page.getByLabel('Name').press('Tab');
+  await expect(page.getByRole('textbox', { name: 'Email' })).toBeFocused();
+
+  await page.getByLabel('Email').fill('admin@example.com');
+  await page.getByLabel('Email').press('Tab');
+  await expect(page.getByRole('textbox', { name: 'Password' })).toBeFocused();
+
+  await page.getByLabel('Password').fill('adminadmin');
+  await page.getByLabel('Password').press('Enter');
+
+  await page.waitForURL('/', { timeout: 20000 });
+  await expect(page).toHaveTitle(/\/ - GROWI/);
+});

apps/app/src/components/InstallerForm.tsx

@@ -170,11 +170,11 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className={`input-group mb-3${hasErrorClass}`}>
-            <span className="p-2 text-white opacity-75">
-              <span className="material-symbols-outlined">person</span>
-            </span>
+            <label className="p-2 text-white opacity-75" aria-label={t('User ID')} htmlFor="tiUsername">
+              <span className="material-symbols-outlined" aria-hidden>person</span>
+            </label>
             <input
-              data-testid="tiUsername"
+              id="tiUsername"
               type="text"
               className="form-control rounded"
               placeholder={t('User ID')}
@@ -186,11 +186,11 @@ const InstallerForm = memo((): JSX.Element => {
           <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
-            <span className="p-2 text-white opacity-75">
-              <span className="material-symbols-outlined">sell</span>
-            </span>
+            <label className="p-2 text-white opacity-75" aria-label={t('Name')} htmlFor="tiName">
+              <span className="material-symbols-outlined" aria-hidden>sell</span>
+            </label>
             <input
-              data-testid="tiName"
+              id="tiName"
               type="text"
               className="form-control rounded"
               placeholder={t('Name')}
@@ -200,11 +200,11 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="p-2 text-white opacity-75">
-              <span className="material-symbols-outlined">mail</span>
-            </span>
+            <label className="p-2 text-white opacity-75" aria-label={t('Email')} htmlFor="tiEmail">
+              <span className="material-symbols-outlined" aria-hidden>mail</span>
+            </label>
             <input
-              data-testid="tiEmail"
+              id="tiEmail"
               type="email"
               className="form-control rounded"
               placeholder={t('Email')}
@@ -214,11 +214,11 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="p-2 text-white opacity-75">
-              <span className="material-symbols-outlined">lock</span>
-            </span>
+            <label className="p-2 text-white opacity-75" aria-label={t('Password')} htmlFor="tiPassword">
+              <span className="material-symbols-outlined" aria-hidden>lock</span>
+            </label>
             <input
-              data-testid="tiPassword"
+              id="tiPassword"
               type="password"
               className="form-control rounded"
               placeholder={t('Password')}
@@ -229,19 +229,18 @@ const InstallerForm = memo((): JSX.Element => {
 
           <div className="input-group mt-4 justify-content-center">
             <button
-              data-testid="btnSubmit"
               type="submit"
               className="btn btn-secondary btn-register col-6 d-flex"
               disabled={isLoading}
             >
-              <span>
+              <span aria-hidden>
                 {isLoading ? (
                   <LoadingSpinner />
                 ) : (
                   <span className="material-symbols-outlined">person_add</span>
                 )}
               </span>
-              <span className="flex-grow-1">{ t('Create') }</span>
+              <label className="flex-grow-1">{ t('Create') }</label>
             </button>
           </div>
 

apps/app/test/cypress/e2e/10-install/10-install--install.cy.ts

@@ -1,58 +0,0 @@
-describe('Install', () => {
-  const ssPrefix = 'installer-';
-
-  beforeEach(() => {
-    cy.visit('/');
-    cy.getByTestid('installerForm').should('be.visible');
-  });
-
-  it('Successfully show installer', () => {
-    cy.screenshot(`${ssPrefix}-redirect-to-installer-page`);
-  });
-
-  it('Sccessfully choose languages', () => {
-    cy.getByTestid('dropdownLanguage').should('be.visible');
-
-    // open Language Dropdown, wait for language data to load
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('dropdownLanguage').click();
-      // wati until
-      return cy.get('.dropdown-menu').then($elem => $elem.is(':visible'));
-    });
-
-    cy.getByTestid('dropdownLanguageMenu-en_US').click();
-    cy.get('.alert-success').should('be.visible');
-    cy.screenshot(`${ssPrefix}-select-en_US`);
-
-    cy.getByTestid('dropdownLanguage').click();
-    cy.get('.dropdown-menu').should('be.visible');
-    cy.getByTestid('dropdownLanguageMenu-ja_JP').click();
-    cy.get('.alert-success').should('be.visible');
-    cy.screenshot(`${ssPrefix}-select-ja_JP`);
-
-    cy.getByTestid('dropdownLanguage').click();
-    cy.get('.dropdown-menu').should('be.visible');
-    cy.getByTestid('dropdownLanguageMenu-zh_CN').click();
-    cy.get('.alert-success').should('be.visible');
-    cy.screenshot(`${ssPrefix}-select-zh_CN`);
-  });
-
-  it('Successfully installing and redirect to root page', () => {
-    cy.fixture("user-admin.json").then(user => {
-      cy.getByTestid('tiUsername').type(user.username);
-      cy.getByTestid('tiName').type(user.name);
-      cy.getByTestid('tiEmail').type(user.email);
-      cy.getByTestid('tiPassword').type(user.password);
-    });
-    cy.screenshot(`${ssPrefix}-before-submit`);
-
-    cy.getByTestid('btnSubmit').click();
-
-    // Redirects to the root page take a long time (more than 10000ms)
-    cy.getByTestid('grw-pagetree-item-container', { timeout: 20000 }).should('be.visible');
-
-    cy.waitUntilSkeletonDisappear();
-    cy.screenshot(`${ssPrefix}-installed-redirect-to-root-page`);
-  });
-});