Responsive visual QA
A responsive Fission screen should be tested at the sizes users will actually see.
The minimum useful matrix is phone portrait, phone landscape, tablet, desktop, and narrow embedded panel if the widget can be mounted inside another app.
for (name, width, height) in [
("phone", 390, 844),
("tablet", 820, 1180),
("desktop", 1440, 960),
] {
client.simulate_resize(width, height)?;
client.wait_for_idle(2_000, false)?;
let screenshot = format!(".artifacts/screens/{name}.png");
client.screenshot(&screenshot)?;
}
After each resize, assert product meaning before comparing pixels.
client.wait_for_visible(SelectorQuery::semantic_identifier("mail.thread_list"), 5_000)?;
client.compare_golden("tests/goldens/mail-desktop.png", Some(".artifacts/diffs/mail-desktop.png"), GoldenOptions::default())?;
Use semantic identifiers for regions and controls so tests do not depend on fragile text or coordinates.