chore(demo-playwright): add Playwright

taiga-family · Jul 26, 2023 · 05d87b7 · 05d87b7
1 parent 7b59023
commit 05d87b7
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 124 deletions.
diff --git a/.github/actions/variables/action.yml b/.github/actions/variables/action.yml
@@ -41,8 +41,10 @@ runs:
         export CYPRESS_failOnSnapshotDiff="0"
         export CYPRESS_API_URL="http://localhost:1234/"
         export SNAPSHOTS_PATH="./projects/demo-integrations/cypress/snapshots"
+        export PLAYWRIGHT_SNAPSHOTS_PATH="./projects/demo-playwright/tests-results"
         export SNAPSHOTS_CACHE_KEY="e2e-cache--${{ github.event.pull_request.head.sha || github.sha }}-${{ github.event.number }}"
         export SNAPSHOTS_ARTIFACTS_KEY="e2e-artifacts--${{ github.event.pull_request.head.sha || github.sha }}-${{ github.run_id }}-${{ github.event.number }}"
+        export PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY="playwright-e2e-artifacts--${{ github.event.pull_request.head.sha || github.sha }}-${{ github.run_id }}-${{ github.event.number }}"
 
         if [[ "$IS_FORK" == "false" && "$IS_DEPENDABOT" == "false" ]]; then
             export IS_OWNER_MODE="true"
@@ -74,5 +76,7 @@ runs:
         echo "CYPRESS_failOnSnapshotDiff=$CYPRESS_failOnSnapshotDiff" >> $GITHUB_ENV
         echo "CYPRESS_API_URL=$CYPRESS_API_URL" >> $GITHUB_ENV
         echo "SNAPSHOTS_PATH=$SNAPSHOTS_PATH" >> $GITHUB_ENV
+        echo "PLAYWRIGHT_SNAPSHOTS_PATH=PLAYWRIGHT_SNAPSHOTS_PATH" >> $GITHUB_ENV
         echo "SNAPSHOTS_ARTIFACTS_KEY=$SNAPSHOTS_ARTIFACTS_KEY" >> $GITHUB_ENV
+        echo "PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY=PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY" >> $GITHUB_ENV
         echo "SNAPSHOTS_CACHE_KEY=$SNAPSHOTS_CACHE_KEY" >> $GITHUB_ENV
diff --git a/.github/screenshot-bot.config.toml b/.github/screenshot-bot.config.toml
@@ -1,13 +1,14 @@
 # array of RegExp strings to match workflow names
 # which should be watched by bot
 workflowWithTests = [
-    '.*E2E Summary.*', # all workflows with sub-string "e2e" in their names will be watched by bot
+    '.*E2E*', # all workflows with sub-string "e2e" in their names will be watched by bot
 ]
 
 # array of RegExp strings to match images inside artifacts (by their path or file name)
 # which shows difference between two screenshot and which will be added to bot report comment
 screenshotsDiffsPaths = [
     '.*__diff_output__.*', # it is default cypress folder name into which snapshot diffs are put
+    'tests-results/.*-diff.png'
 ]
 
 # RegExp string to match images inside artifacts (by their path or file name)

diff --git a/.github/workflows/e2e-summary.yml b/.github/workflows/e2e-summary.yml
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -45,21 +45,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        project:
-          [
-            addon-doc,
-            addon-charts,
-            addon-commerce,
-            addon-mobile,
-            addon-preview,
-            addon-table,
-            addon-tablebars,
-            icons,
-            core,
-            deep,
-            demo,
-            kit,
-          ]
+        project: [addon-mobile]
     name: ${{ matrix.project }}
     steps:
       - uses: actions/[email protected]
@@ -100,6 +86,10 @@ jobs:
       - name: Clean up resources
         run: npx kill-port --port ${{ env.NG_SERVER_PORT }}
 
+      - name: Debug output
+        continue-on-error: true
+        run: tree ${{ env.SNAPSHOTS_PATH }}
+
       - name: Upload artifacts / ${{ env.SNAPSHOTS_ARTIFACTS_KEY }}
         uses: actions/[email protected]
         with:
@@ -108,32 +98,63 @@ jobs:
           if-no-files-found: ignore
           retention-days: 1
 
-  result:
+  playwright:
     if: ${{ !contains(github.head_ref , 'release/') }}
-    name: result
-    needs: [cypress]
     runs-on: ubuntu-latest
+    needs: [build-demo]
     steps:
       - uses: actions/[email protected]
       - name: Setup global variables
         uses: ./.github/actions/variables
+      - name: Setup Node.js and Cache
+        uses: ./.github/actions/nodejs
 
-      - name: Download artifacts / ${{ env.SNAPSHOTS_ARTIFACTS_KEY }}
-        continue-on-error: true
-        uses: actions/[email protected]
-        with:
-          name: ${{ env.SNAPSHOTS_ARTIFACTS_KEY }}
-          path: ${{ env.SNAPSHOTS_PATH }}
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
 
-      - name: Upload cache / ${{ env.SNAPSHOTS_CACHE_KEY }}
-        uses: actions/cache/save@v3.3.1
+      - name: Download cache / ${{ env.CACHE_DIST_KEY }}
+        uses: actions/cache/restore@v3.3.1
         with:
-          path: ${{ env.SNAPSHOTS_PATH }}
-          key: ${{ env.SNAPSHOTS_CACHE_KEY }}
+          path: dist/demo
+          key: ${{ env.CACHE_DIST_KEY }}
+
+      - name: Serve ${{ env.DIST }} in background
+        run: npx nx serve-compiled demo --path ${{ env.DIST }} --port ${{ env.NG_SERVER_PORT }}
+
+      - name: Run screenshot tests on ${{ env.DIST }}
+        run: npx nx e2e demo-playwright
+
+      - name: Clean up resources
+        run: npx kill-port --port ${{ env.NG_SERVER_PORT }}
+
+      - name: Download ${{ env.DIST_NEXT }} for serve locally
+        run: |
+          git clone \
+                --depth 1 \
+                --branch snapshots/demo/next/${{ github.base_ref }} \
+                https://github.com/Tinkoff/taiga-ui.git ${{ env.DIST_NEXT }}
+
+      - name: Serve ${{ env.DIST_NEXT }} in background
+        run: npx nx serve-compiled demo --path ${{ env.DIST_NEXT }} --port ${{ env.NG_SERVER_PORT }}
+
+      - name: Run screenshot tests on ${{ env.DIST_NEXT }}
+        continue-on-error: true
+        run: npx nx e2e demo-playwright
+
+      - name: Clean up resources
+        run: npx kill-port --port ${{ env.NG_SERVER_PORT }}
 
       - name: Debug output
         continue-on-error: true
-        run: tree ${{ env.SNAPSHOTS_PATH }}
+        run: tree ${{ env.PLAYWRIGHT_SNAPSHOTS_PATH }}
+
+      - name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
+        uses: actions/[email protected]
+        with:
+          path: ${{ env.PLAYWRIGHT_SNAPSHOTS_PATH }}/**/*-diff.png
+          name: ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
+          if-no-files-found: ignore
+          retention-days: 1
 
 concurrency:
   group: e2e-${{ github.workflow }}-${{ github.ref }}

diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,7 @@ dist
 RELEASE_BODY.md
 *tsbuildinfo
 .angular
+/projects/demo-playwright/tests-results/
+/projects/demo-playwright/tests-report/
+/projects/demo-playwright/snapshots/
+/projects/demo-playwright/playwright/.cache/