chore: make e2e use helpers, less duplication

Author: r0b1n

packages/pluggableWidgets/combobox-web/e2e/Combobox.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
 test.afterEach("Cleanup session", async ({ page }) => {
     // Because the test isolation that will open a new session for every test executed, and that exceeds Mendix's license limit of 5 sessions, so we need to force logout after each test.
@@ -18,7 +18,7 @@ test.describe("combobox-web", () => {
             const comboBox = page.locator(".mx-name-comboBox1");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxAssociation.png`);
-            await page.click(".mx-name-comboBox1");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxAssociationOpen.png`
             );
@@ -29,7 +29,7 @@ test.describe("combobox-web", () => {
             const comboBox = page.locator(".mx-name-comboBox4");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxAssociationRowClick.png`);
-            await page.click(".mx-name-comboBox4");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxAssociationRowClickOpen.png`
             );
@@ -39,7 +39,7 @@ test.describe("combobox-web", () => {
             const comboBox = page.locator(".mx-name-comboBox2");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxEnum.png`);
-            await page.click(".mx-name-comboBox2");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxEnumOpen.png`
             );
@@ -49,7 +49,7 @@ test.describe("combobox-web", () => {
             await page.click(".mx-name-tabPage2");
             const comboBox = page.locator(".mx-name-comboBox5");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
-            await page.click(".mx-name-comboBox5");
+            await comboBox.click();
             await expect(page.locator(".mx-name-comboBox5 .widget-combobox-menu").first()).toHaveScreenshot(
                 `comboBoxEnumFooter.png`
             );
@@ -59,15 +59,15 @@ test.describe("combobox-web", () => {
             await page.click(".mx-name-tabPage2");
             const comboBox = page.locator(".mx-name-comboBox6");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
-            await page.click(".mx-name-comboBox6");
+            await comboBox.click();
             await expect(comboBox).toHaveScreenshot(`comboBoxReadOnly.png`);
         });
 
         test("renders combobox using boolean", async ({ page }) => {
             const comboBox = page.locator(".mx-name-comboBox3");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxBoolean.png`);
-            await page.click(".mx-name-comboBox3");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxBooleanOpen.png`
             );
@@ -78,7 +78,7 @@ test.describe("combobox-web", () => {
             const comboBox = page.locator(".mx-name-comboBox7");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxStatic.png`);
-            await page.click(".mx-name-comboBox7");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxStaticOpen.png`
             );
@@ -89,7 +89,7 @@ test.describe("combobox-web", () => {
             const comboBox = page.locator(".mx-name-comboBox8");
             await expect(comboBox).toBeVisible({ timeout: 10000 });
             await expect(comboBox).toHaveScreenshot(`comboBoxDatabase.png`);
-            await page.click(".mx-name-comboBox8");
+            await comboBox.click();
             await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                 `comboBoxDatabaseOpen.png`
             );
@@ -98,8 +98,8 @@ test.describe("combobox-web", () => {
             test("renders a filter result", async ({ page }) => {
                 const comboBox = page.locator(".mx-name-comboBox2");
                 await expect(comboBox).toBeVisible({ timeout: 10000 });
-                await page.click(".mx-name-comboBox2");
-                await page.locator(".mx-name-comboBox2 .widget-combobox-input").fill("A");
+                await comboBox.click();
+                await getFilterInput(comboBox).fill("A");
                 await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                     `comboBoxFiltering.png`
                 );
@@ -109,7 +109,7 @@ test.describe("combobox-web", () => {
                 await page.click(".mx-name-tabPage2");
                 const comboBox = page.locator(".mx-name-comboBox4");
                 await expect(comboBox).toBeVisible({ timeout: 10000 });
-                await page.locator(".mx-name-comboBox4 .widget-combobox-icon-container").first().click();
+                await comboBox.locator(".widget-combobox-icon-container").first().click();
                 await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                     `comboBoxRemoveSelection.png`
                 );
@@ -119,7 +119,7 @@ test.describe("combobox-web", () => {
                 await page.click(".mx-name-tabPage2");
                 const comboBox = page.locator(".mx-name-comboBox4");
                 await expect(comboBox).toBeVisible({ timeout: 10000 });
-                await page.locator(".mx-name-comboBox4 .widget-combobox-clear-button").nth(3).click();
+                await comboBox.locator(".widget-combobox-clear-button").nth(3).click();
                 await expect(page.locator(".modal-body .mx-name-layoutGrid1").first()).toHaveScreenshot(
                     `comboBoxRemoveAllSelection.png`
                 );