Playwright POC - TestCafe to Playwright migration

.github/workflows/playwright_tests.yml

@@ -0,0 +1,177 @@
+name: Playwright tests (POC)
+
+concurrency:
+  group: wf-${{github.event.pull_request.number || github.sha}}-playwright
+  cancel-in-progress: true
+
+on:
+  pull_request:
+  workflow_dispatch:
+    inputs:
+      repeat_count:
+        description: 'Number of times to run tests (for stability check)'
+        required: false
+        default: '1'
+        type: string
+
+env:
+  NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
+
+jobs:
+  build:
+    name: Build DevExtreme
+    runs-on: devextreme-shr2
+    timeout-minutes: 15
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v4
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-cache
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Build
+      shell: bash
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+      run: |
+        pnpx nx build devextreme-scss
+        pnpx nx build devextreme -c testing
+
+    - name: Zip artifacts
+      working-directory: ./packages/devextreme
+      run: 7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles
+
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: devextreme-artifacts
+        path: ./packages/devextreme/artifacts.zip
+        retention-days: 1
+
+  playwright:
+    name: ${{ matrix.ARGS.name }}
+    needs: build
+    strategy:
+      fail-fast: false
+      matrix:
+        ARGS: [
+          { componentFolder: "scheduler/common", name: "scheduler / common (1/3)", shard: "1/3" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (2/3)", shard: "2/3" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (3/3)", shard: "3/3" },
+          { componentFolder: "scheduler/timezones", name: "scheduler / timezones" },
+          { componentFolder: "scheduler/viewOffset", name: "scheduler / viewOffset", project: "chromium-1185" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (1/2)", shard: "1/2" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (2/2)", shard: "2/2" },
+          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky" },
+          { componentFolder: "common", name: "common (1/2)", shard: "1/2" },
+          { componentFolder: "common", name: "common (2/2)", shard: "2/2" },
+          { componentFolder: "editors", name: "editors (1/2)", shard: "1/2" },
+          { componentFolder: "editors", name: "editors (2/2)", shard: "2/2" },
+          { componentFolder: "navigation", name: "navigation" },
+          { componentFolder: "cardView", name: "cardView" },
+          { componentFolder: "accessibility", name: "accessibility (1/2)", shard: "1/2" },
+          { componentFolder: "accessibility", name: "accessibility (2/2)", shard: "2/2" },
+        ]
+    runs-on: devextreme-shr2
+    timeout-minutes: 45
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - name: Download artifacts
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-artifacts
+        path: ./packages/devextreme
+
+    - name: Unpack artifacts
+      working-directory: ./packages/devextreme
+      run: 7z x artifacts.zip -aoa
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-cache
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install Playwright browsers
+      working-directory: ./e2e/testcafe-devextreme
+      run: npx playwright install chromium
+
+    - name: Run Playwright tests
+      working-directory: ./e2e/testcafe-devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+        THEME: fluent.blue.light
+      run: |
+        REPEAT_COUNT="${{ github.event.inputs.repeat_count || '1' }}"
+        SHARD_ARG=""
+        if [ "${{ matrix.ARGS.shard }}" != "" ]; then
+          SHARD_ARG="--shard=${{ matrix.ARGS.shard }}"
+        fi
+        PROJECT="${{ matrix.ARGS.project || 'chromium' }}"
+        PROJECT_ARG="--project=$PROJECT"
+
+        set -o pipefail
+        for i in $(seq 1 $REPEAT_COUNT); do
+          echo "=== Run $i / $REPEAT_COUNT ==="
+          npx playwright test \
+            --config playwright.config.ts \
+            playwright-tests/${{ matrix.ARGS.componentFolder }} \
+            $SHARD_ARG \
+            $PROJECT_ARG \
+            --reporter=list \
+            2>&1 | tee -a playwright-output-run-$i.log
+          echo ""
+        done
+
+    - name: Sanitize job name
+      if: always()
+      run: echo "JOB_NAME=$(echo "${{ matrix.ARGS.name }}" | tr '/' '-' | tr ' ' '-')" >> $GITHUB_ENV
+
+    - name: Upload test results
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-results-${{ env.JOB_NAME }}
+        path: |
+          e2e/testcafe-devextreme/playwright-results/
+          e2e/testcafe-devextreme/playwright-output-*.log
+          e2e/testcafe-devextreme/test-results/
+        if-no-files-found: ignore

FINISH_REVIEW.md

@@ -0,0 +1,80 @@
+# Playwright Migration — Final Review Checklist
+
+## Goal
+Every Playwright test must have a 1:1 correspondence with TestCafe:
+- Same test name
+- Same test count per file
+- Same behavior tested
+
+## Key Rules
+
+### 1. forEach Tests Must Match TestCafe Structure
+TestCafe allows duplicate test names inside forEach loops:
+```typescript
+// TestCafe: 5 iterations = 5 tests with SAME name "Usual appointments render"
+[0, 735, 1440, -735, -1440].forEach((offset) => {
+  test('Usual appointments render', async (t) => { ... });
+});
+```
+
+Playwright does NOT allow duplicate test names. Solution: **keep forEach inside ONE test**:
+```typescript
+// CORRECT: 1 test with 5 iterations inside (matches TC count)
+test('Usual appointments render', async ({ page }) => {
+  for (const offset of [0, 735, 1440, -735, -1440]) {
+    await clearTestPage(page);
+    // ... test with this offset
+  }
+});
+```
+
+**WRONG** (creates extra tests):
+```typescript
+// WRONG: 5 separate tests with different names
+test('Usual appointments render (offset: 0)', ...)
+test('Usual appointments render (offset: 735)', ...)
+```
+
+### 2. Test Names Must Be Identical
+- Copy test name from TestCafe exactly
+- No ticket numbers added/removed unless TC has them
+- No parameterization suffixes unless TC has them
+
+### 3. No Extra Screenshots / No Missing Screenshots
+- All etalons are from TestCafe CI
+- Playwright must not generate new etalons
+- Playwright must not delete any etalons
+
+### 4. Verification Steps
+
+For each component folder:
+1. Run TestCafe test names from CI: check TEST_NAMES_COMPARISON.md
+2. Run `npx playwright test --list --project=chromium playwright-tests/<component>/`
+3. Compare counts and names
+4. If PW has more tests — check for forEach expansion (collapse them)
+5. If PW has fewer — check for missing tests (add them)
+
+### 5. CI Must Pass
+- `common (1/2)` and `common (2/2)` — must be SUCCESS
+- `scheduler/viewOffset` — must be SUCCESS
+- Other jobs — screenshot pixel differences expected (macOS vs Ubuntu rendering)
+
+## Known Issues
+
+### forEach Expansion (needs collapsing)
+These components have expanded forEach that need to be collapsed:
+- `scheduler/viewOffset/` — TC: ~28 tests, PW: ~537 (massive expansion)
+- `scheduler/timezones/` — TC: ~36 tests, PW: ~105
+- `scheduler/common/` — various files with expanded forEach
+- `accessibility/*.matrix.spec.ts` — matrix expansion (OK — mirrors TC testAccessibility pattern)
+
+### Screenshot Dimension Mismatches (CI vs Local)
+- TestCafe headless Chrome has 15px scrollbar, Playwright headless has 0px
+- ViewOffset uses viewport 1185 (project chromium-1185) to match TC etalons
+- Other components use viewport 1200 + `::-webkit-scrollbar` CSS
+- Some tests fail on CI but pass locally due to font rendering differences
+
+### Accessibility Matrix Tests
+TC uses `testAccessibility()` which generates N tests per option combination at runtime.
+PW uses `testAccessibilityMatrix()` helper that does the same.
+These are expected to have different counts but same coverage.