chore(tests): Use tags instead of projects Playwright (#16959)

* chore(tests): Use tags instead of projects Playwright

* Tiny fix

* Update libs/testing/e2e/README.md

Co-authored-by: Kristofer <[email protected]>

* Update documentation

* Small fix

---------

Co-authored-by: Kristofer <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/testing/e2e/README.md

@@ -58,12 +58,17 @@ yarn e2e <app-name>
    yarn e2e <app-name> --skip-nx-cache
   ```
 
-- **Run a Specific Project**: Run only the tests defined under a specific project in your Playwright config:
+- **Run Tests with Tags**: Use tags to include or exclude specific tests.
 
   ```bash
-  yarn e2e <app-name> -- --project=smoke
-  yarn e2e <app-name> -- --project=acceptance
-  yarn e2e <app-name> -- --project=everything
+    # Run only tests tagged with @fast
+    yarn e2e <app-name> --grep @fast
+
+    # Exclude tests tagged with @fast
+    yarn e2e <app-name> --grep-invert @fast
+
+    # Run tests tagged with either @fast or @slow
+    yarn e2e <app-name> --grep "@fast|@slow"
   ```
 
 - **View the Test Report**: After running tests, use this command to view the generated report:
@@ -84,6 +89,8 @@ yarn e2e <app-name>
   yarn e2e <app-name> --debug
   ```
 
+For more details on Playwright commands and flags, refer to the [official documentation](https://playwright.dev/docs/test-cli)
+
 ## ✍️ Writing Tests
 
 Run `yarn playwright codegen <url-to-your-app> --output <path/to/your/app/spec.ts>` and modify the output. The selectors need special attention; they should be transformed to use roles or `data-testid` attributes for stability (see below on how to).
@@ -100,14 +107,12 @@ You should therefore aim to write test for:
 
 ### 🏗️ Test structure
 
-Test cases are written in spec files. Tests that do not modify anything (e.g., _create_ an application, _change_ the user’s name, etc.) and verify basic functionality are called **smoke tests**. Tests that are more detailed and/or make any changes at all, are called **acceptance tests**. Test cases are put into folders by what app they are testing, smoke/acceptance test, and each file tests some aspect of an app. Here is an example of the folder layout for testing the search engine and front-page of the `web` project (within the system-e2e app):
+Test cases are written in spec files. Tests are tagged based on their execution time or other criteria. For example, you can use tags like `@fast` for quick tests and `@slow` for longer-running tests. Here is an example of the folder layout for testing the search engine and front-page of the `web` project:
 
 ```shell
 web/                      (app name)
-├── smoke/                (test type)
-│   └── home-page.spec.ts (feature name, kebab-case)
-└── acceptance/
-    └── search.spec.ts
+├── home-page.spec.ts     (feature name, kebab-case)
+└── search.spec.ts
 ```
 
 ### 🗃️ Spec files
@@ -132,7 +137,7 @@ test.describe('Overview part of banking app', () => {
     // Basic state reset, e.g. clear inbox
   })
 
-  test('should get paid', () => {
+  test('should get paid', { tag: '@slow' }, () => {
     // Make user get money using page.selector, page.click, etc.
     // Verify money is present
   })

libs/testing/e2e/src/lib/config/playwright-config.ts

@@ -25,7 +25,7 @@ export const createPlaywrightConfig = ({
   webServerUrl,
   port,
   command,
-  cwd = '../../../',
+  cwd,
   timeoutMs = 5 * 60 * 1000,
 }: PlaywrightConfigParams) =>
   defineConfig({