# Instructions

- Following Playwright test failed.
- Explain why, be concise, respect Playwright best practices.
- Provide a snippet of code with the fix, if possible.

# Test info

- Name: tests/manual-override/manual-override.spec.ts >> Pattern CSS (Manual Override) >> Applying new ID removes old class from className
- Location: tests/manual-override/manual-override.spec.ts:95:6

# Error details

```
Error: apiRequestContext.post: socket hang up
Call log:
  - → POST http://127.0.0.1:9400/wp-login.php
    - user-agent: Playwright/1.59.1 (x64; ubuntu 24.04) node/24.14 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - content-type: application/x-www-form-urlencoded
    - content-length: 22

```

# Test source

```ts
  1   | import { expect, test } from '@wordpress/e2e-test-utils-playwright';
  2   | 
  3   | test.beforeEach(async ({ requestUtils }) => {
> 4   | 	await requestUtils.login();
      |                     ^ Error: apiRequestContext.post: socket hang up
  5   | });
  6   | 
  7   | test.describe('Pattern CSS (Manual Override)', () => {
  8   | 	test('ID input is editable when override is enabled', async ({
  9   | 		admin,
  10  | 		page,
  11  | 		editor,
  12  | 	}) => {
  13  | 		await admin.createNewPost({ title: 'Test post' });
  14  | 		await editor.insertBlock({
  15  | 			name: 'core/paragraph',
  16  | 			attributes: { content: 'Hello' },
  17  | 		});
  18  | 
  19  | 		const editorCanvas = page
  20  | 			.locator('iframe[name="editor-canvas"]')
  21  | 			.contentFrame();
  22  | 
  23  | 		await editor.selectBlocks(
  24  | 			editorCanvas.locator('p[role=document]').first(),
  25  | 		);
  26  | 
  27  | 		// Add CSS so the block gets a class ID
  28  | 		await page.getByRole('button', { name: 'Pattern CSS' }).click();
  29  | 		const cssEditor = page.locator(
  30  | 			'[data-cy="pcss-editor-block"] textarea',
  31  | 		);
  32  | 		await cssEditor.fill('[block] { color: red; }');
  33  | 
  34  | 		// Open the Advanced section in the sidebar
  35  | 		await page.getByRole('button', { name: 'Advanced' }).click();
  36  | 
  37  | 		const idInput = page.getByLabel('Pattern CSS ID');
  38  | 		await expect(idInput).toBeEnabled();
  39  | 	});
  40  | 
  41  | 	test('Apply button appears when ID is dirty and slugifies on apply', async ({
  42  | 		admin,
  43  | 		page,
  44  | 		editor,
  45  | 	}) => {
  46  | 		await admin.createNewPost({ title: 'Test post' });
  47  | 		await editor.insertBlock({
  48  | 			name: 'core/paragraph',
  49  | 			attributes: { content: 'Hello' },
  50  | 		});
  51  | 
  52  | 		const editorCanvas = page
  53  | 			.locator('iframe[name="editor-canvas"]')
  54  | 			.contentFrame();
  55  | 
  56  | 		await editor.selectBlocks(
  57  | 			editorCanvas.locator('p[role=document]').first(),
  58  | 		);
  59  | 
  60  | 		// Add CSS first
  61  | 		await page.getByRole('button', { name: 'Pattern CSS' }).click();
  62  | 		const cssEditor = page.locator(
  63  | 			'[data-cy="pcss-editor-block"] textarea',
  64  | 		);
  65  | 		await cssEditor.fill('[block] { color: red; }');
  66  | 
  67  | 		// Open Advanced
  68  | 		await page.getByRole('button', { name: 'Advanced' }).click();
  69  | 
  70  | 		const idInput = page.getByLabel('Pattern CSS ID');
  71  | 
  72  | 		// Change the ID
  73  | 		await idInput.fill('My Custom Class!');
  74  | 
  75  | 		// Apply button should appear
  76  | 		const applyButton = page.getByRole('button', { name: 'Apply', exact: true });
  77  | 		await expect(applyButton).toBeVisible();
  78  | 
  79  | 		// Click Apply
  80  | 		await applyButton.click();
  81  | 
  82  | 		// Should be slugified
  83  | 		const newId = await page.evaluate(() => {
  84  | 			const blocks = window.wp.data
  85  | 				.select('core/block-editor')
  86  | 				.getBlocks();
  87  | 			return blocks[0]?.attributes?.pcssClassId;
  88  | 		});
  89  | 		expect(newId).toBe('my-custom-class');
  90  | 
  91  | 		// Apply button should be gone
  92  | 		await expect(applyButton).not.toBeVisible();
  93  | 	});
  94  | 
  95  | 	test('Applying new ID removes old class from className', async ({
  96  | 		admin,
  97  | 		page,
  98  | 		editor,
  99  | 	}) => {
  100 | 		await admin.createNewPost({ title: 'Test post' });
  101 | 		await editor.insertBlock({
  102 | 			name: 'core/paragraph',
  103 | 			attributes: { content: 'Hello' },
  104 | 		});
```