Integrate Playwrite library into the app. Add necessary infrastructur…

…e to fully support of visual regression tests.

.github/workflows/e2e.yml

@@ -0,0 +1,79 @@
+name: e2e tests
+on:
+    pull_request:
+        branches:
+            - develop
+            - main
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.base_ref }}-${{ github.head_ref }}
+    cancel-in-progress: true
+
+jobs:
+    e2e-tests:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                shardIndex: [1]
+                shardTotal: [1]
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '18.x'
+                  cache: 'yarn'
+                  cache-dependency-path: |
+                      **/yarn.lock
+
+            - name: 'Build'
+              run: |
+                  yarn
+                  yarn build
+                  cd server && yarn
+
+            - name: 'Run e2e tests'
+              run: yarn test-e2e --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+            - name: 'Upload e2e blob report'
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: e2e-blob-report-${{ matrix.shardIndex }}
+                  path: ./uui-e2e-tests/tests/.report/report
+                  retention-days: 1
+
+    e2e-tests-merge-reports:
+        if: always()
+        needs: [e2e-tests]
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '18.x'
+                  cache: 'yarn'
+                  cache-dependency-path: |
+                      **/yarn.lock
+            - name: 'Install dependencies'
+              run: |
+                  yarn
+                  cd server && yarn
+
+            - name: 'Download all e2e blob reports'
+              uses: actions/download-artifact@v4
+              with:
+                  path: e2e-blob-reports-all
+                  pattern: e2e-blob-report-*
+                  merge-multiple: true
+
+            - name: 'Merge all e2e blob reports'
+              run: yarn test-e2e-report-merge ./e2e-blob-reports-all
+
+            - name: 'Upload HTML report'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: html-e2e-report-attempt-${{ github.run_attempt }}
+                  path: playwright-report
+                  retention-days: 3

.gitignore

@@ -39,6 +39,7 @@ next-app/yarn-error.log*
 
 .templates
 .reports
+.report
 public/docs/docsGenOutput/docsGenStats.json
 
 #icon source

app/src/App.tsx

@@ -4,6 +4,7 @@ import { Route, Routes } from 'react-router';
 import { DocumentsPage } from './documents';
 import { DemoPage } from './demo';
 import { SandboxPage } from './sandbox/SandboxPage';
+import { PreviewPage } from './preview/previewPage';
 
 function App() {
     return (
@@ -12,6 +13,7 @@ function App() {
             <Route path="/documents" Component={ DocumentsPage } />
             <Route path="/demo" Component={ DemoPage } />
             <Route path="/sandbox" Component={ SandboxPage } />
+            <Route path="/preview" Component={ PreviewPage } />
         </Routes>
     );
 }

app/src/common/docs/baseDocBlock/BaseDocsBlock.module.scss

@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-width: 0;
+    height: calc(100vh - 60px);
+    overflow: hidden;
+    background-color: var(--uui-surface-main);
+    border-top: 1px solid var(--uui-divider);
+    box-sizing: border-box;
+}