Frontend testing

[Ekhorn]

No description provided.

[Copilot]

Pull Request Overview

This PR introduces comprehensive documentation for frontend testing with Playwright in the OpenRemote project. The documentation covers the testing framework setup, organization structure, and best practices for both end-to-end and component testing.

Key Changes

• Added complete frontend testing guide covering Playwright configuration for both app and component testing
• Documented test organization structure with shared test packages and separate configurations
• Provided detailed setup instructions, best practices, and practical tips for writing robust tests

[Copilot]

The term 'frontend-testing' should be consistently written as 'frontend testing' (without hyphen) to match standard English conventions.

Suggested change

OpenRemote uses [Playwright](https://playwright.dev/) for frontend-testing. Playwright was originally created for end-to-end testing i.e. testing through a browser just like how users would interact with an application. This usually requires the backend to run, making end-to-end tests considerably slower than unit- or component tests. Playwright has added an experimental feature for component testing. Allowing you to use the same Playwright APIs on individual components for better test isolation and easier parallelization.

OpenRemote uses [Playwright](https://playwright.dev/) for frontend testing. Playwright was originally created for end-to-end testing i.e. testing through a browser just like how users would interact with an application. This usually requires the backend to run, making end-to-end tests considerably slower than unit- or component tests. Playwright has added an experimental feature for component testing. Allowing you to use the same Playwright APIs on individual components for better test isolation and easier parallelization.

[Copilot]

The phrase 'Relying too heavy on' should be 'Relying too heavily on' - the adverb form 'heavily' is needed here.

Suggested change

	- Avoid `xpath` and `css` selectors. Relying too heavy on the [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) makes you more prone to breaking tests when a CSS class is renamed or removed, or when nested elements are removed.
	- Avoid `xpath` and `css` selectors. Relying too heavily on the [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) makes you more prone to breaking tests when a CSS class is renamed or removed, or when nested elements are removed.

[Copilot]

The word 'affective' should be 'effective' - 'affective' relates to emotions while 'effective' means producing the desired result.

Suggested change

	Sometimes the locators Playwright provides are susceptible to flaky behavior, it is important to understand the DOM structure of the UI to get the most affective locators.
	Sometimes the locators Playwright provides are susceptible to flaky behavior, it is important to understand the DOM structure of the UI to get the most effective locators.