test: fix locator selectors & delay

Author: iobuhov

packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 
 test.afterEach("Cleanup session", async ({ page }) => {
@@ -26,25 +26,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using enumeration as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 100 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.locator("#DataGrid4-column0").click({ delay: 1 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
             await expect(cells).toEqual(["10", "test", "test", "Yes", ""]);
         });
 
         test("shows the expected result with multiple selected items", async ({ page }) => {
-            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 10 });
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 10 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 100 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
-            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 1 });
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 100 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.locator("#DataGrid4-column0").click({ delay: 1 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
@@ -54,20 +54,20 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using boolean as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 100 });
             const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
             await expect(dropdownItem).toHaveText("No");
-            await dropdownItem.click({ delay: 1 });
-            await page.locator("#DataGrid4-column1").click({ delay: 1 });
+            await dropdownItem.click({ delay: 100 });
+            await page.locator('.mx-name-datagrid1 .th[title="First Name"]').click({ delay: 100 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(1);
         });
 
         test("shows no results when no items selected", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
-            const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); //the first item means none selected
-            await dropdownItem.click({ delay: 1 });
-            await page.locator("#DataGrid4-column1").click({ delay: 1 });
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 100 });
+            const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); // the first item means none selected
+            await dropdownItem.click({ delay: 100 });
+            await page.locator('.mx-name-datagrid1 .th[title="Age"]').click({ delay: 100 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(4);
         });