Press once whatever a second press would open over or undo
tests / feature (8.4) (push) Successful in 1m50s
tests / feature (8.5) (push) Successful in 1m54s
tests / browser (chrome, chromium) (push) Successful in 7m52s
tests / browser (firefox, firefox) (push) Successful in 11m56s
tests / browser (safari, webkit) (push) Successful in 12m35s

The browser plugin runs every call on a page again when its first
attempt takes over a second, and on the runner a press can. For most
presses that costs nothing. For two kinds it breaks the test: a press
that opens a dialog, a sheet, a full-screen view or a modal rail over
its own trigger, whose second press can never land, and a press that
changes state a second one would change again — a menu trigger, a
toggle, a chip, a range picker's day, a paging key, a Save. The bottom
sheet with preset heights timed out on WebKit that way after the date
picker had on Firefox.

Every such press in the browser suite now goes through pressOnce(), 253
of them across sixteen files, not only the ones the runner happened to
catch; focus moves inside an open view, Escape, links and plain "set"
actions keep the retry, which is harmless for them.

Two samples that were still racing the machine:

- The standard side sheet's exit is caught half-way with its motion
  stretched, as every other mid-exit sample is, and fullSpeed() takes
  the stretch off again before the test times a reopen against the real
  exit. Under load on Linux WebKit it had failed two runs in five; it
  passes ten in ten.
- The switch-and-checkbox row measures its widths once, so it now waits
  for the resize to land and the brand face to load before it does.

Browser 300 passed on Firefox and WebKitGTK in a Linux container held to
two busy cores, and on Chrome, Firefox and WebKit on macOS. Feature 1159
passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
surtic86
2026-09-18 16:15:25 +02:00
co-authored by Claude Opus 5
parent ad230e0f48
commit ebdc2ef2e1
17 changed files with 1170 additions and 578 deletions
+81 -38
View File
@@ -102,8 +102,10 @@ it('starts the rail collapsed across the expanded class and expands it in the la
->assertScript('getComputedStyle('.BOTTOM_BAR.").display === 'none'")
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'false');
$page->click('[data-md-navigation-rail-menu]')
->assertScript(railWidth(256))
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-menu]');
$page->assertScript(railWidth(256))
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-scrim]')).display === 'none'")
->assertScript("document.getElementById('content').closest('[aria-hidden=\"true\"]') === null")
@@ -194,7 +196,10 @@ it('morphs the rail header FAB between collapsed (icon only) and extended (with
->assertScript("getComputedStyle({$label}).maxWidth === '0px'")
->assertScript("Math.round({$fab}.getBoundingClientRect().width) === Math.round({$fab}.getBoundingClientRect().height)");
$page->click('[data-md-navigation-rail-menu]')
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-menu]');
$page
// The label's width and the FAB's own shape both spring on the rail's spatial-default
// transition; wait past it for the settled, extended end state.
->wait(0.6)
@@ -216,8 +221,10 @@ it('expands the rail from large, and keeps it collapsed across a reload from the
->assertScript("window.eval('window.firstPaint.width') === '256px'")
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'true');
$page->click('[data-md-navigation-rail-menu]')
->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'")
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-menu]');
$page->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'")
->assertScript("localStorage.getItem('material-rail') === 'collapsed'")
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'false')
->assertScript(railWidth(96));
@@ -249,8 +256,12 @@ it('opens the modal rail from its menu button below expanded, holding focus unti
// From the keyboard: WebKit neither focuses a button on click nor returns focus to one that never had it.
$page->script("document.querySelector('[data-md-navigation-rail-menu]').focus()");
$page->keys('[data-md-navigation-rail-menu]', 'Enter')
->assertScript(RAIL.".hasAttribute('data-md-open')")
// Enter on the focused button is a native click on it, and it toggles the rail: pressOnce(),
// tests/Pest.php.
pressOnce($page)->keys('[data-md-navigation-rail-menu]', 'Enter');
$page->assertScript(RAIL.".hasAttribute('data-md-open')")
->assertScript('Math.round('.RAIL_PANEL.'.getBoundingClientRect().width) === 256')
->assertScript(railWidth(96))
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-heading]')).display !== 'none'")
@@ -263,19 +274,26 @@ it('opens the modal rail from its menu button below expanded, holding focus unti
->assertScript("document.getElementById('content').closest('[aria-hidden=\"true\"]') === null")
->assertScript("document.activeElement === document.querySelector('[data-md-navigation-rail-menu]')");
$page->keys('[data-md-navigation-rail-menu]', 'Enter')
->assertScript(RAIL.".hasAttribute('data-md-open')");
// Enter on the focused button is a native click on it, and it toggles the rail: pressOnce(),
// tests/Pest.php.
pressOnce($page)->keys('[data-md-navigation-rail-menu]', 'Enter');
$page->click('[data-md-navigation-rail-scrim]')
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
$page->assertScript(RAIL.".hasAttribute('data-md-open')");
// The scrim closes the modal rail: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-scrim]');
$page->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
->assertScript("localStorage.getItem('material-rail') === null");
});
it('slides the modal rail in on a compact window from the app bar\'s menu button', function () {
$page = shellPage(599, 860);
$page->click('@shell-menu')
->assertScript(RAIL.".hasAttribute('data-md-open')")
// Opens the modal rail over the button that triggers it: pressOnce(), tests/Pest.php.
pressOnce($page)->click('@shell-menu');
$page->assertScript(RAIL.".hasAttribute('data-md-open')")
->assertScript('getComputedStyle('.RAIL_PANEL.").display === 'flex'")
->assertScript('Math.round('.RAIL_PANEL.'.getBoundingClientRect().left) === 0')
->assertScript(RAIL_PANEL.'.contains(document.activeElement)');
@@ -288,8 +306,10 @@ it('slides the modal rail in on a compact window from the app bar\'s menu button
it('keeps the rail and the theme through wire:navigate and moves aria-current', function () {
$page = shellPage(1200);
$page->click('[data-md-navigation-rail-menu]')
->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'");
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-menu]');
$page->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'");
$page->script("window.eval(\"Alpine.store('theme').set('dark'); window.samePage = true\")");
@@ -454,14 +474,19 @@ it('takes a rail out of the layout entirely when it hides collapsed, and back ov
$rail = "document.querySelector('#hiding-rail [data-md-navigation-rail]')";
$railWidth = "Math.round({$rail}.getBoundingClientRect().width)";
$page->assertScript("{$railWidth} > 200")
->click('#hiding-rail [data-md-navigation-rail-menu]')
->assertScript("{$railWidth} === 0")
$page->assertScript("{$railWidth} > 200");
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('#hiding-rail [data-md-navigation-rail-menu]');
$page->assertScript("{$railWidth} === 0")
->assertScript("! {$rail}.hasAttribute('data-md-open')");
// The only way back: an application's own menu button calling $store.rail.show().
$page->click('#open-hiding-rail')
->assertScript("{$rail}.hasAttribute('data-md-open')")
// The only way back: an application's own menu button calling $store.rail.show(), which opens
// the rail back over the page: pressOnce(), tests/Pest.php.
pressOnce($page)->click('#open-hiding-rail');
$page->assertScript("{$rail}.hasAttribute('data-md-open')")
->assertScript("getComputedStyle(document.querySelector('#hiding-rail [data-md-navigation-rail-panel]')).display === 'flex'")
->assertNoJavaScriptErrors();
});
@@ -471,8 +496,10 @@ it('docks a rail that hid itself back into the layout from $store.rail.toggle(),
$rail = "document.querySelector('#hiding-rail [data-md-navigation-rail]')";
$railWidth = "Math.round({$rail}.getBoundingClientRect().width)";
$page->click('#hiding-rail [data-md-navigation-rail-menu]')
->assertScript("{$railWidth} === 0");
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('#hiding-rail [data-md-navigation-rail-menu]');
$page->assertScript("{$railWidth} === 0");
// The first interactive rail on the page is this one: the narrow rail above it is fixed.
$page->script(TOGGLE_RAIL);
@@ -620,9 +647,12 @@ it('moves an adaptive rail\'s value with the window and the menu button, in step
// `expanded`: collapsed until the menu button widens it in place.
$page->resize(840, 900)
->assertScript(RAIL_VALUE." === 'collapsed'")
->click('[data-md-navigation-rail-menu]')
->assertScript(railWidth(256))
->assertScript(RAIL_VALUE." === 'collapsed'");
// The menu button toggles the rail on every press: pressOnce(), tests/Pest.php.
pressOnce($page)->click('[data-md-navigation-rail-menu]');
$page->assertScript(railWidth(256))
->assertScript(RAIL_VALUE." === 'expanded'")
->assertScript(railShows('expanded-only'))
->assertNoJavaScriptErrors();
@@ -633,8 +663,10 @@ it('reads expanded while a modal rail is open over the page, and collapsed once
->assertScript(RAIL_VALUE." === 'collapsed'")
->assertScript('! '.railShows('expanded-only'));
$page->click('#open-rail')
->assertScript(RAIL.".hasAttribute('data-md-open')")
// Opens the modal rail over the button that triggers it: pressOnce(), tests/Pest.php.
pressOnce($page)->click('#open-rail');
$page->assertScript(RAIL.".hasAttribute('data-md-open')")
->assertScript(RAIL_VALUE." === 'expanded'")
->assertScript(railShows('expanded-only'))
->assertScript('! '.railShows('collapsed-only'));
@@ -665,9 +697,12 @@ function slidingOut(string $panel): string
}
it('slides the compact rail out on close, rather than making it vanish', function () {
$page = shellPage(599, 860)
->click('@shell-menu')
->assertScript(RAIL.".hasAttribute('data-md-open')")
$page = shellPage(599, 860);
// Opens the modal rail over the button that triggers it: pressOnce(), tests/Pest.php.
pressOnce($page)->click('@shell-menu');
$page->assertScript(RAIL.".hasAttribute('data-md-open')")
->assertScript(settled(RAIL_PANEL))
->assertScript('Math.round('.RAIL_PANEL.'.getBoundingClientRect().left) === 0');
@@ -685,10 +720,15 @@ it('slides a rail that hides when collapsed out on close, rather than making it
$rail = "document.querySelector('#hiding-rail [data-md-navigation-rail]')";
$panel = "{$rail}.querySelector(':scope > [data-md-navigation-rail-panel]')";
$page->click('#hiding-rail [data-md-navigation-rail-menu]')
->assertScript("Math.round({$rail}.getBoundingClientRect().width) === 0")
->click('#open-hiding-rail')
->assertScript("{$rail}.hasAttribute('data-md-open')")
// The menu button toggles the rail, then the open button brings it back over the page:
// pressOnce(), tests/Pest.php.
pressOnce($page)->click('#hiding-rail [data-md-navigation-rail-menu]');
$page->assertScript("Math.round({$rail}.getBoundingClientRect().width) === 0");
pressOnce($page)->click('#open-hiding-rail');
$page->assertScript("{$rail}.hasAttribute('data-md-open')")
->assertScript(settled($panel))
->assertScript("Math.round({$panel}.getBoundingClientRect().left) === 0 && Math.round({$panel}.getBoundingClientRect().width) === 256");
@@ -704,9 +744,12 @@ it('slides a rail that hides when collapsed out on close, rather than making it
it('fades a modal rail\'s scrim out on close while the rail stands collapsed in the layout', function () {
$scrim = RAIL.".querySelector(':scope > [data-md-navigation-rail-scrim]')";
$page = railValueProbe('modal', 1000)
->click('#open-rail')
->assertScript(RAIL.".hasAttribute('data-md-open')")
$page = railValueProbe('modal', 1000);
// Opens the modal rail over the button that triggers it: pressOnce(), tests/Pest.php.
pressOnce($page)->click('#open-rail');
$page->assertScript(RAIL.".hasAttribute('data-md-open')")
->assertScript(settled($scrim))
->assertScript("getComputedStyle({$scrim}).opacity === '1'");