[QA] Fixing flaky navigation tests TC: SALEOR_198 and TC: SALEOR_194 (#…

…4854) * Fix_flaky_navigation_tests * Fixing SALEOR_33 * Fixing SALEOR_106
saleor · May 23, 2024 · 043ba8f · 043ba8f
1 parent da5e4d9
commit 043ba8f
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/.changeset/angry-jeans-battle.md b/.changeset/angry-jeans-battle.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+E2E Fixing flaky navigation tests
diff --git a/playwright/pages/dialogs/addNavigationMenuItemDialog.ts b/playwright/pages/dialogs/addNavigationMenuItemDialog.ts
@@ -15,12 +15,25 @@ export class AddNavigationMenuItemDialog extends BasePage {
   }
 
   async selectLinkOption(option: string, optionName: string) {
-    await this.linkSelect.fill(optionName);
-    await expect(this.menuLinkOptions.getByTestId(option)).toBeEnabled({
-      timeout: 60000,
-    });
-    await this.page.getByTestId(option).click({ force: true });
-    await this.menuLinkOptions.getByText(optionName).click({ force: true });
+    await this.linkSelect.click();
+    await this.waitForDOMToFullyLoad();
+    await this.menuLinkOptions.waitFor({ state: "attached" });
+    await this.menuLinkOptions
+      .getByRole("option", { name: "Categories" })
+      .waitFor({ state: "visible" });
+    await this.menuLinkOptions
+      .getByRole("option", { name: "Collections" })
+      .waitFor({ state: "visible" });
+    await this.menuLinkOptions.getByRole("option", { name: "Pages" }).waitFor({ state: "visible" });
+    await expect(this.menuLinkOptions.getByRole("option", { name: "Categories" })).toBeEnabled();
+    await this.menuLinkOptions.getByTestId(option).click();
+    await this.waitForDOMToFullyLoad();
+    await this.menuLinkOptions
+      .getByRole("option", { name: optionName })
+      .waitFor({ state: "visible" });
+    await this.menuLinkOptions.getByRole("option", { name: optionName }).click();
+    await this.waitForDOMToFullyLoad();
+    await expect(this.linkSelect).toHaveValue(optionName);
   }
 
   async typeMenuItemName(name: string) {

diff --git a/playwright/pages/dialogs/assignProductsDialog.ts b/playwright/pages/dialogs/assignProductsDialog.ts
@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
 export class AssignProductsDialog {
   readonly page: Page;
@@ -31,5 +31,6 @@ export class AssignProductsDialog {
 
     await product.waitFor({ state: "visible" });
     await product.getByRole("checkbox").click();
+    await expect(product.getByRole("checkbox")).toBeChecked();
   }
 }
diff --git a/playwright/pages/dialogs/issueGiftCardDialog.ts b/playwright/pages/dialogs/issueGiftCardDialog.ts
@@ -65,14 +65,14 @@ export class IssueGiftCardDialog extends BasePage {
 
   async clickSendToCustomerCheckbox() {
     await this.sendToCustomerCheckbox.click();
-    await expect(this.sendToCustomerCheckbox.isChecked()).toBeTruthy();
+    await expect(this.sendToCustomerCheckbox).toBeChecked();
     await this.customerInput.waitFor({ state: "attached" });
   }
 
   async clickSendExpireDateCheckbox() {
     await this.sendExpireDateCheckbox.click();
     await this.waitForDOMToFullyLoad();
-    await expect(this.sendExpireDateCheckbox.isChecked()).toBeTruthy();
+    await expect(this.sendExpireDateCheckbox).toBeChecked();
     await this.giftCardExpireFields.waitFor({ state: "attached" });
   }
 

diff --git a/playwright/pages/navigationDetailsPage.ts b/playwright/pages/navigationDetailsPage.ts
@@ -47,6 +47,7 @@ export class NavigationDetailsPage extends BasePage {
       .locator("[data-test-id='remove-menu-item-button']")
       .first()
       .click();
+    await this.waitForDOMToFullyLoad();
   }
 
   async fillName(name: string) {
@@ -67,5 +68,6 @@ export class NavigationDetailsPage extends BasePage {
 
   async clickUndoButton() {
     await this.undoButton.click();
+    await this.waitForDOMToFullyLoad();
   }
 }
diff --git a/playwright/tests/navigation.spec.ts b/playwright/tests/navigation.spec.ts
@@ -26,6 +26,7 @@ test("TC: SALEOR_193 Should go to Navigation page @navigation @e2e", async () =>
   await expect(navigation.navigationList).toBeVisible();
 });
 test("TC: SALEOR_194 Should create a new menu navigation with menu item @navigation @e2e", async () => {
+  test.slow();
   await navigation.goToNavigationView();
   await navigation.createMenuButton.click();
   await expect(navigation.createMenuDialogTitle).toBeVisible();
@@ -48,21 +49,19 @@ test("TC: SALEOR_194 Should create a new menu navigation with menu item @navigat
   await expect(navigationDetailsPage.menuItemList).toContainText(menuItemName);
 });
 // TODO: To be updated after https://linear.app/saleor/issue/MERX-307 is fixed
-test.skip("TC: SALEOR_198 Should update existing menu @navigation @e2e", async () => {
+test("TC: SALEOR_198 Should update existing menu @navigation @e2e", async () => {
   await navigationDetailsPage.goToExistingMenuView(NAVIGATION_ITEMS.navigationMenuToBeUpdated.id);
 
   const menuItemToBeUpdated = NAVIGATION_ITEMS.navigationMenuToBeUpdated.menuItems[0];
   const menuItemToBeDeleted = NAVIGATION_ITEMS.navigationMenuToBeUpdated.menuItems[1];
   const newItemName = faker.random.word();
 
-  await navigationDetailsPage.waitForDOMToFullyLoad();
   await navigationDetailsPage.clickEditMenuItemButton(menuItemToBeUpdated.name);
   await addNavigationMenuItemDialog.typeMenuItemName(newItemName);
   await addNavigationMenuItemDialog.selectLinkOption("category", "Polo Shirts");
   await addNavigationMenuItemDialog.clickSaveButton();
   await expect(navigationDetailsPage.addMenuItemDialog).not.toBeVisible();
   await navigationDetailsPage.clickDeleteMenuItemButton(menuItemToBeDeleted.name);
-  await navigationDetailsPage.waitForDOMToFullyLoad();
   await navigationDetailsPage.clickCreateNewMenuItem();
   await expect(navigationDetailsPage.addMenuItemDialog).toBeVisible();
 
@@ -73,10 +72,8 @@ test.skip("TC: SALEOR_198 Should update existing menu @navigation @e2e", async (
   await addNavigationMenuItemDialog.clickSaveButton();
   await expect(navigationDetailsPage.menuItemList).toContainText(menuItemName);
   await navigationDetailsPage.clickDeleteMenuItemButton(menuItemName);
-  await navigationDetailsPage.waitForDOMToFullyLoad();
   await expect(navigationDetailsPage.menuItemList).not.toContainText(menuItemName);
   await navigationDetailsPage.clickUndoButton();
-  await navigationDetailsPage.waitForDOMToFullyLoad();
   await expect(navigationDetailsPage.menuItemList).toContainText(menuItemName);
   await expect(navigationDetailsPage.menuItemList).toContainText(newItemName);
   await expect(navigationDetailsPage.menuItemList).not.toContainText(menuItemToBeDeleted.name);
@@ -116,7 +113,6 @@ test("TC: SALEOR_196 Should bulk delete menus from the list @navigation @e2e", a
   const menusToBeBulkDeleted = NAVIGATION_ITEMS.navigationMenusToBeBulkDeleted.names;
   const menus = await navigation.menuName.allInnerTexts();
 
-  await navigationDetailsPage.waitForDOMToFullyLoad();
   for (const name of menus) {
     await expect(navigation.checkedRows.locator(`:nth-match(:text(${name})`)).toBeTruthy();
   }