Removed waitForNetworkIdleAfterAction and added direct element waits … (

#5287) * Removed waitForNetworkIdleAfterAction and added direct element waits to ensure readiness before actions. * Remove waitForNetworkIdleAfterAction when it was secure
saleor · Nov 29, 2024 · d9600ab · d9600ab
1 parent e947997
commit d9600ab
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 74 deletions.
diff --git a/.changeset/rare-dolphins-eat.md b/.changeset/rare-dolphins-eat.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Removed waitForNetworkIdleAfterAction and added direct element waits to ensure readiness before actions.
diff --git a/playwright/pages/customersPage.ts b/playwright/pages/customersPage.ts
@@ -28,6 +28,7 @@ export class CustomersPage extends BasePage {
     readonly emailPageTitleText = page.getByTestId("user-email-title"),
     readonly customerActiveCheckbox = page.getByTestId("customer-active-checkbox").locator("input"),
     readonly amountDropdown = page.locator('div[name="balanceCurrency"]'),
+    readonly customerList = page.locator('div[data-test-id="list"]'),
   ) {
     super(page);
     this.addressForm = new AddressForm(page);
@@ -37,19 +38,17 @@ export class CustomersPage extends BasePage {
   }
 
   async goToCustomersListView() {
-    await this.waitForNetworkIdleAfterAction(async () => {
-      await this.page.goto(URL_LIST.customers);
-    });
+    await this.page.goto(URL_LIST.customers);
+    await this.customerList.waitFor({ state: "visible" });
   }
 
   async searchForCustomer(customer: string) {
     await this.searchInputListView.fill(customer);
   }
 
   async gotoCustomerDetailsPage(customerId: string) {
-    await this.waitForNetworkIdleAfterAction(async () => {
-      await this.page.goto(`${URL_LIST.customers}${customerId}`);
-    });
+    await this.page.goto(`${URL_LIST.customers}${customerId}`);
+    await this.customerFirstNameInput.waitFor({ state: "visible" });
   }
 
   async clickOnCreateCustomer() {
@@ -78,9 +77,8 @@ export class CustomersPage extends BasePage {
   }
 
   async clickIssueNewGiftCard() {
-    await this.waitForNetworkIdleAfterAction(async () => {
-      await this.issueNewGiftCardButton.click();
-    });
+    await this.issueNewGiftCardButton.waitFor({ state: "visible" });
+    await this.issueNewGiftCardButton.click();
   }
 
   async clickCustomerActiveCheckbox() {

diff --git a/playwright/pages/dialogs/productCreateDialog.ts b/playwright/pages/dialogs/productCreateDialog.ts
@@ -14,7 +14,7 @@ export class ProductCreateDialog extends BasePage {
   }
 
   async selectProductTypeWithVariants(productType = "Beer") {
-    await this.waitForNetworkIdleAfterAction(() => this.dialogProductTypeInput.fill(productType));
+    await this.dialogProductTypeInput.fill(productType);
     await this.promptedOptions.filter({ hasText: productType }).waitFor({ state: "attached" });
     await this.promptedOptions.filter({ hasText: productType }).click();
   }

diff --git a/playwright/pages/giftCardsPage.ts b/playwright/pages/giftCardsPage.ts
@@ -30,6 +30,7 @@ export class GiftCardsPage extends BasePage {
     readonly resendCodeButton = page.getByTestId("resend-code"),
     readonly deactivateButton = page.getByTestId("enable-button"),
     readonly saveButton = page.getByTestId("button-bar-confirm"),
+    readonly giftCardsCanvas = page.locator('[data-testid="data-grid-canvas"]'),
     readonly cardExpiresCheckboxOnModal = page
       .getByTestId("expiry-section")
       .locator('button[role="checkbox"]'),
@@ -57,7 +58,8 @@ export class GiftCardsPage extends BasePage {
   }
 
   async clickIssueCardButton() {
-    await this.waitForNetworkIdleAfterAction(async () => await this.issueCardButton.click());
+    await this.issueCardButton.waitFor({ state: "visible" });
+    await this.issueCardButton.click();
     await this.giftCardDialog.waitFor({ state: "visible" });
     await this.cardExpiresCheckboxOnModal.waitFor({ state: "visible" });
     await expect(this.cardExpiresCheckboxOnModal).toBeEnabled();
@@ -112,10 +114,8 @@ export class GiftCardsPage extends BasePage {
   }
 
   async gotoGiftCardsListView() {
-    await this.waitForNetworkIdleAfterAction(async () => {
-      await this.page.goto(URL_LIST.giftCards);
-    });
-    await this.waitForDOMToFullyLoad();
+    await this.page.goto(URL_LIST.giftCards);
+    await this.giftCardsCanvas.waitFor({ state: "visible" });
   }
 
   async gotoExistingGiftCardView(giftCardId: string) {

diff --git a/playwright/tests/attributes.spec.ts b/playwright/tests/attributes.spec.ts
@@ -36,7 +36,7 @@ for (const attr of attributeClasses) {
       await expect(attributesPage.attrValuesSection).toBeVisible();
       await attributesPage.clickAssignAttributeValueButton();
       await attributesPage.addValueDialog.typeAndSaveAttributeValue();
-      await attributesPage.waitForNetworkIdleAfterAction(() => attributesPage.clickSaveButton());
+      await attributesPage.clickSaveButton();
       await attributesPage.expectSuccessBanner();
       await expect(await attributesPage.attributesRows.count()).toEqual(1);
       await attributesPage.valueRequiredCheckbox.waitFor({
@@ -72,7 +72,7 @@ for (const attr of attributeClasses) {
       await expect(attributesPage.assignAttributeValueButton).not.toBeVisible();
       await attributesPage.clickValueRequiredCheckbox();
       await attributesPage.changeAttributeVisibility();
-      await attributesPage.waitForNetworkIdleAfterAction(() => attributesPage.clickSaveButton());
+      await attributesPage.clickSaveButton();
       await attributesPage.expectSuccessBanner();
       await attributesPage.valueRequiredCheckbox.waitFor({
         state: "visible",
@@ -105,7 +105,7 @@ for (const attr of attributeClasses) {
       await attributesPage.selectAttributeInputType("REFERENCE");
       await attributesPage.selectAttributeEntityType(entity);
       await attributesPage.clickValueRequiredCheckbox();
-      await attributesPage.waitForNetworkIdleAfterAction(() => attributesPage.clickSaveButton());
+      await attributesPage.clickSaveButton();
       await attributesPage.expectSuccessBanner();
       await attributesPage.valueRequiredCheckbox.waitFor({
         state: "visible",
@@ -134,9 +134,7 @@ const attributesWithValuesToBeUpdated = [productAttrWithValues, contentAttrWithV
 
 for (const attribute of attributesWithValuesToBeUpdated) {
   test(`TC: SALEOR_127 User should be able to update attribute values in existing ${attribute.name} attribute @e2e @attributes`, async () => {
-    await attributesPage.waitForNetworkIdleAfterAction(() =>
-      attributesPage.gotoExistingAttributePage(attribute.id, attribute.name),
-    );
+    await attributesPage.gotoExistingAttributePage(attribute.id, attribute.name);
     await attributesPage.clickDeleteAttrValueButton(attribute.valueToBeDeleted);
     await expect(attributesPage.dialog).toBeVisible();
     await attributesPage.deleteAttributeValueDialog.deleteAttributeValue();
@@ -151,7 +149,7 @@ for (const attribute of attributesWithValuesToBeUpdated) {
       `new value for ${attribute.name}`,
     );
     await attributesPage.expectSuccessBanner();
-    await attributesPage.waitForNetworkIdleAfterAction(() => attributesPage.clickSaveButton());
+    await attributesPage.clickSaveButton();
     await attributesPage.expectSuccessBanner();
     await expect(attributesPage.attrValuesSection).not.toContainText(attribute.valueToBeDeleted);
     await expect(attributesPage.attrValuesSection).toContainText(
@@ -202,9 +200,8 @@ for (const attribute of attributesToBeDeleted) {
       state: "visible",
       timeout: 10000,
     });
-    await attributesPage.waitForNetworkIdleAfterAction(() =>
-      attributesPage.deleteAttributeDialog.deleteAttribute(),
-    );
+    await attributesPage.deleteAttributeDialog.deleteAttribute();
+    await attributesPage.page.getByText("Attribute deleted").waitFor({ state: "visible" });
     await attributesPage.waitForGrid();
     await expect(attributesPage.gridCanvas).not.toContainText(attribute.name);
   });
@@ -217,9 +214,7 @@ test("TC: SALEOR_130 Bulk delete attributes @e2e @attributes", async () => {
   await attributesPage.clickGridCell(0, 1);
   await attributesPage.clickGridCell(0, 2);
   await attributesPage.clickBulkDeleteGridRowsButton();
-  await attributesPage.waitForNetworkIdleAfterAction(() =>
-    attributesPage.deleteAttributesInBulkDialog.deleteSelectedAttributes(),
-  );
+  await attributesPage.deleteAttributesInBulkDialog.deleteSelectedAttributes();
   await attributesPage.expectSuccessBanner();
   await expect(attributesPage.emptyDataGridListView).toBeVisible();
 });
diff --git a/playwright/tests/discounts.spec.ts b/playwright/tests/discounts.spec.ts
@@ -39,9 +39,7 @@ for (const type of discountType) {
 test(`TC: SALEOR_151 Update existing promotion @discounts @e2e`, async () => {
   const newDiscountName = `${faker.lorem.word()}`;
 
-  await discounts.waitForNetworkIdleAfterAction(() =>
-    discounts.gotoExistingDiscount(DISCOUNTS.promotionToBeEdited.id),
-  );
+  await discounts.gotoExistingDiscount(DISCOUNTS.promotionToBeEdited.id);
   await discounts.ruleSection.waitFor({
     state: "visible",
     timeout: 10000,
@@ -70,9 +68,7 @@ const promotions = [
 
 for (const promotion of promotions) {
   test(`TC: SALEOR_153 Delete existing ${promotion.name} @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(promotion.id),
-    );
+    await discounts.gotoExistingDiscount(promotion.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 10000,
@@ -82,9 +78,7 @@ for (const promotion of promotions) {
     });
     await discounts.clickDeleteButton();
     await discounts.deleteDiscountDialog.waitForDOMToFullyLoad();
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.deleteDiscountDialog.clickConfirmDeleteButton(),
-    );
+    await discounts.deleteDiscountDialog.clickConfirmDeleteButton();
     await discounts.expectSuccessBanner();
   });
 }
@@ -115,9 +109,7 @@ const channelName = CHANNELS.channelPLN.name;
 
 for (const { promotionRule, predicateValue } of predicateValues) {
   test(`TC: SALEOR_155 Create ${promotionRule} rule for ${predicateValue} in a catalogue promotion @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(promotion.id),
-    );
+    await discounts.gotoExistingDiscount(promotion.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 10000,
@@ -164,9 +156,7 @@ const orderPromotion = DISCOUNTS.orderPromotion;
 
 for (const { conditionType, value, conditionDesc } of notEqConditions) {
   test(`TC: SALEOR_157 Create subtotal type rule with multiple conditions with ${conditionDesc} in order promotion @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(orderPromotion.id),
-    );
+    await discounts.gotoExistingDiscount(orderPromotion.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 10000,
@@ -207,9 +197,7 @@ const conditionsBetween = [condition1, condition2];
 
 for (const { condition, lte, gte } of conditionsBetween) {
   test(`TC: SALEOR_160 Create gift reward rule with ${condition} between ${gte} and ${lte} in order promotion @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(orderPromotion.id),
-    );
+    await discounts.gotoExistingDiscount(orderPromotion.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 10000,
@@ -228,9 +216,7 @@ for (const { condition, lte, gte } of conditionsBetween) {
     await discounts.promotionRuleDialog.selectPredicate(`${condition} price`);
     await discounts.promotionRuleDialog.selectRuleConditionType("between");
     await discounts.promotionRuleDialog.typeRuleConditionBoundaryValues(gte, lte);
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.promotionRuleDialog.clickSaveRuleButton(),
-    );
+    await discounts.promotionRuleDialog.clickSaveRuleButton();
     await discounts.expectSuccessBanner();
     await discounts.ruleSection.waitFor({
       state: "visible",
@@ -251,9 +237,7 @@ const orderRules = [
 
 for (const rule of orderRules) {
   test(`TC: SALEOR_163 Update promotion ${rule.name} from Order promotion @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(DISCOUNTS.orderPromotionWithRulesToBeUpdated.id),
-    );
+    await discounts.gotoExistingDiscount(DISCOUNTS.orderPromotionWithRulesToBeUpdated.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 10000,
@@ -305,9 +289,7 @@ const catalogRules = [
 
 for (const rule of catalogRules) {
   test(`TC: SALEOR_166 Update promotion ${rule.name} from Catalog promotion @discounts @e2e`, async () => {
-    await discounts.waitForNetworkIdleAfterAction(() =>
-      discounts.gotoExistingDiscount(DISCOUNTS.catalogPromotionWithRulesToBeUpdated.id),
-    );
+    await discounts.gotoExistingDiscount(DISCOUNTS.catalogPromotionWithRulesToBeUpdated.id);
     await discounts.ruleSection.waitFor({
       state: "visible",
       timeout: 50000,
@@ -360,18 +342,14 @@ const promotionsWithRules = [
 for (const promotion of promotionsWithRules) {
   for (const rule of promotion.rules) {
     test(`TC: SALEOR_167 Delete promotion ${rule.name} from ${promotion.type} promotion @discounts @e2e`, async () => {
-      await discounts.waitForNetworkIdleAfterAction(() =>
-        discounts.gotoExistingDiscount(promotion.id),
-      );
+      await discounts.gotoExistingDiscount(promotion.id);
       await discounts.ruleSection.waitFor({
         state: "visible",
         timeout: 50000,
       });
       await discounts.clickDeleteRuleButton(`${promotion.type} rule: ${rule.name}`);
       await expect(discounts.deleteRuleModal).toBeVisible({ timeout: 10000 });
-      await discounts.waitForNetworkIdleAfterAction(() =>
-        discounts.deleteRuleDialog.clickConfirmDeleteButton(),
-      );
+      await discounts.deleteRuleDialog.clickConfirmDeleteButton();
       await discounts.expectSuccessBanner();
       await expect(discounts.ruleSection).not.toHaveText(`${promotion.type}: ${rule.name}`);
     });

diff --git a/playwright/tests/product.spec.ts b/playwright/tests/product.spec.ts
@@ -233,11 +233,9 @@ test("TC: SALEOR_60 As an admin I should be able update existing variant @basic-
   const variantName = `TC: SALEOR_60 - variant name - ${new Date().toISOString()}`;
   const sku = `SALEOR_60-sku-${new Date().toISOString()}`;
 
-  await productPage.waitForNetworkIdleAfterAction(() =>
-    variantsPage.gotoExistingVariantPage(
-      PRODUCTS.productWithVariantWhichWillBeUpdated.id,
-      PRODUCTS.productWithVariantWhichWillBeUpdated.variantId,
-    ),
+  await variantsPage.gotoExistingVariantPage(
+    PRODUCTS.productWithVariantWhichWillBeUpdated.id,
+    PRODUCTS.productWithVariantWhichWillBeUpdated.variantId,
   );
   await variantsPage.typeVariantName(variantName);
   await variantsPage.clickMageChannelsButton();
@@ -263,11 +261,9 @@ test("TC: SALEOR_60 As an admin I should be able update existing variant @basic-
   await productPage.productImage.waitFor({ state: "visible" });
 });
 test("TC: SALEOR_61 As an admin I should be able to delete existing variant @basic-regression @product @e2e", async () => {
-  await productPage.waitForNetworkIdleAfterAction(() =>
-    variantsPage.gotoExistingVariantPage(
-      PRODUCTS.singleVariantDeleteProduct.productId,
-      PRODUCTS.singleVariantDeleteProduct.variantId,
-    ),
+  await variantsPage.gotoExistingVariantPage(
+    PRODUCTS.singleVariantDeleteProduct.productId,
+    PRODUCTS.singleVariantDeleteProduct.variantId,
   );
   await variantsPage.clickDeleteVariantButton();
   await variantsPage.deleteVariantDialog.clickDeleteVariantButton();
@@ -282,9 +278,7 @@ test("TC: SALEOR_61 As an admin I should be able to delete existing variant @bas
   ).toContain(PRODUCTS.singleVariantDeleteProduct.productId);
 });
 test("TC: SALEOR_62 As an admin I should be able to bulk delete existing variants @basic-regression @product @e2e", async () => {
-  await productPage.waitForNetworkIdleAfterAction(() =>
-    productPage.gotoExistingProductPage(PRODUCTS.multipleVariantsBulkDeleteProduct.productId),
-  );
+  await productPage.gotoExistingProductPage(PRODUCTS.multipleVariantsBulkDeleteProduct.productId);
   await productPage.waitForGrid();
   await productPage.gridCanvas.scrollIntoViewIfNeeded();
   await productPage.clickGridCell(0, 0);