docs: update e2e-testing guide and skill for official integrations

2026-09-14 13:54:52 +08:00 · 2026-07-07 12:50:35 -04:00
parent 39ea1c559f
commit 3cd98ffc1f
2 changed files with 30 additions and 57 deletions
@@ -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

@@ -1,66 +1,39 @@
 # 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`.
+Add supported E2E frameworks to the project using `ng add`:

-1.  **Build DevTools:** The E2E tests run against a built version of the devtools extension. You must build it first:
+- **Playwright:**
+  ```shell
+  ng add playwright-ng-schematics
+  ```
+- **Cypress:**
+  ```shell
+  ng add @cypress/schematic
+  ```
+- **Nightwatch:**
+  ```shell
+  ng add @nightwatch/schematics
+  ```
+- **WebdriverIO:**
+  ```shell
+  ng add @wdio/schematics
+  ```
+- **Puppeteer:**
+  ```shell
+  ng add @puppeteer/ng-schematics
+  ```

-    ```shell
-    pnpm -F ng-devtools-mcp build:dev
-    ```
+Run E2E tests:

-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();
-
-    // Interact with the test application to generate profiling data
-    cy.get('body').find('#cards button').first().click();
-    cy.wait(500);
-
-    // Stop recording
-    cy.get('button[aria-label="stop-recording-button"]').click();
-
-    // Assert that the flame graph is now visible
-    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
-  });
-});
+```shell
+ng e2e [project] [options]
 ```

-### 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.