ci: isolate performance tests in separate job (#477)

Author: korvin89

.github/workflows/pr-visual-tests-report.yml

@@ -38,12 +38,18 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
           AWS_DEFAULT_REGION: ru-central1
           AWS_EC2_METADATA_DISABLED: true
-        run: aws s3 cp playwright-report s3://playwright-reports/charts/pulls/${{ steps.pr.outputs.id}}/ --endpoint-url=https://storage.yandexcloud.net  --recursive
+        run: |
+          aws s3 cp playwright-report s3://playwright-reports/charts/pulls/${{ steps.pr.outputs.id }}/ --endpoint-url=https://storage.yandexcloud.net --recursive
+          if [ -d playwright-report-perf ]; then
+            aws s3 cp playwright-report-perf s3://playwright-reports/charts/pulls/${{ steps.pr.outputs.id }}/perf/ --endpoint-url=https://storage.yandexcloud.net --recursive
+          fi
         shell: bash
       - name: Create Comment
         uses: marocchino/sticky-pull-request-comment@v2
         with:
           GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
           number: ${{ steps.pr.outputs.id }}
           header: visual tests report
-          message: '[Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/charts/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'
+          message: |
+            [Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/charts/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.
+            [Performance Tests Report](https://storage.yandexcloud.net/playwright-reports/charts/pulls/${{ steps.pr.outputs.id }}/perf/index.html) is ready.

.github/workflows/pr-visual-tests.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Install Packages
         run: npm ci
       - name: Run Visual Tests
-        run: npm run playwright
+        run: npm run playwright:visual
         env:
           CI: 'true'
       - name: Upload Playwright Report
@@ -36,3 +36,24 @@ jobs:
         with:
           name: pr
           path: ./pr-id.txt
+
+  visual_tests_perf:
+    name: Visual Tests (Performance)
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.56.1-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Packages
+        run: npm ci
+      - name: Run Performance Tests
+        run: npm run playwright:perf
+        env:
+          CI: 'true'
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-perf
+          path: ./playwright-report
+          retention-days: 1

package.json

@@ -57,6 +57,8 @@
     "docs:build": "cd ./docs && npm run docs:build",
     "playwright:install": "playwright install chromium webkit --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
+    "playwright:visual": "playwright test --project=chromium --project=webkit --config=playwright/playwright.config.ts",
+    "playwright:perf": "playwright test --project=chromium-perf --workers=1 --no-deps --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
     "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",

playwright/playwright.config.ts

@@ -66,6 +66,19 @@ const config: PlaywrightTestConfig = {
                     ignoreDefaultArgs: ['--hide-scrollbars'],
                 },
             },
+            grepInvert: /@perf/,
+        },
+        {
+            name: 'chromium-perf',
+            use: {
+                ...devices['Desktop Chrome'],
+                deviceScaleFactor: 2,
+                launchOptions: {
+                    ignoreDefaultArgs: ['--hide-scrollbars'],
+                },
+            },
+            grep: /@perf/,
+            workers: 1,
         },
         {
             name: 'webkit',

src/__tests__/area-series.visual.test.tsx

@@ -403,7 +403,9 @@ test.describe('Area series', () => {
         await expect(component.locator('svg')).toHaveScreenshot();
     });
 
-    test('Markers should not degrade render performance on large datasets', async ({mount}) => {
+    test('Markers should not degrade render performance on large datasets @perf', async ({
+        mount,
+    }) => {
         test.setTimeout(120_000);
 
         const pointCount = 25000;

src/__tests__/bar-y-series.visual.test.tsx

@@ -523,7 +523,7 @@ test.describe('Bar-y series', () => {
         await expect(component.locator('svg')).toHaveScreenshot();
     });
 
-    test('Performance', async ({mount}) => {
+    test('Performance @perf', async ({mount}) => {
         test.setTimeout(120_000);
 
         const categories = new Array(3000).fill(null).map((_, i) => String(i));

src/__tests__/line-series.visual.test.tsx

@@ -438,7 +438,9 @@ test.describe('Line series', () => {
         await expect(component.locator('svg')).toHaveScreenshot();
     });
 
-    test('Initial render should not degrade performance on large datasets', async ({mount}) => {
+    test('Initial render should not degrade performance on large datasets @perf', async ({
+        mount,
+    }) => {
         test.setTimeout(120_000);
 
         const categories = new Array(10000).fill(null).map((_, i) => String(i));
@@ -489,7 +491,9 @@ test.describe('Line series', () => {
         expect(median(widgetRenderTimes)).toBeLessThan(1100);
     });
 
-    test('Markers should not degrade render performance on large datasets', async ({mount}) => {
+    test('Markers should not degrade render performance on large datasets @perf', async ({
+        mount,
+    }) => {
         test.setTimeout(120_000);
 
         const pointCount = 25000;

src/__tests__/pie-series.visual.test.tsx

@@ -511,7 +511,7 @@ test.describe('Pie series', () => {
         await expect(component.locator('svg')).toHaveScreenshot();
     });
 
-    test('Performance', async ({mount}) => {
+    test('Performance @perf', async ({mount}) => {
         test.setTimeout(120_000);
 
         const items = new Array(1000).fill(null).map(() => ({

src/__tests__/treemap.visual.test.tsx

@@ -181,7 +181,7 @@ test.describe('Treemap series', () => {
         await expect(chart.locator('svg')).toHaveScreenshot();
     });
 
-    test('Performance', async ({mount}) => {
+    test('Performance @perf', async ({mount}) => {
         test.setTimeout(120_000);
 
         const items = new Array(1000).fill(null).map(() => ({

src/__tests__/x-axis.visual.test.tsx

@@ -389,7 +389,7 @@ test.describe('X-axis', () => {
         });
     });
 
-    test.describe('Performance', () => {
+    test.describe('Performance @perf', () => {
         test('Long category labels', async ({mount}) => {
             test.setTimeout(120_000);