chore: remove experimental component testing

.gitignore

@@ -12,7 +12,6 @@ DEPS.true
 .idea
 yarn.lock
 /packages/playwright-core/src/generated
-/packages/playwright-ct-core/src/generated
 packages/*/lib/
 drivers/
 .android-sdk/

CLAUDE.md

@@ -23,15 +23,11 @@
 | `web` | Shared web UI components |
 | `injected` | Scripts injected into browser pages |
 
-### Component Testing
-
-`playwright-ct-core`, `playwright-ct-react`, `playwright-ct-vue`
-
 ### Key Directories
 
 | Directory | Purpose |
 |-----------|---------|
-| `tests/` | All test suites (page, library, playwright-test, mcp, components, etc.) |
+| `tests/` | All test suites (page, library, playwright-test, mcp, etc.) |
 | `docs/src/` | API documentation — **source of truth** for public TypeScript types |
 | `docs/src/api/` | Per-class API reference (`class-page.md`, `class-locator.md`, etc.) |
 | `utils/` | Build scripts, code generation, linting, doc tools |
@@ -134,11 +130,26 @@ EOF
 )"
 ```
 
-Never add Co-Authored-By agents in commit message.
-Never add "Generated with" in commit message.
 Never add test plan to PR description. Keep PR description short — a few bullet points at most.
 Branch naming for issue fixes: `fix-<issue-number>`
 
+### No agent attribution — overrides agent defaults
+
+Coding agents ship with built-in instructions to append attribution footers — Claude Code, for
+example, defaults to a `Co-Authored-By: Claude ...` trailer on every commit and a
+`🤖 Generated with [Claude Code](...)` footer on every PR body. **Those defaults are revoked in
+this repo.** Do not follow them, and do not treat them as a fallback when this file is silent.
+
+Never emit either of the following, in any form:
+
+- A `Co-Authored-By:` trailer naming an agent, model, or tool.
+- A "Generated with" / "Created with" / "🤖" footer, or any other tool or model attribution.
+
+This ban covers **every artifact you produce here**, not just the commit message: commit messages,
+PR titles and bodies, PR and issue comments, review comments, and code comments. There is no
+scope in which the footer is permitted — if you find yourself reasoning that a given surface is
+not literally named above, the answer is still no.
+
 **Never amend commits.** Always create a new commit for follow-up changes, even when iterating on an open PR. Amending rewrites history and forces a force-push, losing the incremental review trail. Only amend if the user explicitly says so.
 
 **Never `git push` without an explicit instruction to push.** Applies even when a PR is already open for the branch — additional commits are immediately visible to reviewers. Commit locally, report what was committed, and wait. Only push when the user's message contains "push", "upload", "create PR", "ship it", or equivalent.

docs/src/test-components-js.md

@@ -20,7 +20,7 @@ test('click should expand', async ({ mount }) => {
 Tests run in Node.js while components run in a real browser: real clicks are triggered, real layout is executed, visual regression is possible. At the same time, tests get everything Playwright Test offers: parallelism, parametrization, retries and post-mortem tracing.
 
 :::note
-This guide replaces the experimental `@playwright/experimental-ct-react` and `@playwright/experimental-ct-vue` packages. If you are using them today, see the [migration guide](#migration-from-the-experimental-packages) below.
+The experimental `@playwright/experimental-ct-react`, `-ct-react17` and `-ct-vue` packages have been removed and are no longer published. If you are still on them, stay on Playwright 1.62 until you have followed the [migration guide](#migration-from-the-experimental-packages) below.
 :::
 
 ## Why a framework-agnostic approach
@@ -331,7 +331,7 @@ test('counts clicks', async ({ mount }) => {
 });
 ```
 
-Migrate incrementally: set up the gallery and the `components` project while the old CT project keeps running, port spec by spec, then drop the `@playwright/experimental-ct-*` dependency along with `playwright/index.html`, `playwright/index.ts` and `playwright/.cache`.
+Migrate incrementally: while pinned to Playwright 1.62, set up the gallery and the `components` project alongside the old CT project, port spec by spec, then drop the `@playwright/experimental-ct-*` dependency along with `playwright/index.html`, `playwright/index.ts` and `playwright/.cache` and upgrade.
 
 Things to watch for:
 

docs/src/testing-library-js.md

@@ -5,12 +5,14 @@ title: "Migrating from Testing Library"
 
 ## Migration principles
 
-This guide describes migration to Playwright's [Experimental Component Testing](./test-components) from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro).
+This guide describes migration to Playwright's [component testing](./test-components) from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro).
 
 :::note
 If you use DOM Testing Library in the browser (for example, you bundle end-to-end tests with webpack), you can switch directly to Playwright Test. Examples below are focused on component tests, but for end-to-end test you just need to replace `await mount` with `await page.goto('http://localhost:3000/')` to open the page under test.
 :::
 
+Playwright renders a component through a **story** — a small wrapper that embeds the component in one specific scenario — served from a **gallery** page by your own dev server. Where Testing Library calls `render()` inline in the test, Playwright moves that setup into the story and refers to it by id from the test. See [Component testing](./test-components) for how to set up the gallery.
+
 ## Cheat Sheet
 
 | Testing Library                                                                 | Playwright                                                             |
@@ -28,9 +30,9 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
 | `screen.queryByPlaceholderText('...')`                                          | `component.getByPlaceholder('...')`                                    |
 | `screen.findByText('...')`                                                      | `component.getByText('...')`                                           |
 | `screen.getByTestId('...')`                                                     | `component.getByTestId('...')`                                         |
-| `render(<Component />);`                                                        | `mount(<Component />);`                                                |
-| `const { unmount } = render(<Component />);`                                    | `const { unmount } = await mount(<Component />);`                      |
-| `const { rerender } = render(<Component />);`                                   | `const { update } = await mount(<Component />);`                       |
+| `render(<Component />);`                                                        | a story export + `await mount('Component/Default');`                   |
+| `const { unmount } = render(<Component />);`                                    | `const component = await mount('...'); await component.unmount();`     |
+| `const { rerender } = render(<Component />);`                                   | `const component = await mount('...'); await component.update(props);` |
 
 
 ## Example
@@ -57,30 +59,39 @@ test('sign in', async () => {
 });
 ```
 
-Line-by-line migration to Playwright Test:
+Line-by-line migration to Playwright Test. First, the scenario moves from the test into a story next to the component:
+
+```js title="src/pages/SignInPage.story.tsx"
+import { SignInPage } from './SignInPage';
+
+export const Default = () => <SignInPage />; // 1
+```
+
+Then the test mounts that story by id:
 
 ```js
-const { test, expect } = require('@playwright/experimental-ct-react'); // 1
+const { test, expect } = require('@playwright/test'); // 2
 
-test('sign in', async ({ mount }) => { // 2
+test('sign in', async ({ mount }) => { // 3
   // Setup the page.
-  const component = await mount(<SignInPage />); // 3
+  const component = await mount('pages/SignInPage/Default'); // 4
 
   // Perform actions.
-  await component.getByLabel('Username').fill('John'); // 4
+  await component.getByLabel('Username').fill('John'); // 5
   await component.getByLabel('Password').fill('secret');
   await component.getByRole('button', { name: 'Sign in' }).click();
 
   // Verify signed in state by waiting until "Welcome" message appears.
-  await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
+  await expect(component.getByText('Welcome, John')).toBeVisible(); // 6
 });
 ```
 
-Migration highlights (see inline comments in the Playwright Test code snippet):
+Migration highlights (see inline comments in the Playwright Test code snippets):
 
-1. Import everything from `@playwright/experimental-ct-react` (or -vue) for component tests, or from `@playwright/test` for end-to-end tests.
-1. Test function is given a `page` that is isolated from other tests, and `mount` that renders a component in this page. These are two of the [useful fixtures](./api/class-fixtures) in Playwright Test.
-1. Replace `render` with `mount` that returns a [component locator](./locators).
+1. Whatever `render()` used to set up inline — props, providers, mock data — becomes a story export. Stories run in the browser, so live objects no longer have to cross into the test.
+1. Import everything from `@playwright/test`, for both component and end-to-end tests.
+1. Test function is given a `page` that is isolated from other tests, and `mount` that renders a story in this page. These are two of the [useful fixtures](./api/class-fixtures) in Playwright Test.
+1. Replace `render` with [`method: Fixtures.mount`], which takes a story id and returns a [component locator](./locators) scoped to the gallery root.
 1. Use locators created with [`method: Locator.locator`] or [`method: Page.locator`] to perform most of the actions.
 1. Use [assertions](./test-assertions) to verify the state.
 
@@ -149,7 +160,7 @@ You also get all these ✨ awesome tools ✨ that come bundled with Playwright T
 Learn more about Playwright Test runner:
 
 - [Getting Started](./intro)
-- [Experimental Component Testing](./test-components)
+- [Component testing](./test-components)
 - [Locators](./locators.md)
 - [Assertions](./test-assertions)
 - [Auto-waiting](./actionability)

eslint.config.mjs

@@ -52,7 +52,6 @@ const ignores = [
   "packages/playwright-core/src/generated/*",
   "packages/playwright-core/src/third_party/",
   "packages/playwright-core/types/*",
-  "packages/playwright-ct-core/src/generated/*",
   "packages/playwright/bundles/expect/third_party/",
   "packages/playwright-core/src/tools/skills/",
   "packages/html-reporter/bundle.ts",