fixing flaky tests (#4772)

.changeset/nice-emus-grin.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Fixing flaky e2e tests

playwright/pages/configurationPage.ts

@@ -63,6 +63,10 @@ export class ConfigurationPage {
   async openPlugins() {
     await this.pluginsButton.click();
   }
+
+  async goToConfirgurationView() {
+    await this.page.goto(URL_LIST.configuration);
+  }
   async openWebhooksAndEvents() {
     await this.webhooksAndEventsButton.click();
   }

playwright/pages/dialogs/addProductsDialog.ts

@@ -9,8 +9,10 @@ export class AddProductsDialog {
     readonly variantRow = page.getByTestId("variant"),
     readonly backButton = page.getByTestId("back-button"),
     readonly confirmButton = page.getByTestId("confirm-button"),
-    readonly productRowCheckbox = page.getByTestId("checkbox"),
+    readonly checkbox = page.getByTestId("checkbox").getByRole("checkbox"),
+    readonly productCheckbox = page.getByTestId("product").getByTestId("checkbox"),
     readonly assignAndSaveButton = page.getByTestId("assign-and-save-button"),
+    readonly searchInput = page.getByTestId("search-query").locator("input"),
   ) {
     this.page = page;
   }
@@ -22,13 +24,13 @@ export class AddProductsDialog {
     await this.confirmButton.click();
   }
 
-  async selectVariantWithSkuOnListAndConfirm(variantSku = "61630747") {
-    await this.variantRow
-      .filter({ has: this.page.locator(`text=SKU ${variantSku}`) })
-      .locator(this.productRowCheckbox)
-      .click();
-    await this.clickConfirmButton();
-    await this.productRow.first().waitFor({state:"hidden"})
-    await expect(this.productRow.first()).not.toBeVisible();
+  async searchForProductInDialog(productName: string) {
+    await this.searchInput.fill(productName);
   }
+
+async selectVariantBySKU(sku: string) {
+const variant = this.variantRow.filter({hasText:`SKU ${sku}`})
+await variant.waitFor({state:"visible"});
+await variant.getByRole("checkbox").click();
+}
 }

playwright/pages/dialogs/assignProductsDialog.ts

@@ -0,0 +1,32 @@
+import { Page } from "@playwright/test";
+
+export class AssignProductsDialog {
+  readonly page: Page;
+
+  constructor(
+    page: Page,
+    readonly productRow = page.getByTestId("product-row"),
+    readonly backButton = page.getByTestId("back"),
+    readonly assignButton = page.getByTestId("assign-and-save-button"),
+    readonly assignAndSaveButton = page.getByTestId("assign-and-save-button"),
+    readonly searchInput = page.getByTestId("search-bar").locator("input"),
+  ) {
+    this.page = page;
+  }
+
+  async clickAssignButton() {
+    await this.assignButton.click();
+  }
+  async clickBackButton() {
+    await this.backButton.click();
+  }
+
+  async searchForProductInDialog(productName: string) {
+    await this.searchInput.fill(productName);
+  }
+async selectProduct(name: string) {
+const product = this.productRow.filter({hasText:name})
+await product.waitFor({state:"visible"});
+await product.getByRole("checkbox").click();
+}
+}

playwright/pages/dialogs/productCreateDialog.ts

@@ -1,4 +1,5 @@
 import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
 
 export class ProductCreateDialog {
   readonly page: Page;
@@ -15,9 +16,10 @@ export class ProductCreateDialog {
   ) {
     this.page = page;
   }
-  async selectProductTypeWithVariants() {
-    await this.dialogProductTypeInput.fill("beer");
-    await this.promptedOptions.filter({ hasText: "Beer" }).first().click();
+  async selectProductTypeWithVariants(productType: string = "Beer") {
+    await this.dialogProductTypeInput.fill(productType);
+    await this.promptedOptions.filter({ hasText: productType }).first().click();
+    await this.promptedOptions.waitFor({ state: "hidden", timeout: 30000});
     await this.confirmButton.waitFor({ state: "visible", timeout: 30000});
   }
   async clickConfirmButton() {

playwright/pages/productPage.ts

@@ -74,6 +74,8 @@ export class ProductPage extends BasePage {
     readonly costPriceInput = page.locator("[name*='costPrice']"),
     readonly sellingPriceInput = page.locator("[name*='channel-price']"),
     readonly firstRowDataGrid = page.locator("[data-testid='glide-cell-1-0']"),
+    readonly searchInput = page.getByTestId("search-input"),
+    readonly emptyDataGridListView = page.getByTestId("empty-data-grid-text"),
   ) {
     super(page);
     this.basePage = new BasePage(page);
@@ -89,14 +91,17 @@ export class ProductPage extends BasePage {
     const createProductUrl = `${URL_LIST.products}${URL_LIST.productsAdd}${productTypeId}`;
     await console.log("Navigating to create product view: " + createProductUrl);
     await this.page.goto(createProductUrl);
-    await expect(this.basePage.pageHeader).toBeVisible({ timeout: 10000 });
+    await this.pageHeader.waitFor({ state: "visible", timeout: 50000 });
+  }
+  async searchforProduct(productName: string) {
+    await this.searchInput.fill(productName);
+    await this.waitForGrid();
   }
-
   async gotoExistingProductPage(productId: string) {
     const existingProductUrl = `${URL_LIST.products}${productId}`;
     console.log(`Navigating to existing product: ${existingProductUrl}`);
     await this.page.goto(existingProductUrl);
-    await expect(this.basePage.pageHeader).toBeVisible({ timeout: 10000 });
+    await this.pageHeader.waitFor({ state: "visible", timeout: 50000 });
   }
 
   async clickDeleteProductButton() {

playwright/pages/shippingMethodsPage.ts

@@ -81,7 +81,7 @@ export class ShippingMethodsPage extends BasePage {
       .locator(this.page.getByTestId("selected-options"))
       .waitFor({
         state: "visible",
-        timeout: 10000,
+        timeout: 60000,
       });
   }
 
@@ -96,7 +96,7 @@ export class ShippingMethodsPage extends BasePage {
 
     await this.shippingRateNameInput.waitFor({
       state: "visible",
-      timeout: 10000,
+      timeout: 60000,
     });
   }
 

playwright/pages/shippingRatesPage.ts

@@ -1,14 +1,15 @@
 import { BasePage } from "@pages/basePage";
 import { AddPostalCodeDialog } from "@pages/dialogs/addPostalCodeDialog";
-import { AddProductsDialog } from "@pages/dialogs/addProductsDialog";
+import { AssignProductsDialog } from "@pages/dialogs/assignProductsDialog";
+
 import { RightSideDetailsPage } from "@pages/pageElements/rightSideDetailsSection";
 import type { Page } from "@playwright/test";
 
 export class ShippingRatesPage {
   readonly page: Page;
   readonly basePage: BasePage;
   readonly rightSideDetailsPage: RightSideDetailsPage;
-  readonly addProductsDialog: AddProductsDialog;
+  readonly assignProductsDialog: AssignProductsDialog;
   readonly addPostalCodeDialog: AddPostalCodeDialog;
 
   constructor(
@@ -30,6 +31,7 @@ export class ShippingRatesPage {
     ),
     readonly saveButton = page.getByTestId("button-bar-confirm"),
     readonly assignProductButton = page.getByTestId("assign-product-button"),
+    readonly assignExcludedProductsDialog = page.getByTestId("assign-products-dialog-content"),
     readonly priceInput = page.getByTestId("price-input"),
     readonly minValueInput = page.getByTestId("min-value-price-input"),
     readonly minWeightInput = page
@@ -47,16 +49,17 @@ export class ShippingRatesPage {
   ) {
     this.page = page;
     this.basePage = new BasePage(page);
-    this.addProductsDialog = new AddProductsDialog(page);
+    this.assignProductsDialog = new AssignProductsDialog(page);
     this.addPostalCodeDialog = new AddPostalCodeDialog(page);
     this.rightSideDetailsPage = new RightSideDetailsPage(page);
   }
 
-  async addFirstAvailableExcludedProduct() {
+  async addExcludedProduct(name:string) {
     await this.assignProductButton.click();
-    await this.addProductsDialog.productRowCheckbox.first().click();
-    await this.addProductsDialog.assignAndSaveButton.click();
-    await this.addProductsDialog.assignAndSaveButton.waitFor({
+    await this.assignProductsDialog.searchForProductInDialog(name);
+    await this.assignProductsDialog.selectProduct(name);
+       await this.assignProductsDialog.assignAndSaveButton.click();
+    await this.assignProductsDialog.assignAndSaveButton.waitFor({
       state: "hidden",
       timeout: 5000,
     });

playwright/tests/apps.spec.ts

@@ -45,6 +45,7 @@ test("TC: SALEOR_120 User should be able to delete thirdparty app @e2e", async (
   const appPage = new AppPage(page);
 
   await appPage.goToExistingAppPage(APPS.appToBeDeleted.id);
+  await appPage.pageHeader.waitFor({state: "visible", timeout: 10000});
   await expect(appPage.pageHeader).toContainText("Adyen");
   await appPage.deleteButton.click();
   await appPage.deleteAppDialog.clickDeleteButton();

playwright/tests/attributes.spec.ts

@@ -84,8 +84,7 @@ for (const attr of attributeClasses) {
       await attributesPage.clickValueRequiredCheckbox();
       await attributesPage.clickSaveButton();
       await attributesPage.expectSuccessBanner();
-          await (attributesPage.valueRequiredCheckbox).waitFor({ state: "visible", timeout: 10000});
-
+      await (attributesPage.valueRequiredCheckbox).waitFor({ state: "visible", timeout: 10000});
       await expect(attributesPage.valueRequiredCheckbox).toBeEnabled();
       await expect(attributesPage.attrVisibleInStorefrontSwitch).toBeChecked();
       await expect(attributesPage.valueRequiredCheckbox).not.toBeChecked();
@@ -108,6 +107,7 @@ for (const attribute of attributesWithValuesToBeUpdated) {
     await attributesPage.editAttributeValueDialog.saveNewAttributeValue();
     await attributesPage.clickAssignAttributeValueButton();
     await attributesPage.addValueDialog.typeAndSaveAttributeValue(`new value for ${attribute.name}`);
+    await attributesPage.expectSuccessBanner()
     await attributesPage.clickSaveButton();
     await attributesPage.expectSuccessBanner();
     await expect(attributesPage.attrValuesSection).not.toContainText(attribute.valueToBeDeleted);
@@ -157,5 +157,6 @@ test("TC: SALEOR_130 Bulk delete attributes @e2e @attributes", async () => {
   await attributesPage.clickOnSpecificPositionOnPage(60, 136)
   await attributesPage.clickBulkDeleteGridRowsButton();
   await attributesPage.deleteAttributesInBulkDialog.deleteSelectedAttributes();
+  await attributesPage.expectSuccessBanner();
   await expect(attributesPage.emptyDataGridListView).toBeVisible();
   });