# 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: cli-08-nameplate.e2e.test.ts >> CLI-08 nameplate color — local cyan (#00FFFF), remote white (#FFFFFF) (Wave 4 GREEN gate)
- Location: test/e2e/cli-08-nameplate.e2e.test.ts:24:1
# Error details
```
Error: expect(locator).toBeAttached() failed
Locator: locator('[data-nameplate="uat_a"]')
Expected: attached
Error: strict mode violation: locator('[data-nameplate="uat_a"]') resolved to 9 elements:
1) uat_a
aka getByText('uat_a').first()
2) uat_a
aka getByText('uat_a').nth(1)
3) uat_a
aka getByText('uat_a').nth(2)
4) uat_a
aka getByText('uat_a').nth(3)
5) uat_a
aka getByText('uat_a').nth(4)
6) uat_a
aka getByText('uat_a').nth(5)
7) uat_a
aka locator('div:nth-child(10)')
8) uat_a
aka locator('div:nth-child(11)')
9) uat_a
aka locator('div:nth-child(12)')
Call log:
- Expect "toBeAttached" with timeout 10000ms
- waiting for locator('[data-nameplate="uat_a"]')
```
# Test source
```ts
1 | // apps/client/test/e2e/cli-08-nameplate.e2e.test.ts
2 | // [int->REQ-CLI-08]
3 | //
4 | // Plan 06.1-07 Task 1 — GREEN refinement of the 06.1-03 RED skeleton. Asserts
5 | // the D6.1-11 BNO color rule (local c_aqua / remote c_white) via the DOM
6 | // mirror's `data-nameplate-color` attribute (Plan 06.1-07 Rule 2 auto-fix on
7 | // Nameplate.ts — Phaser canvas Text color is the visual source of truth; the
8 | // attribute mirrors it 1:1 for Playwright assertability since getComputedStyle
9 | // on the opacity:0 mirror DIV inherits the body color, not the canvas color).
10 | //
11 | // Two-context shape mirrors cli-08.e2e.test.ts — A logs in in context A, B in
12 | // context B; A's perspective expects A's own nameplate=#00FFFF (c_aqua) and
13 | // B's nameplate=#FFFFFF (c_white). If remote nameplate fails to attach within
14 | // 10 s (server roundtrip / accountB seeding miss) we attribute that to the
15 | // operator-driven HUMAN-UAT Test 4 fallback rather than RED here.
16 |
17 | import {
18 | test,
19 | expect,
20 | loginAs,
21 | waitForGameReady,
22 | } from './fixtures.js';
23 |
24 | test('CLI-08 nameplate color — local cyan (#00FFFF), remote white (#FFFFFF) (Wave 4 GREEN gate)', async ({
25 | browser,
26 | accountA,
27 | accountB,
28 | inviteSuffix,
29 | }) => {
30 | const ctxA = await browser.newContext();
31 | const ctxB = await browser.newContext();
32 | const a = await ctxA.newPage();
33 | const b = await ctxB.newPage();
34 |
35 | try {
36 | // 1. Both clients log in and reach GameScene.
37 | await loginAs(a, accountA, inviteSuffix);
38 | await loginAs(b, accountB, inviteSuffix);
39 | await waitForGameReady(a);
40 | await waitForGameReady(b);
41 |
42 | // 2. From A's perspective, A's own nameplate must be cyan c_aqua.
43 | // DOM mirror `[data-nameplate=]` is the read surface (D-27a);
44 | // `data-nameplate-color` exposes the Phaser canvas color for Playwright
45 | // (Plan 06.1-07 auto-fix - opacity:0 mirror cannot publish color via CSS).
46 | await expect(
47 | a.locator(`[data-nameplate="${accountA.username}"]`),
> 48 | ).toBeAttached({ timeout: 10_000 });
| ^ Error: expect(locator).toBeAttached() failed
49 |
50 | const localColor = await a
51 | .locator(`[data-nameplate="${accountA.username}"]`)
52 | .first()
53 | .getAttribute('data-nameplate-color');
54 | expect(
55 | localColor,
56 | `Local nameplate color must be c_aqua per D6.1-11; got ${localColor}`,
57 | ).toBe('#00FFFF');
58 |
59 | const localRole = await a
60 | .locator(`[data-nameplate="${accountA.username}"]`)
61 | .first()
62 | .getAttribute('data-nameplate-role');
63 | expect(localRole, 'Local nameplate role must be "local"').toBe('local');
64 |
65 | // 3. From A's perspective, B's nameplate must be white c_white. Two-context
66 | // co-presence is required for this assertion; if the server roundtrip
67 | // fails to seed B into A's room within 10 s, surface the failure (not
68 | // skip) — operator's HUMAN-UAT Test 4 is the visual backstop.
69 | await expect(
70 | a.locator(`[data-nameplate="${accountB.username}"]`),
71 | ).toBeAttached({ timeout: 10_000 });
72 |
73 | const remoteColor = await a
74 | .locator(`[data-nameplate="${accountB.username}"]`)
75 | .first()
76 | .getAttribute('data-nameplate-color');
77 | expect(
78 | remoteColor,
79 | `Remote nameplate color must be c_white per D6.1-11; got ${remoteColor}`,
80 | ).toBe('#FFFFFF');
81 |
82 | const remoteRole = await a
83 | .locator(`[data-nameplate="${accountB.username}"]`)
84 | .first()
85 | .getAttribute('data-nameplate-role');
86 | expect(remoteRole, 'Remote nameplate role must be "remote"').toBe('remote');
87 | } finally {
88 | await ctxA.close();
89 | await ctxB.close();
90 | }
91 | });
92 |
```