Synthetic Monitoring and E2E Testing: 2 Sides of the Same Coin by Carly Richmond

Use data-test-ID attributes for element locators instead of CSS selectors to make tests more maintainable and resilient to styling changes

Synthetic monitoring and E2E testing can share the same test definitions using monitoring-as-code approaches, reducing duplication and maintenance overhead

Playwright, Elastic Synthetics and GitHub Actions can be combined to implement both E2E tests and synthetic monitors from the same codebase

Common monitoring configuration should be extracted into reusable files, with environment-specific overrides for local development vs production

Don’t use production credentials in tests - use dedicated test accounts or OAuth tokens for authentication

Breaking tests into discrete, reusable steps makes them easier to maintain and helps identify specific failure points

Monitor execution metrics and duration trends to detect potential performance issues early

Cultural barriers between development, QA and SRE teams can be reduced by using shared tools and definitions

Shifting left with practices like monitoring-as-code helps catch issues earlier in the development cycle

Core Web Vitals and other performance metrics should be tracked alongside functional test results for a complete view of application health