test(appearance): click the label, and take the Playwright pin back off

The pin was wrong and so was the reason I gave for it.

I claimed 1.62 had changed what counts as visible, on the strength of
measuring the element under 1.61 and finding it painted. Probed under
1.62 the same element reports isVisible() TRUE. The geometry told me the
element was fine; I turned that into a claim about the tool.

The actual failure, from the log:

  locator.check: Clicking the checkbox did not change its state

A forced click on an `sr-only` radio — a 1px clipped box — that lands
without taking. label-bulk-toggle.spec.ts documents this exact sentence
and works around it, noting it hit "roughly one full run in three". So it
was already broken under 1.61 and merely intermittent; 1.62 made it
reliable. Eight failures at once instead of one every third run is the
tool exposing a broken test, not breaking a working one.

The fix was one helper away in the same file. pick() has always clicked
the LABEL, for the reason its comment gives — the radio is invisible and
the label is what a person clicks. setToggle() never caught up. It does
now, waits for the write it triggers, and asserts the radio actually
moved.

The last straggler was self-inflicted: the corner is a stored preference
restored by afterEach, which used the same broken helper, so my failing
runs left it switched off and the next run's "on by default" assertion
was reading their residue.

578 pass on 1.62.1. The other seven check({ force: true }) sites are
untouched — none of them failed, and rewriting them on suspicion is how
tests acquire workarounds nobody can later justify.

v0.1.16 shipped with the wrong explanation in its notes; the next release
carries the correction rather than a rewritten tag.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

package-lock.json

@@ -6,7 +6,7 @@
         "": {
             "name": "plmail-e2e",
             "devDependencies": {
-                "@playwright/test": "~1.61.1",
+                "@playwright/test": "^1.62.1",
                 "@types/node": "^26.1.2",
                 "typescript": "^7.0.2"
             },
@@ -15,19 +15,19 @@
             }
         },
         "node_modules/@playwright/test": {
-            "version": "1.61.1",
-            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
-            "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+            "version": "1.62.1",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+            "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "playwright": "1.61.1"
+                "playwright": "1.62.1"
             },
             "bin": {
                 "playwright": "cli.js"
             },
             "engines": {
-                "node": ">=18"
+                "node": ">=20"
             }
         },
         "node_modules/@types/node": {
@@ -396,35 +396,35 @@
             }
         },
         "node_modules/playwright": {
-            "version": "1.61.1",
-            "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
-            "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+            "version": "1.62.1",
+            "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+            "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "playwright-core": "1.61.1"
+                "playwright-core": "1.62.1"
             },
             "bin": {
                 "playwright": "cli.js"
             },
             "engines": {
-                "node": ">=18"
+                "node": ">=20"
             },
             "optionalDependencies": {
                 "fsevents": "2.3.2"
             }
         },
         "node_modules/playwright-core": {
-            "version": "1.61.1",
-            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
-            "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+            "version": "1.62.1",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+            "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
             "dev": true,
             "license": "Apache-2.0",
             "bin": {
                 "playwright-core": "cli.js"
             },
             "engines": {
-                "node": ">=18"
+                "node": ">=20"
             }
         },
         "node_modules/typescript": {

package.json

@@ -25,7 +25,7 @@
         "node": ">=18"
     },
     "devDependencies": {
-        "@playwright/test": "~1.61.1",
+        "@playwright/test": "^1.62.1",
         "@types/node": "^26.1.2",
         "typescript": "^7.0.2"
     }

tests/e2e/appearance/list-display.spec.ts

@@ -55,15 +55,32 @@ const toggle = (page: Page, field: string, on = true) =>
 const setToggle = async (page: Page, field: string, on: boolean) => {
     const segment = toggle(page, field, on);
 
-    if (false === (await segment.isChecked())) {
-        // sr-only radio: the visible segment is its sibling label text, so the
-        // input is checked directly, the way the row-select checkbox is.
-        await segment.check({ force: true });
-        // The panel debounces its POST; wait for the write, not for a timeout.
-        await page.waitForResponse(
-            (r) => r.url().includes("/settings/appearance") && r.request().method() === "POST",
-        );
+    if (true === (await segment.isChecked())) {
+        return;
     }
+
+    // The panel debounces its POST; wait for the write, and arm the wait before
+    // the click so a fast answer cannot be missed.
+    const written = page.waitForResponse(
+        (r) => r.url().includes("/settings/appearance") && r.request().method() === "POST",
+    );
+
+    // Click the LABEL, which is both what a person clicks and the only thing
+    // that reliably works. The radio is `peer sr-only` — a 1px clipped box —
+    // and a forced click on one of those lands without changing its state:
+    // Playwright says "clicking the checkbox did not change its state", which
+    // is the same failure label-bulk-toggle.spec.ts documents and works around.
+    // It used to be intermittent and became reliable, which is how it surfaced
+    // as eight failures at once rather than one every third run.
+    //
+    // `pick()` above has always clicked the label for exactly this reason; this
+    // helper simply never caught up with it.
+    await page
+        .locator(`${PANEL} label:has(input[data-toggles="${field}"][value="${on ? "1" : "0"}"])`)
+        .click();
+
+    await expect(segment).toBeChecked();
+    await written;
 };
 
 test.describe("appearance — mail list display", () => {