7. Juli 2023

TYPO3 Fluid Component end-to-end testing with Playwright.

Flowchart illustrating how a counter Fluid component is populated with JSON fixture data and displayed in the Fluid Styleguide. A corresponding Playwright test clicks on the button and expects the counter to be incremented by one.

My setup for testing TYPO3 frontend code programmatically leverages Playwright to run end-to-end tests on individual Fluid Components. Utilizing Fluid Styleguide’s fixture files, I can populate each component with mock data, enabling isolated testing of each component.

As an extra step, Axe-core is used as a plugin in Playwright for automated accessibility testing.

Playwright runs its tests using headless Chromium, Webkit, and Firefox browsers. For me this turned out especially usefull after updating NPM dependencies: npx taze major -w && ddev npm i && npx playwright test.