feat: screenshot testing (#838)

.eslintignore

@@ -6,3 +6,5 @@ node_modules
 /configure
 /coverage
 /widget
+
+/playwright/playwright/.cache/

.github/workflows/playwright.yml

@@ -0,0 +1,41 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    name: Test component
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run playwright
+        env:
+          CI: 'true'
+      - name: Upload Playwright playwright report to GitHub Actions Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: ./playwright-report
+          retention-days: 1
+      - name: Save PR ID
+        if: always()
+        run: |
+          pr="${{ github.event.pull_request.number }}"
+          echo $pr > ./pr-id.txt
+        shell: bash
+      - name: Create PR Artifact
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: pr
+          path: ./pr-id.txt

.github/workflows/pr-playwright-report.yml

@@ -0,0 +1,38 @@
+name: PR Playwright Report
+
+on:
+  workflow_run:
+    workflows: ['Playwright Tests']
+    types:
+      - completed
+
+jobs:
+  comment:
+    name: Upload Playwright report to s3
+    if: github.event.workflow_run.event == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Artifacts
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          run_id: ${{ github.event.workflow_run.id }}
+      - name: Extract PR Number
+        id: pr
+        run: echo "::set-output name=id::$(<pr/pr-id.txt)"
+        shell: bash
+      - name: Upload
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+          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/page-constructor/pulls/${{ steps.pr.outputs.id }}/ --endpoint-url=https://storage.yandexcloud.net --recursive
+        shell: bash
+      - name: Create Comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          number: ${{ steps.pr.outputs.id }}
+          header: playwright test
+          message: '[Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/page-constructor/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

.gitignore

@@ -18,3 +18,7 @@ node_modules
 *.tgz
 .env
 .env.development
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/playwright/.cache/

.prettierignore

@@ -14,5 +14,7 @@ CONTRIBUTING.md
 /coverage
 /widget
 
+/playwright/playwright/.cache/
+
 # npm files
 package.json

jest.config.js

@@ -26,5 +26,6 @@ module.exports = {
         '<rootDir>/build',
         '<rootDir>/server',
         '<rootDir>/.storybook',
+        '.visual.',
     ],
 };

package.json

@@ -77,7 +77,13 @@
     "prepare": "husky install",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:watch": "jest --watchAll"
+    "test:watch": "jest --watchAll",
+    "playwright": "playwright test --config=playwright/playwright.config.ts",
+    "playwright:update": "npm run playwright -- -u",
+    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+    "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
+    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
+    "playwright:install": "playwright install --with-deps"
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
@@ -123,6 +129,8 @@
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.2.0",
+    "@playwright/experimental-ct-react": "^1.38.1",
+    "@playwright/test": "^1.38.1",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-knobs": "^7.0.2",