angular · alejandrocuba · May 27, 2026 · May 28, 2026
diff --git a/skills/dev-skills/angular-developer/SKILL.md b/skills/dev-skills/angular-developer/SKILL.md
@@ -119,7 +119,7 @@ When writing or updating tests, consult the following references based on the ta
 - **Fundamentals**: Best practices for unit testing (Vitest), async patterns, and `TestBed`. Read [testing-fundamentals.md](references/testing-fundamentals.md)
 - **Component Harnesses**: Standard patterns for robust component interaction. Read [component-harnesses.md](references/component-harnesses.md)
 - **Router Testing**: Using `RouterTestingHarness` for reliable navigation tests. Read [router-testing.md](references/router-testing.md)
-- **End-to-End (E2E) Testing**: Best practices for E2E tests with Cypress. Read [e2e-testing.md](references/e2e-testing.md)
+- **End-to-End (E2E) Testing**: Setting up and running E2E tests. Read [e2e-testing.md](references/e2e-testing.md)
 
 ## Tooling
 

diff --git a/skills/dev-skills/angular-developer/references/e2e-testing.md b/skills/dev-skills/angular-developer/references/e2e-testing.md
@@ -1,66 +1,59 @@
 # End-to-End (E2E) Testing
 
-This project uses [Cypress](https://www.cypress.io/) for end-to-end (E2E) testing, which simulates real user interactions in a browser. The E2E tests are located primarily within the `devtools/` package.
+> [!IMPORTANT]
+> Only use the setup guidelines in this file if there is no existing E2E testing framework configured in the workspace, or if the user has explicitly requested to change or set up E2E testing.
 
-## Running E2E Tests
+## Setting Up and Running E2E Tests
 
-The primary way to run E2E tests is through the `pnpm` script defined in the root `package.json`.
-
-1.  **Build DevTools:** The E2E tests run against a built version of the devtools extension. You must build it first:
+Add supported E2E frameworks to the project using `ng add`:
 
+*   **Cypress:**
     ```shell
-    pnpm -F ng-devtools-mcp build:dev
+    ng add @cypress/schematic
+    ```
+*   **Playwright:**
+    ```shell
+    ng add playwright-ng-schematics
+    ```
+*   **Nightwatch:**
+    ```shell
+    ng add @nightwatch/schematics
+    ```
+*   **WebdriverIO:**
+    ```shell
+    ng add @wdio/schematics
+    ```
+*   **Puppeteer:**
+    ```shell
+    ng add @puppeteer/ng-schematics
     ```
 
-2.  **Run Cypress:** Use the `cy:open` or `cy:run` script:
-    - To open the interactive Cypress Test Runner:
-      ```shell
-      pnpm -F ng-devtools-mcp cy:open
-      ```
-    - To run the tests headlessly in the terminal (ideal for CI):
-      ```shell
-      pnpm -F ng-devtools-mcp cy:run
-      ```
-
-## Test Structure
-
-- **Configuration:** The main Cypress configuration is located at `devtools/cypress.json`.
-- **Specs:** Test files (specs) are located in `devtools/cypress/integration/`.
-- **Custom Commands:** Reusable custom commands and actions are defined in `devtools/cypress/support/`.
-
-### Example E2E Test Snippet
-
-A typical test might look like this:
-
-```typescript
-// in devtools/cypress/integration/profiler.spec.ts
-
-describe('Profiler', () => {
-  beforeEach(() => {
-    cy.visit('/?e2e-app');
-    cy.wait(1000);
-    cy.get('ng-devtools-tabs').find('a').contains('Profiler').click();
-  });
-
-  it('should record and display profiling data', () => {
-    // Find the record button and click it
-    cy.get('button[aria-label="start-recording-button"]').click();
+Run E2E tests:
+```shell
+ng e2e [project] [options]
+```
 
-    // Interact with the test application to generate profiling data
-    cy.get('body').find('#cards button').first().click();
-    cy.wait(500);
+### Builder Configuration
+
+E2E runners are configured under the `e2e` target of the application in `angular.json`:
+```json
+"e2e": {
+  "builder": "@cypress/schematic:cypress",
+  "options": {
+    "devServerTarget": "my-app:serve"
+  },
+  "configurations": {
+    "production": {
+      "devServerTarget": "my-app:serve:production"
+    }
+  }
+}
+```
 
-    // Stop recording
-    cy.get('button[aria-label="stop-recording-button"]').click();
+## Creating a Custom E2E Builder
 
-    // Assert that the flame graph is now visible
-    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
-  });
-});
-```
+For advanced runner integrations (e.g., wrapper execution with custom setup/teardown), implement a custom CLI builder following the [Angular CLI Builder Documentation](https://angular.dev/tools/cli/cli-builder#creating-a-builder).
 
-### Best Practices
+## Custom & Enterprise Testing Tools
 
-- **Use `data-` attributes:** Whenever possible, use `data-cy` or similar attributes for selecting elements to make tests more resilient to CSS or structural changes.
-- **Custom Commands:** Encapsulate common sequences of actions into custom commands in the `support` directory to keep tests clean and readable.
-- **Wait for Application State:** Use `cy.wait()` for arbitrary waits sparingly. Prefer to wait for specific UI elements to appear or for network requests to complete to avoid flaky tests.
+For custom enterprise runners (e.g., Katalon Studio, TestCafe, Selenium), define execution commands in `package.json` scripts.