Add the e2e/playwright package with the component test infrastructure by aleksei-semikozov · Pull Request #34959 · DevExpress/DevExtreme

aleksei-semikozov · 2026-08-27T16:34:45Z

No description provided.

…s and test title fixes

… CI environment

… the UI mode to the docker script

…em empty

… the default one

Copilot

Pull request overview

Introduces Playwright-based end-to-end testing infrastructure to the monorepo: a new e2e/playwright package for component-level tests (including screenshot/trace support and CI matrix execution), and migrates wrapper E2E tests from TestCafe to Playwright with updated CI artifact collection.

Changes:

Added e2e/playwright Nx project with Playwright runner, static server, fixtures/helpers, models, and initial tests.
Migrated e2e/wrappers E2E tests from TestCafe (*.test.js + custom runner) to Playwright (*.spec.ts + Playwright webServer).
Updated pnpm workspace/lockfile and GitHub Actions workflows to run and lint the new Playwright suites and upload Playwright reports/traces on failure.

Reviewed changes

Copilot reviewed 62 out of 66 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds `@playwright/test` to the shared catalog.
pnpm-lock.yaml	Locks Playwright dependencies and adds the new `e2e/playwright` importer.
e2e/wrappers/tests/textbox.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/textbox.spec.ts	Adds Playwright wrapper E2E test replacement.
e2e/wrappers/tests/select-box-nested-validator.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/select-box-nested-validator.spec.ts	Adds Playwright wrapper E2E test replacement.
e2e/wrappers/tests/inputs-list-in-form.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/inputs-list-in-form.spec.ts	Adds Playwright wrapper E2E test replacement.
e2e/wrappers/tests/gantt-template-state-update.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/gantt-template-state-update.spec.ts	Adds Playwright wrapper E2E test replacement with framework skip.
e2e/wrappers/tests/chat-template-rerender.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/chat-template-rerender.spec.ts	Adds Playwright wrapper E2E test replacement with framework skip.
e2e/wrappers/tests/button.test.js	Removes legacy TestCafe wrapper E2E test.
e2e/wrappers/tests/button.spec.ts	Adds Playwright wrapper E2E test replacement.
e2e/wrappers/test-helpers.js	Removes TestCafe-specific test helper utilities.
e2e/wrappers/serve.mjs	Adds an Express server to serve built wrapper apps for Playwright `webServer`.
e2e/wrappers/runner.js	Removes the TestCafe runner implementation.
e2e/wrappers/README.md	Documents local/CI wrapper Playwright E2E workflow and artifact usage.
e2e/wrappers/playwright.config.ts	Adds Playwright config for wrappers E2E (per-framework ports, webServer, artifacts).
e2e/wrappers/package.json	Switches wrapper tests from TestCafe runner to Playwright + `cross-env`; drops TestCafe/minimist.
e2e/wrappers/fixtures.ts	Adds Playwright fixtures for wrapper tests (framework option).
e2e/wrappers/docker/run.sh	Adds Docker runner to mirror CI environment and optionally run Playwright UI.
e2e/wrappers/docker/Dockerfile	Adds Docker image definition for wrapper Playwright E2E runs.
e2e/wrappers/.gitignore	Ignores Playwright report/result directories in wrappers E2E package.
e2e/playwright/tsconfig.json	Adds TypeScript config for the new component Playwright project.
e2e/playwright/tests/navigation/button/common.spec.ts	Adds initial component Playwright tests for Button (incl. screenshot coverage).
e2e/playwright/tests/editors/checkBox/common.spec.ts	Adds initial component Playwright tests for CheckBox.
e2e/playwright/tests/container.html	Adds a dedicated container page that loads built DevExtreme artifacts/themes for tests.
e2e/playwright/serve.mjs	Adds a static server serving the repo as docroot for component tests.
e2e/playwright/runner.mjs	Adds a CLI runner mapping TestCafe-like flags to Playwright (shards, grep, workers, theme).
e2e/playwright/README.md	Documents component Playwright usage, screenshots/etalons, themes, CI diagnostics.
e2e/playwright/project.json	Registers `devextreme-playwright-tests` as an Nx project with `lint`/`test` targets.
e2e/playwright/playwright.config.ts	Adds Playwright config (workers, webServer, snapshot pathing, CI screenshot budgets, timezone).
e2e/playwright/package.json	Adds the new Playwright project package manifest and scripts.
e2e/playwright/models/types.ts	Introduces widget name/option typing scaffolding for model layer.
e2e/playwright/models/internal/widget.ts	Adds a base widget model for interacting with DevExtreme widgets via jQuery/instance APIs.
e2e/playwright/models/checkBox.ts	Adds CheckBox model helpers (checked/indeterminate state).
e2e/playwright/models/button.ts	Adds Button model helpers (text/selected state).
e2e/playwright/helpers/themeUtils.ts	Adds theme name utilities for screenshot naming/theme switching.
e2e/playwright/helpers/testPageUtils.ts	Adds utilities to open/reset/clear the test container page and theme state.
e2e/playwright/helpers/screenshots.ts	Adds screenshot assertion helpers aligned with existing etalon naming conventions.
e2e/playwright/helpers/mockDate.ts	Adds date mocking helpers based on Playwright clock.
e2e/playwright/helpers/domUtils.ts	Adds DOM helper utilities used by tests for building layouts and tweaking attributes/styles.
e2e/playwright/helpers/createWidget.ts	Adds helper to instantiate DevExtreme jQuery widgets from tests.
e2e/playwright/helpers/const.ts	Adds shared constants for server/theme/browser size and env handling.
e2e/playwright/helpers/apiMock.ts	Adds Playwright-based API mocking helper (route-based fulfillment).
e2e/playwright/fixtures.ts	Adds Playwright fixtures that pre-open and reset the container page per test.
e2e/playwright/eslint.config.mjs	Adds ESLint config for the new TypeScript-based Playwright package.
e2e/playwright/docker/run.sh	Adds Docker runner for component Playwright tests (incl. UI mode).
e2e/playwright/docker/Dockerfile	Adds Docker image definition for component Playwright E2E runs.
e2e/playwright/.gitignore	Ignores Playwright artifacts directory for component tests.
apps/vue/test.js	Removes legacy TestCafe playground test stub.
apps/vue/runner.js	Removes legacy TestCafe runner for Vue playground.
apps/vue/project.json	Cleans up inputs now that `test.js` is removed.
apps/vue/package.json	Removes the legacy `test` script for Vue playground.
apps/react/test.js	Removes legacy TestCafe playground test stub.
apps/react/runner.js	Removes legacy TestCafe runner for React playground.
apps/react/project.json	Cleans up inputs now that `test.js` is removed.
apps/react/package.json	Removes the legacy `test` script for React playground.
.github/workflows/wrapper_tests_e2e.yml	Updates wrapper E2E CI to run Playwright and upload report/trace artifacts on failure.
.github/workflows/testcafe_tests_playwright.yml	Adds a dedicated CI workflow to run component Playwright tests in a shard/theme matrix.
.github/workflows/lint.yml	Adds a lint step for the new `e2e/playwright` package.
.github/workflows/default_workflow.yml	Adds `devextreme-playwright-tests` to the default Nx test/lint 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.

…nd the screenshot target

Copilot

Pull request overview

Copilot reviewed 62 out of 66 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Suppressed comments (4)

Previously missed (4) — in code that hasn't changed since the last review.

e2e/playwright/README.md:4

This sentence is misleading: even when tests use channel: 'chrome' at runtime, installing @playwright/test will still download Playwright's bundled browsers unless PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 is set. Clarifying this avoids unexpected install time/size regressions.

End-to-end tests for DevExtreme components. They run on [Playwright](https://playwright.dev/) and
use the system Google Chrome (`channel: 'chrome'`), so no browser download is needed.

e2e/wrappers/README.md:5

This sentence is misleading: using channel: 'chrome' avoids Playwright-managed browsers at runtime, but installing @playwright/test still downloads Playwright's bundled browsers unless PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 is set. Clarify to prevent unexpected install-time downloads.
.github/workflows/testcafe_tests_playwright.yml:234
@playwright/test pulls in playwright, which downloads bundled browsers during pnpm install unless PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 is set. Since the suite uses system Chrome (channel: 'chrome'), consider setting this env var on the install step to keep CI installs smaller/faster.

    - name: Install dependencies
      run: pnpm install --frozen-lockfile

.github/workflows/wrapper_tests_e2e.yml:171

@playwright/test installs playwright, which downloads bundled browsers during pnpm install unless PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 is set. Since these wrapper E2E tests run with channel: 'chrome', consider setting the env var on the install step to reduce CI install time/size.

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

…d stop doubling the compact suffix

Copilot

Pull request overview

Copilot reviewed 62 out of 66 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Suppressed comments (1)

.github/workflows/playwright_tests.yml:234

Same as the build job: add PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 during pnpm install so CI doesn’t download Playwright browsers that aren’t used when running against system Chrome (channel: 'chrome').

    - name: Install dependencies
      run: pnpm install --frozen-lockfile

…quad owns

Copilot

Pull request overview

Copilot reviewed 62 out of 64 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 62 out of 64 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Suppressed comments (2)

Previously missed (2) — in code that hasn't changed since the last review.

e2e/playwright/helpers/domUtils.ts:65

removeClassAttribute removes class names via string.replace, which can delete partial matches (e.g. removing btn from btn-primary) and can leave extra whitespace. This can make subsequent class-based assertions/selectors unreliable. Consider removing by token instead.

    const element = document.querySelector(elementSelector);
    const classes = element?.getAttribute('class') ?? '';

    element?.setAttribute('class', classes.replace(className, ''));
  },

e2e/playwright/runner.mjs:54

--indices validation doesn’t reject shards where current > total (e.g. 5/4), which will be passed to Playwright as-is and fail later with a less actionable error. Validating the range here keeps runner errors consistent with the other checks.

+    const { pathname } = new URL(request.url, `http://localhost:${port}`);
+    const filePath = path.join(root, decodeURIComponent(pathname));


Aleksey Semikozov added 11 commits August 27, 2026 11:32

Migrate wrappers e2e tests from TestCafe to Playwright

f620a4a

Address review: validate port, read CI versions in docker script, doc…

6213e22

…s and test title fixes

Keep Chrome scrollbars visible and align the local container with the…

8c224ab

… CI environment

Upload the Playwright report and traces as separate CI artifacts, add…

0632420

… the UI mode to the docker script

Shorten the artifact upload comment to the reason only

8734d88

Drop the artifact upload comment

ca51622

Rewrite the wrappers static server as an ES module and drop minimist

15af875

Trim the wrappers README to the three things it needs to answer

e62c407

Trim the docker script to its usage line and drop redundant guards

f827903

Forward playwright arguments in the docker UI mode

ff9c146

Add the e2e/playwright package with the component test infrastructure

8b908e3

aleksei-semikozov added the 26_2 label Aug 27, 2026

aleksei-semikozov self-assigned this Aug 27, 2026

Aleksey Semikozov added 3 commits August 27, 2026 13:37

Fall back to the default theme and timezone when the matrix leaves th…

2173e1b

…em empty

Lint the new package in the lint workflow and keep its e2e run out of…

2c84240

… the default one

Run a theme job only on the tests that opted into that theme

c8772f5

aleksei-semikozov marked this pull request as ready for review August 27, 2026 17:11

aleksei-semikozov requested a review from a team as a code owner August 27, 2026 17:11

Copilot AI lite review requested due to automatic review settings August 27, 2026 17:11

Copilot started reviewing on behalf of aleksei-semikozov August 27, 2026 17:11 View session

Copilot AI reviewed Aug 27, 2026

View reviewed changes

Comment thread e2e/playwright/helpers/domUtils.ts

Match the TestCafe semantics in the runner flags, the request mocks a…

2ab615b

…nd the screenshot target

Copilot AI review requested due to automatic review settings August 27, 2026 17:31

Copilot started reviewing on behalf of aleksei-semikozov August 27, 2026 17:32 View session

Copilot AI reviewed Aug 27, 2026

View reviewed changes

Comment thread e2e/playwright/serve.mjs

Comment thread e2e/playwright/runner.mjs Outdated

Comment thread e2e/playwright/helpers/screenshots.ts

Name the workflow after Playwright, accept the "1 of 4" shard form an…

9f0bf21

…d stop doubling the compact suffix

Copilot AI review requested due to automatic review settings August 27, 2026 18:35

Copilot started reviewing on behalf of aleksei-semikozov August 27, 2026 18:36 View session

Copilot AI reviewed Aug 27, 2026

View reviewed changes

Comment thread .github/workflows/playwright_tests.yml

Comment thread .github/workflows/wrapper_tests_e2e.yml

Comment thread e2e/playwright/README.md

Comment thread e2e/wrappers/README.md

Use PivotGrid as the reference component instead of widgets another s…

db2db0f

…quad owns

Copilot AI review requested due to automatic review settings August 28, 2026 02:04

Copilot started reviewing on behalf of aleksei-semikozov August 28, 2026 02:04 View session

Keep the Button and CheckBox models: the composite models build on them

a968a6f

Copilot AI reviewed Aug 28, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings August 28, 2026 02:09

Copilot started reviewing on behalf of aleksei-semikozov August 28, 2026 02:09 View session

Copilot AI reviewed Aug 28, 2026

View reviewed changes

Comment thread e2e/playwright/serve.mjs

Comment on lines +44 to +45

const { pathname } = new URL(request.url, `http://localhost:${port}`);

const filePath = path.join(root, decodeURIComponent(pathname));

Navigation Menu

Uh oh!

Add the e2e/playwright package with the component test infrastructure - #34959

Add the e2e/playwright package with the component test infrastructure#34959
aleksei-semikozov wants to merge 18 commits into
DevExpress:mainfrom
aleksei-semikozov:playwright-components-infra

aleksei-semikozov commented Aug 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const { pathname } = new URL(request.url, `http://localhost:${port}`);
		const filePath = path.join(root, decodeURIComponent(pathname));

Uh oh!

Conversation

aleksei-semikozov commented Aug 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants