Merge pull request #5818 from nextcloud-libraries/chore/playwright

ci: Migrate component tests to Playwright

.eslintrc.json

@@ -11,9 +11,6 @@
 	"extends": [
 		"@nextcloud/eslint-config/vue3"
 	],
-	"plugins": [
-		"cypress"
-	],
 	"parserOptions": {
 		"babelOptions": {
 			"plugins": [

.github/workflows/command-playwright-update.yml

@@ -0,0 +1,104 @@
+# SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: MIT
+
+name: Command update Playwright snapshots
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  init:
+    runs-on: ubuntu-latest
+
+    # On pull requests and if the comment starts with `/update-snapshots`
+    if: github.event.issue.pull_request != '' && startsWith(github.event.comment.body, '/update-snapshots')
+
+    outputs:
+      arg1: ${{ steps.command.outputs.arg1 }}
+      head_ref: ${{ steps.comment-branch.outputs.head_ref }}
+
+    steps:
+      - name: Add reaction on start
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          token: ${{ secrets.COMMAND_BOT_PAT }}
+          repository: ${{ github.event.repository.full_name }}
+          comment-id: ${{ github.event.comment.id }}
+          reaction-type: "+1"
+
+      - name: Parse command
+        uses: skjnldsv/parse-command-comment@master
+        id: command
+
+      - name: Init branch
+        uses: xt0rted/pull-request-comment-branch@v2
+        id: comment-branch
+
+  process:
+    runs-on: ubuntu-latest
+    needs: init
+
+    steps:
+      - name: Checkout ${{ needs.init.outputs.head_ref }}
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.COMMAND_BOT_PAT }}
+          fetch-depth: 0
+          ref: ${{ needs.init.outputs.head_ref }}
+
+      - name: Setup git
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "nextcloud-command"
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@v3
+        id: package-engines-versions
+        with:
+          fallbackNode: '^20'
+          fallbackNpm: '^10'
+
+      - name: Set up node ${{ steps.package-engines-versions.outputs.nodeVersion }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.package-engines-versions.outputs.nodeVersion }}
+          cache: npm
+
+      - name: Set up npm ${{ steps.package-engines-versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.package-engines-versions.outputs.npmVersion }}"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Update snapshots
+        run: npm run update:snapshots
+
+      - name: Commit and push default
+        if: ${{ needs.init.outputs.arg1 != 'fixup' && needs.init.outputs.arg1 != 'amend' }}
+        run: |
+          git add .
+          git commit --signoff -m 'Updating l10n asset'
+          git push origin ${{ needs.init.outputs.head_ref }}
+
+      - name: Commit and push fixup
+        if: ${{ needs.init.outputs.arg1 == 'fixup' }}
+        run: |
+          git add .
+          git commit --fixup=HEAD --signoff
+          git push origin ${{ needs.init.outputs.head_ref }}
+
+      - name: Commit and push amend
+        if: ${{ needs.init.outputs.arg1 == 'amend' }}
+        run: |
+          git add .
+          git commit --amend --no-edit --signoff
+          git push --force origin ${{ needs.init.outputs.head_ref }}
+
+      - name: Add reaction on failure
+        uses: peter-evans/create-or-update-comment@v4
+        if: failure()
+        with:
+          token: ${{ secrets.COMMAND_BOT_PAT }}
+          repository: ${{ github.event.repository.full_name }}
+          comment-id: ${{ github.event.comment.id }}
+          reaction-type: "-1"

.github/workflows/playwright.yml

@@ -0,0 +1,109 @@
+# SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: MIT
+
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main, next ]
+  pull_request:
+    branches: [ main, next ]
+jobs:
+  playwright-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2]
+        shardTotal: [2]
+
+    outputs:
+      nodeVersion: ${{ steps.versions.outputs.nodeVersion }}
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Read package.json node and npm engines version
+      uses: skjnldsv/read-package-engines-version-actions@v3
+      id: versions
+      with:
+        fallbackNode: '^20'
+        fallbackNpm: '^10'
+
+    - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+    - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+      run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Install Playwright browsers
+      run: npx playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: npm run test:component -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+    - name: Upload blob report to GitHub Actions Artifacts
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: blob-report-${{ matrix.shardIndex }}
+        path: blob-report
+        retention-days: 1
+
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [playwright-tests]
+
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ needs.playwright-tests.outputs.nodeVersion }}
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Download blob reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: all-blob-reports
+        pattern: blob-report-*
+        merge-multiple: true
+
+    - name: Merge into HTML Report
+      run: npx playwright merge-reports --reporter html,github ./all-blob-reports
+
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: html-report--attempt-${{ github.run_attempt }}
+        path: playwright-report
+        retention-days: 7
+
+    - name: Show the logs
+      run: |
+        echo 'To view the report:'
+        echo '  1. Extract the folder from the zip file'
+        echo '  2. run "npx playwright show-report name-of-my-extracted-playwright-report"'
+
+  summary:
+    permissions:
+      contents: none
+    runs-on: ubuntu-latest
+    needs: [playwright-tests]
+
+    if: always()
+
+    name: playwright-test-summary
+
+    steps:
+      - name: Summary status
+        run: if ${{ needs.playwright-tests.result != 'success' }}; then exit 1; fi

.github/workflows/server-styling-update.yml

@@ -21,6 +21,7 @@ jobs:
           curl https://nextcloud.github.io/server/apps/theming/css/default.css | sed 's|/apps/theming/img|./img|g' > default.css
           # Fix icons and img css import
           curl https://nextcloud.github.io/server/core/css/server.css | sed 's|../../dist/icons.css|./icons.css|g' | sed 's|../img|./img|g' > server.css
+          curl https://nextcloud.github.io/server/core/css/apps.css | sed 's|../img|./img|g' > apps.css
           curl https://nextcloud.github.io/server/dist/icons.css --output icons.css
 
       - name: Create Pull Request

.gitignore

@@ -27,9 +27,8 @@ coverage
 styleguide/build/
 styleguide/index.html
 
-# Cypress files
-cypress/videos
-cypress/screenshots
-cypress/snapshots/actual
-cypress/snapshots/diff
-cypress/snapshots/base/**/*-base-*
+# Playwright files
+/test-results/
+/playwright-report/
+/blob-report/
+/tests/component/setup/.cache/

REUSE.toml

@@ -12,7 +12,11 @@ SPDX-FileCopyrightText = "Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["styleguide/assets/dark.css", "styleguide/assets/icons.css", "styleguide/assets/server.css", "cypress/snapshots/**", "tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap"]
+path = [
+	"styleguide/assets/apps.css", "styleguide/assets/dark.css", "styleguide/assets/icons.css", "styleguide/assets/server.css",
+	"tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap",
+	"tests/component/snapshots/**"
+]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"