Port of Rotterdam (PoR) manages, operates, and develops the port and industrial area of Rotterdam. It aims to enhance the competitive position of Rotterdam’s port in both size and quality. In addition to sustainable development and operations, PoR also facilitates fast and safe handling of maritime shipping.
Collaboration between TAG and Port of Rotterdam
The Digital and Information Technology (D&IT) department is responsible for all ICT services that facilitate and support PoR’s business processes. Within this department, the Harbourmaster Management Information System (HaMIS) plays a crucial role. HaMIS is a mission-critical information system used for managing maritime traffic in Rotterdam’s port.
Since 2017, TAG professionals have been working on the development of HaMIS. It initially started with one test automation engineer tasked with developing a vision/strategy for test automation. Currently, three professionals are working in various DevOps teams to implement and optimize this strategy. The partnership between TAG and PoR strengthened further in 2020 when TAG became the preferred supplier for Automated Testing.
The case
To support its employees, PoR developed HaMIS, consisting of multiple backend services (microservice architecture) and several frontend applications. The central question this case revolves around was:
“We are developing a new web-based frontend application for HaMIS. How do we ensure this application meets all requirements and provides rapid, reproducible insights into the quality of this application?”
Choosing Playwright
When developing the frontend, TestCafé was initially chosen as the test automation framework. However, maintaining the test suite and updating the framework became increasingly labor-intensive, which could negatively impact the delivery of new features. Consequently, an alternative framework was sought that could align with the skill sets of both testers and developers.
Criteria for selecting a new framework included:
- TypeScript support
- Easy integration into the application’s codebase
- Easy maintenance and updates
- Capability for intercepting and mocking API requests
- Easy extensibility
- Visual regression testing support
- Utilization of a Page Object model
Based on our criteria, we created a shortlist of three tools: TestCafé, Cypress, and Playwright. For each tool, we ran a proof of concept to evaluate maintainability, integration into the codebase, and feature coverage. Although Playwright was still a relatively young framework at the time, it satisfied all our criteria and offered clear advantages such as smooth migration of existing page objects, built-in request handling, visual regression testing, and TypeScript support. This made it the optimal choice.
At the time, the Test Automation TechRadar did not yet exist, but if it had, it could have accelerated these steps by showing Playwright in the Adopt ring for Languages & Frameworks and Storybook in the Adopt ring for Tools, with their pros and cons aligning closely to our evaluation criteria.
Since adopting Playwright, test maintenance has become easier, validation for new frontend features takes noticeably less time, and flaky test failures occur less frequently, which has improved overall delivery predictability.
Playwright and Storybook
During further frontend development, the idea arose to implement a component library for common UI components, aiming to reduce the number of E2E tests through separate component tests. Storybook emerged as the logical solution. Following a successful proof of concept, a limited set of components was configured, tested, and integrated into Playwright, delivering rapid configuration and a fast feedback loop, including visual regression testing.
This approach allowed many UI behaviours to be validated at the component level, significantly reducing the need for slower full E2E checks.
This was a clear example of combining tools from different quadrants of the Test Automation TechRadar to create a balanced strategy. Using Storybook for fast, isolated component validation alongside Playwright for full end-to-end scenarios resulted in faster feedback, reduced flaky tests, and lower maintenance effort without compromising coverage. With Storybook V8 and the latest V9 release focusing more on Playwright testing, PoR has made a future-proof choice.
Conclusions
We are highly satisfied with Playwright. We utilize an extensive Page Object model and have extended Playwright with Fixtures (e.g., for test data) and custom assertions. Using the Route object, we effectively mock and monitor GraphQL requests.
Playwright receives regular updates, aligning well with our frontend technology choices. However, we remain vigilant for potential changes internally and externally, particularly regarding the stability and security-related dependency management of Playwright by Microsoft. Our Test Guild regularly discusses and evaluates market developments to continually provide PoR with optimal testing solutions.
At the time, the Test Automation TechRadar did not yet exist, but if it had, it could have accelerated these steps by showing Playwright in the Adopt ring for Languages & Frameworks and Storybook in the Adopt ring for Tools — with their pros and cons aligning closely to our evaluation criteria.
— Test Automation Lead, Port of Rotterdam