Test Angular App using Playright

[reboottime]

Overview

This article talks about testing angular app using playwright.

[reboottime]

Testing philosophy

Rule 1: Test user-visible behavior

• Automated tests should verify that the application code works for the end users. The end user will see or interact with what is rendered on the page, so your test should typically only see/interact with the same rendered output. (source)
• Ideally, locate elements using accessibility labels and roles, if possible.
• If not possible:
  • Use testId
  • You can configure Playwright-related ID with your own prefix

    import { defineConfig } from '@playwright/test';
    
    export default defineConfig({
      use: {
        testIdAttribute: 'data-pw'
      }
    });

Rule 2: Avoid testing third-party dependencies by mocking third-party responses