Playwright test example

[mgalang]

Ticket WQS-115

Changes

This pull request introduces Playwright for end-to-end (E2E) browser testing, including all necessary configuration and documentation updates. It adds Playwright test dependencies, a reusable Drupal test base, an example E2E test, and a GitHub Actions workflow for running Playwright tests in CI. It also updates DDEV configuration for local Playwright support and documents the new testing workflow.

Playwright E2E Testing Integration

• Added Playwright configuration (playwright.config.ts) for multi-browser testing, parallelization, and CI compatibility.
• Added a custom test base (tests/helpers/drupal-test.ts) using @drupal/playwright to provide Drupal-specific test helpers.
• Added an example Playwright test (tests/example.spec.ts) demonstrating basic Drupal page creation.

Dependency and Environment Setup

• Updated package.json to add Playwright, TypeScript, Faker, and @drupal/playwright as dependencies, and set "type": "module". [1] [2] [3]
• Updated .ddev/config.yaml to install Playwright browsers and set environment variables for Playwright tests. [1] [2]

Continuous Integration

• Added a GitHub Actions workflow (.github/workflows/playwright.yml) to run Playwright tests on pushes and pull requests, including playwright report upload.

Documentation

• Updated README.md with clear instructions for running PHPUnit and Playwright tests, including setup, commands, and test structure.

Testing

1. Clone the repository
2. Start the ddev environment: ddev start
3. Install drupal: ddev drush si standard
4. Run the example playwright test: ddev npx playwright test
5. See the report and confirm the tests passes: npx playwright show-report

Additionally, check that the tests are running and passing in the CI (github actions): https://github.com/wunderio/drupal-project/actions/runs/26224491021/job/77167782032

[tormi]

Hi Marc, nice Playwright CI setup!

I recommend trying this workflow with DDEV and CircleCI as well. I created another experimental PR using yours as a base to try out: #467

Why consider this approach?

1. The project already uses DDEV and CircleCI.
2. Your workflow uses pure PHP/Node + MariaDB services, which is different from a local developer workflow.
3. Matching local and CI reduces potential "works locally, fails in CI" issues.

[tormi]

Great work, @mgalang! I added some suggestions for further discussions.

[mgalang]

Updates:

• Added tags
• Added authentication with stored state
• Added ddev containers to github workflow

[tormi]

Looking great, RTBC!

[tormi]

Minor:

Warning: Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/upload-artifact@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/

[mgalang]

Minor:

Warning: Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/upload-artifact@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/

Seems like this is an issue with github actions itself, I have updated the action version to the latest and it still gets the error.

[tormi]

Looking good, Node.js 20 actions are deprecated warning is gone. RTBC.