pagination product list view test (#4536)

* pagination product list view test

* Trigger Build

* change cell to get text from

.changeset/cool-fishes-buy.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Using pagination on product list view test

playwright/pages/basePage.ts

@@ -8,21 +8,50 @@ export class BasePage {
   constructor(
     page: Page,
     readonly pageHeader = page.getByTestId("page-header"),
-    readonly searchInputListView = page.getByTestId("search-input"),
     readonly gridCanvas = page.locator('[data-testid="data-grid-canvas"]'),
     readonly gridInput = page
       .locator('[class="clip-region"]')
       .locator("textarea"),
     readonly successBanner = page.locator(LOCATORS.successBanner),
     readonly errorBanner = page.locator(LOCATORS.errorBanner),
     readonly infoBanner = page.locator(LOCATORS.infoBanner),
+    readonly previousPagePaginationButton = page.getByTestId(
+      "button-pagination-back",
+    ),
+    readonly rowNumberButton = page.getByTestId("PaginationRowNumberSelect"),
+    readonly nextPagePaginationButton = page.getByTestId(
+      "button-pagination-next",
+    ),
+    readonly searchInputListView = page.getByTestId("search-input"),
   ) {
     this.page = page;
   }
 
+  async getGridCellText(rowNumber: number, tdNumber: number) {
+    const cellText = await this.gridCanvas
+      .locator("table tbody tr")
+      .nth(rowNumber)
+      .locator("td")
+      .nth(tdNumber)
+      .innerText();
+
+    return cellText;
+  }
+
   async typeInSearchOnListView(searchItem: string) {
     await this.searchInputListView.fill(searchItem);
   }
+  async clickNextPageButton() {
+    await this.nextPagePaginationButton.click();
+    await expect(this.errorBanner).not.toBeVisible();
+  }
+  async clickPreviousPageButton() {
+    await this.previousPagePaginationButton.click();
+    await expect(this.errorBanner).not.toBeVisible();
+  }
+  async clickNumbersOfRowsButton() {
+    await this.rowNumberButton.click();
+  }
   async expectGridToBeAttached() {
     await expect(this.gridCanvas).toBeAttached({
       timeout: 10000,

playwright/tests/product.spec.ts

@@ -218,3 +218,34 @@ test("TC: SALEOR_57 As an admin, I should be able to search products on list vie
     await productPage.basePage.gridCanvas.locator("table tbody tr").count(),
   ).toEqual(1);
 });
+
+test("TC: SALEOR_58 As an admin I should be able use pagination on product list view @basic-regression @product @e2e", async ({
+  page,
+}) => {
+  const productPage = new ProductPage(page);
+  await productPage.gotoProductListPage();
+  await productPage.basePage.waitForGrid();
+  const firstPageProductName = await productPage.basePage.getGridCellText(0, 0);
+  await productPage.basePage.clickNextPageButton();
+  await productPage.basePage.waitForGrid();
+  const secondPageProductName = await productPage.basePage.getGridCellText(
+    1,
+    1,
+  );
+  await expect(
+    firstPageProductName,
+    `Second side first product name: ${secondPageProductName} should be visible and be different than: ${firstPageProductName}`,
+  ).not.toEqual(secondPageProductName);
+  await expect(
+    productPage.basePage.gridCanvas,
+    `Product from first page: ${firstPageProductName} should not be visible`,
+  ).not.toContainText(firstPageProductName);
+
+  await productPage.basePage.clickPreviousPageButton();
+  await productPage.basePage.waitForGrid();
+
+  await expect(
+    productPage.basePage.gridCanvas,
+    `Product from first page: ${firstPageProductName} should be visible again`,
+  ).toContainText(firstPageProductName);
+});