Migrate the PivotGrid e2e tests to Playwright - #34960
Conversation
…s and test title fixes
… the UI mode to the docker script
…nd the screenshot target
…d stop doubling the compact suffix
There was a problem hiding this comment.
Pull request overview
This PR migrates end-to-end coverage from TestCafe to Playwright by introducing a new Playwright-based component E2E package (focused on PivotGrid) and migrating wrapper E2E tests, while removing the corresponding legacy TestCafe runner/tests and wiring the new suites into CI.
Changes:
- Added
e2e/playwrightPlaywright test harness (runner, server, fixtures, helpers, models) and migrated PivotGrid E2E scenarios to it. - Migrated wrapper E2E tests in
e2e/wrappersfrom TestCafe (*.test.js) to Playwright (*.spec.ts) and replaced the old runner with a Playwright webServer-based setup. - Updated workspace dependencies and CI workflows to lint/run the new Playwright projects and removed obsolete React/Vue playground TestCafe runners.
Reviewed changes
Copilot reviewed 123 out of 220 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Adds Playwright test dependency to the workspace catalog. |
| e2e/wrappers/tests/textbox.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/textbox.spec.ts | Adds Playwright wrapper test for TextBox dynamic styles. |
| e2e/wrappers/tests/select-box-nested-validator.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/select-box-nested-validator.spec.ts | Adds Playwright wrapper tests for nested Validator scenarios. |
| e2e/wrappers/tests/inputs-list-in-form.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/inputs-list-in-form.spec.ts | Adds Playwright wrapper test for dynamic inputs in form. |
| e2e/wrappers/tests/gantt-template-state-update.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/gantt-template-state-update.spec.ts | Adds Playwright wrapper test with framework-based skip. |
| e2e/wrappers/tests/chat-template-rerender.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/chat-template-rerender.spec.ts | Adds Playwright wrapper test with framework-based skip. |
| e2e/wrappers/tests/button.test.js | Removes legacy TestCafe wrapper test. |
| e2e/wrappers/tests/button.spec.ts | Adds Playwright wrapper smoke test for Button. |
| e2e/wrappers/test-helpers.js | Removes TestCafe wrapper test helper utilities. |
| e2e/wrappers/serve.mjs | Adds Express-based static server for wrapper builds. |
| e2e/wrappers/runner.js | Removes legacy TestCafe-based wrapper runner. |
| e2e/wrappers/README.md | Adds local/CI run documentation for wrapper Playwright tests. |
| e2e/wrappers/playwright.config.ts | Adds Playwright configuration for wrapper E2E (webServer, chrome channel, traces). |
| e2e/wrappers/package.json | Switches wrapper test scripts/deps from TestCafe runner to Playwright. |
| e2e/wrappers/fixtures.ts | Adds wrapper Playwright fixtures/options for framework selection. |
| e2e/wrappers/docker/run.sh | Adds container runner for wrapper Playwright tests (including UI mode). |
| e2e/wrappers/docker/Dockerfile | Adds Docker image to mirror CI environment for wrapper tests. |
| e2e/wrappers/.gitignore | Ignores Playwright reports/results for wrapper suite. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/virtualScrolling_T1210807.ts | Removes legacy TestCafe PivotGrid test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/sort/sortWithSummaryDisplayMode_T1173442.ts | Removes legacy TestCafe PivotGrid test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/sort/localSort_T1150523.ts | Removes legacy TestCafe PivotGrid test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/scrolling.ts | Removes legacy TestCafe PivotGrid scrolling matrix tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/runningTotal.ts | Removes legacy TestCafe PivotGrid running total tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/rowHeaders.ts | Removes legacy TestCafe keyboard navigation tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fieldChooser.ts | Removes legacy TestCafe FieldChooser keyboard tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/expandIcon.ts | Removes legacy TestCafe expandable cell focus test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/contextMenu.ts | Removes legacy TestCafe context menu keyboard tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/columnHeaders.ts | Removes legacy TestCafe column header keyboard tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts | Removes legacy TestCafe header filter tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/T1283238_OLAP_drag_and_drop_field.ts | Removes legacy TestCafe OLAP drag-n-drop test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/dragAndDropFieldItems.ts | Removes legacy TestCafe field panel drag-n-drop tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/T1138119_dragAndDropAreaItems.ts | Removes legacy TestCafe field chooser drag tests. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/export/onExportingOption.ts | Removes legacy TestCafe export callback test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/contextMenu.ts | Removes legacy TestCafe context menu screenshot test. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/const.ts | Removes legacy TestCafe-only constants. |
| e2e/testcafe-devextreme/tests/common/pivotGrid/apiMocks/OLAP_api.mock.ts | Removes legacy TestCafe OLAP RequestMock. |
| e2e/playwright/tsconfig.json | Adds TS config for the Playwright E2E package. |
| e2e/playwright/tests/navigation/button/common.spec.ts | Adds Playwright Button E2E coverage (states + API assertions + screenshots). |
| e2e/playwright/tests/editors/checkBox/common.spec.ts | Adds Playwright CheckBox E2E coverage with model assertions. |
| e2e/playwright/tests/container.html | Adds a dedicated Playwright test container page loading built artifacts and themes. |
| e2e/playwright/tests/common/pivotGrid/virtualScrolling_T1210807.spec.ts | Migrates PivotGrid virtual scrolling screenshot test to Playwright. |
| e2e/playwright/tests/common/pivotGrid/sort/sortWithSummaryDisplayMode_T1173442.spec.ts | Migrates PivotGrid sorting screenshot test to Playwright. |
| e2e/playwright/tests/common/pivotGrid/sort/localSort_T1150523.spec.ts | Migrates PivotGrid sort vs reload behavior to Playwright with request logging. |
| e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts | Migrates PivotGrid scrolling matrix screenshot tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/runningTotal/runningTotal.spec.ts | Migrates PivotGrid running total screenshot tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/kbn/rowHeaders.spec.ts | Migrates PivotGrid row header keyboard navigation tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/kbn/fieldChooser.spec.ts | Migrates PivotGrid field chooser keyboard/focus tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/kbn/expandIcon.spec.ts | Migrates PivotGrid expandable cell focus outline screenshot test to Playwright. |
| e2e/playwright/tests/common/pivotGrid/kbn/columnHeaders.spec.ts | Migrates PivotGrid column header keyboard navigation tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/headerFilter.spec.ts | Migrates PivotGrid header filter tests to Playwright using List model. |
| e2e/playwright/tests/common/pivotGrid/fieldPanel/T1283238_OLAP_drag_and_drop_field.spec.ts | Migrates OLAP drag-n-drop test to Playwright with route-based mocks. |
| e2e/playwright/tests/common/pivotGrid/fieldPanel/dragAndDropFieldItems.spec.ts | Migrates field panel drag-in-progress screenshot tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/fieldChooser/T1138119_dragAndDropAreaItems.spec.ts | Migrates field chooser drag direction screenshot tests to Playwright. |
| e2e/playwright/tests/common/pivotGrid/export/onExportingOption.spec.ts | Migrates export callback test to Playwright. |
| e2e/playwright/tests/common/pivotGrid/contextMenu.spec.ts | Migrates context menu width screenshot test to Playwright. |
| e2e/playwright/tests/common/pivotGrid/apiMocks/OLAP_measure_groups_response.ts | Adds XMLA mock payload for Playwright OLAP tests. |
| e2e/playwright/tests/common/pivotGrid/apiMocks/OLAP_api.mock.ts | Adds Playwright route-based OLAP API mock helper. |
| e2e/playwright/serve.mjs | Adds static HTTP server for Playwright component test pages (repo-root document root). |
| e2e/playwright/runner.mjs | Adds CLI-compatible runner translating legacy flags into Playwright CLI args. |
| e2e/playwright/README.md | Adds documentation for running/writing Playwright component E2E tests. |
| e2e/playwright/project.json | Adds Nx project definition for Playwright E2E lint/test targets. |
| e2e/playwright/playwright.config.ts | Adds Playwright config for component tests (themes/timezones, screenshot budgets, webServer). |
| e2e/playwright/package.json | Adds package manifest for Playwright E2E project scripts/deps. |
| e2e/playwright/models/types.ts | Adds widget/type mapping scaffold for model typing. |
| e2e/playwright/models/treeView/treeViewNode.ts | Adds TreeView node model used by PivotGrid field chooser tests. |
| e2e/playwright/models/treeView/index.ts | Adds TreeView widget model. |
| e2e/playwright/models/popup.ts | Adds Popup model used by PivotGrid field chooser popup interactions. |
| e2e/playwright/models/pivotGrid/rowsArea.ts | Adds PivotGrid rows area model helpers. |
| e2e/playwright/models/pivotGrid/rowHeaderArea.ts | Adds PivotGrid row header area model. |
| e2e/playwright/models/pivotGrid/overlay.ts | Adds PivotGrid-specific overlay helper (invisible detection). |
| e2e/playwright/models/pivotGrid/index.ts | Adds PivotGrid widget model API used by migrated tests. |
| e2e/playwright/models/pivotGrid/headerFilter.ts | Adds PivotGrid header filter icon model. |
| e2e/playwright/models/pivotGrid/filterHeaderArea.ts | Adds PivotGrid filter header area model. |
| e2e/playwright/models/pivotGrid/fieldChooser.ts | Adds PivotGrid field chooser model. |
| e2e/playwright/models/pivotGrid/dataHeaderArea.ts | Adds PivotGrid data header area model. |
| e2e/playwright/models/pivotGrid/columnsArea.ts | Adds PivotGrid columns area model helpers. |
| e2e/playwright/models/pivotGrid/columnHeaderArea.ts | Adds PivotGrid column header area model (including popup-scoped locators). |
| e2e/playwright/models/overlay.ts | Adds generic Overlay widget model. |
| e2e/playwright/models/list/item.ts | Adds List item model used by header filter tests. |
| e2e/playwright/models/list/index.ts | Adds List widget model. |
| e2e/playwright/models/list/checkBox.ts | Adds List item checkbox model. |
| e2e/playwright/models/internal/widget.ts | Adds base widget model with jQuery instance invocation utilities. |
| e2e/playwright/models/internal/hasClass.ts | Adds helper for class presence checks on locators. |
| e2e/playwright/models/dataGrid/headers/headerFilter.ts | Adds DataGrid-style header filter popup model reused in PivotGrid tests. |
| e2e/playwright/models/checkBox.ts | Adds CheckBox widget model. |
| e2e/playwright/models/button.ts | Adds Button widget model. |
| e2e/playwright/helpers/themeUtils.ts | Adds theme-name utilities for screenshot naming and theme switching. |
| e2e/playwright/helpers/testPageUtils.ts | Adds helpers to open container page, switch themes, reset state. |
| e2e/playwright/helpers/screenshots.ts | Adds screenshot helper wrapping toHaveScreenshot with theme postfixing and optional compact pass. |
| e2e/playwright/helpers/requestLogger.ts | Adds request counter helper mirroring TestCafe RequestLogger behavior. |
| e2e/playwright/helpers/mockDate.ts | Adds date mocking helpers based on Playwright clock. |
| e2e/playwright/helpers/generateOptionMatrix.ts | Adds option-matrix generator used by migrated matrix tests. |
| e2e/playwright/helpers/dragUtils.ts | Adds drag helpers to reproduce TestCafe drag behaviors (including “drag in progress”). |
| e2e/playwright/helpers/domUtils.ts | Adds DOM helper functions (attributes, element insertion, stylesheet injection, blur). |
| e2e/playwright/helpers/createWidget.ts | Adds widget factory with function/date serialization to preserve handler/date options. |
| e2e/playwright/helpers/const.ts | Adds shared constants (server port, default theme, container URL, viewport). |
| e2e/playwright/helpers/apiMock.ts | Adds Playwright route-based API mocking helper to replace TestCafe RequestMock. |
| e2e/playwright/fixtures.ts | Adds Playwright fixtures to preload the container page and apply theme/viewport. |
| e2e/playwright/eslint.config.mjs | Adds local eslint config for the Playwright E2E package. |
| e2e/playwright/docker/run.sh | Adds container runner for component Playwright E2E tests (including UI mode). |
| e2e/playwright/docker/Dockerfile | Adds Docker image to mirror CI environment for component Playwright tests. |
| e2e/playwright/.gitignore | Ignores Playwright artifacts folder. |
| apps/vue/test.js | Removes legacy TestCafe playground test stub. |
| apps/vue/runner.js | Removes legacy TestCafe playground runner. |
| apps/vue/project.json | Removes TestCafe test exclusion now that file is deleted. |
| apps/vue/package.json | Removes legacy TestCafe test script. |
| apps/react/test.js | Removes legacy TestCafe playground test stub. |
| apps/react/runner.js | Removes legacy TestCafe playground runner. |
| apps/react/project.json | Removes TestCafe test exclusion now that file is deleted. |
| apps/react/package.json | Removes legacy TestCafe test script. |
| .github/workflows/wrapper_tests_e2e.yml | Switches wrapper e2e CI to Playwright and uploads report/traces on failure. |
| .github/workflows/lint.yml | Adds lint step for the new Playwright E2E project. |
| .github/workflows/default_workflow.yml | Includes the Playwright E2E project in the default workflow project list. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…t on bash 3.2 and the request counter baseline
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 123 out of 220 changed files in this pull request and generated no new comments.
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:58
scrolling.modeis set to'standart', but PivotGridScrollModeonly allows'standard' | 'virtual'(seepackages/devextreme/js/common.d.ts:669). Using an unsupported value can make the test exercise a fallback path and can produce misleading screenshots/test names.
…l scroll before shooting
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 148 out of 1130 changed files in this pull request and generated 1 comment.
Suppressed comments (1)
e2e/playwright/helpers/machineTimezones.ts:14
getMachineTimezonetreats an emptyTIMEZONEenv var as a real value (""), which makesgetTimezoneTestskip all timezone-scoped tests. This repo already treats empty matrix env vars as "unset" (seereadEnvinhelpers/const.ts), so this should do the same.
| const serializeOptions = (options: unknown): string => JSON.stringify( | ||
| options, | ||
| // eslint-disable-next-line func-names | ||
| function (this: Record<string, unknown>, key: string, value: unknown) { | ||
| const raw = this[key]; | ||
|
|
||
| if (typeof raw === 'function') { | ||
| return `${FUNCTION_MARK}${raw.toString()}`; | ||
| } | ||
|
|
||
| if (raw instanceof Date) { | ||
| return `${DATE_MARK}${raw.toISOString()}`; | ||
| } | ||
|
|
||
| return value; | ||
| }, | ||
| ); |
…l selection etalons for the corrected drag
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 138 out of 1815 changed files in this pull request and generated 4 comments.
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:58
scrolling.modeis set to'standart', which is not a valid PivotGrid scrolling mode (expected'standard'). This can make the test exercise fallback behavior instead of the intended scrolling implementation.
|
|
||
| // The test page pulls the built library and the themes straight out of the repository, | ||
| // so the whole repository is the document root. | ||
| const root = path.resolve(import.meta.dirname, '../..'); |
| process.exit(1); | ||
| } | ||
|
|
||
| const root = path.resolve(import.meta.dirname, distDir); |
| [true, false].forEach((rtlEnabled) => { | ||
| // The TestCafe fixture gave every combination the same name; Playwright needs each one to | ||
| // carry the parameters that tell it apart. | ||
| test(`Appointemt form tests (view=${currentView}, rtl=${rtlEnabled})`, async ({ page }) => { |
| They run on [Playwright](https://playwright.dev/) and use the system Google Chrome | ||
| (`channel: 'chrome'`), so no browser download is needed. |
left a comment
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 138 out of 1815 changed files in this pull request and generated 2 comments.
Suppressed comments (2)
e2e/playwright/serve.mjs:48
filePathis built withpath.join(root, decodeURIComponent(pathname)). Becausepathnamestarts with/,path.joindropsrootand the server will try to read from the filesystem root (and then reject it), making requests like/e2e/playwright/tests/container.htmland/packages/devextreme/...return 404. This will prevent the Playwright container page from loading its scripts/styles.
e2e/playwright/helpers/generateOptionMatrix.ts:66- This filter indexes
itemanditemToExcludewith astringkey fromObject.keys, which is a TypeScript error for genericT/Partial<T>(TS7053). Cast the keys to(keyof T)[]so the file type-checks.
| import Scheduler from '../../../../models/scheduler'; | ||
| import createScheduler from './init/widget.setup'; | ||
|
|
||
| test('Should drag appoinment to the previous day`s cell (T1025952)', async ({ page }) => { |
| 'viewSwitcher', | ||
| ]; | ||
|
|
||
| test('Scheduler default toolbar should works', async ({ page }) => { |
…ntments and rerecord the drag etalon
left a comment
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 138 out of 1815 changed files in this pull request and generated 2 comments.
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:59
scrolling.modeis set to'standart', which is not a valid PivotGrid scrolling mode (expected'standard'). This makes the test exercise an unintended code path (likely relying on fallback behavior) and also propagates the typo into the test title via${mode}.
| [true, false].forEach((rtlEnabled) => { | ||
| // The TestCafe fixture gave every combination the same name; Playwright needs each one to | ||
| // carry the parameters that tell it apart. | ||
| test(`Appointemt form tests (view=${currentView}, rtl=${rtlEnabled})`, async ({ page }) => { |
| import Scheduler from '../../../../models/scheduler'; | ||
| import createScheduler from './init/widget.setup'; | ||
|
|
||
| test('Should drag appoinment to the previous day`s cell (T1025952)', async ({ page }) => { |
left a comment
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 138 out of 1815 changed files in this pull request and generated 2 comments.
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:59
scrolling.modeis set to'standart', which is not a valid PivotGrid scrolling mode ('standard'). This makes these tests rely on fallback behavior and also bakes the typo into the test titles via${mode}.
| export const hasClass = async (locator: Locator, className: string): Promise<boolean> => { | ||
| const classes = await locator.getAttribute('class'); | ||
|
|
||
| return classes?.split(' ').includes(className) ?? false; | ||
| }; |
| "@babel/eslint-parser": 7.29.7 | ||
| "@playwright/test": 1.62.1 | ||
| "@eslint-stylistic/metadata": ^2.13.0 |
left a comment
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 138 out of 1815 changed files in this pull request and generated no new comments.
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:58
scrolling.modeis set to'standart', which is not a valid PivotGrid scrolling mode (expected'standard'). This makes the test rely on fallback behavior and may miss the intended code path.
left a comment
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 136 out of 1820 changed files in this pull request and generated 3 comments.
Suppressed comments (1)
e2e/playwright/tests/common/pivotGrid/scrolling.spec.ts:58
scrolling.modeis set to'standart', but the PivotGrid scrolling mode used elsewhere in this file is'standard'. Using a misspelled mode here can make the test exercise a different/fallback code path and break the parameterized screenshot naming.
| @@ -0,0 +1,38 @@ | |||
| import { test } from '../../../../fixtures'; | |||
| import { expect, test } from '../../fixtures'; | ||
| import { createWidget } from '../../helpers/createWidget'; | ||
| import Scheduler from '../../models/scheduler'; | ||
|
|
||
| // Keeps the ported page object honest while the Scheduler tests themselves are still on TestCafe. | ||
| test('Scheduler page object reaches the toolbar, the work space and the appointments', async ({ page }) => { |
| @@ -0,0 +1,38 @@ | |||
| import { expect, test } from '../../../../fixtures'; | |||
No description provided.