$ cat ~/writing/til/e2e-keys-race-hydration.md
Keyboard e2e tests can race hydration
Pressing keys right after page.goto can beat the React effect that attaches the listener. Wait for a ready marker.
- written
- tags
- playwright · testing · react
The vim-key tests passed locally and failed on CI. Playwright pressed j as soon as the page loaded, but on a slower runner the keydown listener, attached in an effect, wasn't there yet.
The fix: the component marks itself once it's listening, and the tests wait for that.
nav.setAttribute("data-vim-keys", "on");await page.goto(path);
await expect(page.locator('nav[data-vim-keys="on"]').first()).toBeAttached();