e2e-tests: headlamp.spec: Add test for pagination

e2e-tests/tests/headlamp.spec.ts

@@ -86,4 +86,20 @@ test('404 page is present', async ({ page }) => {
   await headlampPage.authenticate();
   await headlampPage.navigateTopage('/404test', /Whoops! This page doesn't exist/);
 });
+
+test('pagination goes to next page', async ({ page }) => {
+  const headlampPage = new HeadlampPage(page);
+  await headlampPage.authenticate();
+
+  const securityPage = new SecurityPage(page);
+  await securityPage.navigateToSecurity();
+  await securityPage.clickOnRolesSection();
+
+  // Check if there is text "Rows per page" on the page
+  await headlampPage.checkPageContent('Rows per page');
+
+  // Check working of pagination
+  await headlampPage.checkRows();
+});
+
 // --- Headlamp tests end --- //

e2e-tests/tests/headlampPage.ts

@@ -47,6 +47,7 @@ export class HeadlampPage {
   }
 
   async checkPageContent(text: string) {
+    await this.page.waitForSelector(`:has-text("${text}")`);
     const pageContent = await this.page.content();
     expect(pageContent).toContain(text);
   }
@@ -97,4 +98,25 @@ export class HeadlampPage {
     await this.page.click(`a:has-text("${pluginName}")`);
     await this.page.waitForLoadState('load');
   }
+
+  async checkRows() {
+    // Get value of rows per page
+    const rowsDisplayed1 = await this.getRowsDisplayed();
+
+    // Click on the next page button
+    const nextPageButton = this.page.getByTitle('Next page');
+    await nextPageButton.click();
+
+    // Get value of rows per page after clicking next page button
+    const rowsDisplayed2 = await this.getRowsDisplayed();
+
+    // Check if the rows displayed are different
+    expect(rowsDisplayed1).not.toBe(rowsDisplayed2);
+  }
+
+  async getRowsDisplayed() {
+    const paginationCaption = this.page.locator("p:has-text(' of ')");
+    const captionText = await paginationCaption.textContent();
+    return captionText;
+  }
 }

e2e-tests/tests/securityPage.ts

@@ -18,4 +18,13 @@ export class SecurityPage {
     // Wait for the page to load
     await this.page.waitForLoadState('load');
   }
+
+  async clickOnRolesSection() {
+    // Wait for the Service Accounts tab to load
+    await this.page.waitForSelector('span:has-text("Roles")');
+    // Click on the "Service Accounts" section
+    await this.page.click('span:has-text("Roles")');
+    // Wait for the page to load
+    await this.page.waitForLoadState('load');
+  }
 }