test(ktl-4093): added test to case study anchor scrolling

Author: berezinant

test/e2e/case-studies.spec.ts

@@ -70,4 +70,17 @@ test.describe('Case-studies landing page', async () => {
 
         expect(page.url()).toContain('type=server-side');
     });
-});
+
+
+    test('Case-studies: should show the case card in the viewport when opening the page with anchor link', async ({ page }) => {
+        const caseStudiesPage = new CaseStudiesPage(page);
+        await caseStudiesPage.init();
+
+        const lastCaseCardId = await caseStudiesPage.gridItem.last().getAttribute('id');
+
+        await caseStudiesPage.init(lastCaseCardId);
+
+        const lastCard = caseStudiesPage.gridBlock.locator(`#${lastCaseCardId}`).first();
+        await expect(lastCard).toBeInViewport();
+    });
+});

test/page/case-studies-page.ts

@@ -38,8 +38,9 @@ export class CaseStudiesPage implements PageWithGlobalSearch {
         this.gridItem = this.gridBlock.getByTestId('case-studies-card');
     }
 
-    async init() {
-        await this.page.goto('/case-studies/');
+    async init(caseId? : string) {
+        const hash = caseId ? `#${caseId}` : '';
+        await this.page.goto(`/case-studies/${hash}`);
         await this.layout.waitFor();
     }