@cryptotaxi247 / SquadScope / commits / 84e4ac8

test: add Playwright visual tests for cover card placement (#405)

* test: add Playwright visual tests for cover card placement (#358) Add cover image visual verification tests to visual.spec.mjs: - Desktop: verifies .article-cover renders above weekly content - Mobile (375px): verifies responsive cover card rendering The cover/frontmatter support (generate_content.py, article-cover.html, cover-card.html, fallback-card.html, opengraph.html, manage_image_registry.py, validate_content_images.py) is already complete on main. This PR adds the Playwright visual verification pass for cover placements as required by the acceptance criteria. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: address review comments on visual cover tests - Assert cover bounding box is spatially above article content - Restrict mobile cover test to mobile projects only (skip in desktop/wide) - Remove redundant setViewportSize (projects already define viewport) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Juan Manuel Servera committed Jun 12, 2026 at 09:36 UTC 84e4ac87ab9abed8c567f9a15cd3ba11dd5e38c4
1 file changed +29
tests/visual/visual.spec.mjs
+29
@@ -72,3 +72,32 @@ test('yearly 2026 — full page', async ({ page }) => {
72 await settle(page);
73 await expect(page).toHaveScreenshot('yearly-2026.png', { fullPage: true });
74 });
75 +
76 +// ---------------------------------------------------------------------------
77 +// Cover image / fallback visual placement (#358)
78 +// ---------------------------------------------------------------------------
79 +
80 +test('weekly article — cover card renders above content', async ({ page }) => {
81 + await page.goto('/weekly/2026/w22/');
82 + await settle(page);
83 + const cover = page.locator('.article-cover');
84 + await expect(cover).toBeVisible();
85 + // Verify the cover is spatially above the article content
86 + const content = page.locator('.post-content, article .content, .entry-content').first();
87 + const coverBox = await cover.boundingBox();
88 + const contentBox = await content.boundingBox();
89 + if (coverBox && contentBox) {
90 + expect(coverBox.y).toBeLessThan(contentBox.y);
91 + }
92 + await expect(cover).toHaveScreenshot('weekly-cover-card.png');
93 +});
94 +
95 +test('weekly article — cover card responsive (mobile)', async ({ page, browserName }, testInfo) => {
96 + // Only run in mobile projects to avoid redundant viewport override
97 + test.skip(!testInfo.project.name.includes('mobile'), 'mobile-only test');
98 + await page.goto('/weekly/2026/w22/');
99 + await settle(page);
100 + const cover = page.locator('.article-cover');
101 + await expect(cover).toBeVisible();
102 + await expect(cover).toHaveScreenshot('weekly-cover-card-mobile.png');
103 +});