fix playwright tests

Author: standeren

frontend/testing/playwright/pages/ProcessEditorPage/CustomReceiptConfig.ts

@@ -55,9 +55,9 @@ export class CustomReceiptConfig extends BasePage {
       .click();
   }
 
-  public async waitForEditLayoutSetIdButtonToBeVisible(): Promise<void> {
+  public async waitForEditLayoutSetIdButtonToBeVisible(layoutSetId: string): Promise<void> {
     const button = this.page.getByRole('button', {
-      name: this.textMock('process_editor.configuration_panel_custom_receipt_textfield_label'),
+      name: layoutSetId,
     });
     await expect(button).toBeVisible();
   }

frontend/testing/playwright/pages/ProcessEditorPage/ProcessEditorPage.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import type { Page } from '@playwright/test';
+import type { Page, Locator } from '@playwright/test';
 import { ActionsConfig } from './ActionsConfig';
 import { PolicyConfig } from './PolicyConfig';
 import { BasePage } from '../../helpers/BasePage';
@@ -73,15 +73,13 @@ export class ProcessEditorPage extends BasePage {
   }
 
   public async getTaskIdFromOpenNewlyAddedTask(): Promise<string> {
-    const selector = 'text=ID: Activity_';
-    await this.page.waitForSelector(selector);
-    return await this.getFullIdFromButtonSelector(selector);
+    const button = this.page.getByRole('button', { name: /^Activity_/ });
+    await button.waitFor();
+    return await this.getFullIdFromButtonSelector(button);
   }
 
   public async clickOnTaskIdEditButton(id: string): Promise<void> {
-    await this.page
-      .getByText(`${this.textMock('process_editor.configuration_panel_id_label')} ${id}`)
-      .click();
+    await this.page.getByRole('button', { name: id }).click();
   }
 
   public async waitForEditIdInputFieldToBeVisible(): Promise<void> {
@@ -123,9 +121,7 @@ export class ProcessEditorPage extends BasePage {
   }
 
   public async waitForNewTaskIdButtonToBeVisible(id: string): Promise<void> {
-    const button = this.page.getByText(
-      `${this.textMock('process_editor.configuration_panel_id_label')} ${id}`,
-    );
+    const button = this.page.getByRole('button', { name: id });
     await expect(button).toBeVisible();
   }
 
@@ -165,10 +161,9 @@ export class ProcessEditorPage extends BasePage {
     await this.page.mouse.up();
   }
 
-  private async getFullIdFromButtonSelector(selector: string): Promise<string> {
-    const button = this.page.locator(selector);
+  private async getFullIdFromButtonSelector(button: Locator): Promise<string> {
     const fullText = await button.textContent();
-    const extractedText = fullText.match(/ID: (Activity_\w+)/);
+    const extractedText = fullText.match(/(Activity_\w+)/);
     return extractedText[1];
   }
 }

frontend/testing/playwright/pages/UiEditorPage.ts

@@ -231,8 +231,9 @@ export class UiEditorPage extends BasePage {
     await expect(newTreeItemLabel).toBeVisible();
   }
 
-  public async deleteOldComponentId(): Promise<void> {
-    await this.page.getByRole('button', { name: /ID:/ }).click();
+  public async deleteOldComponentId(componentId: string): Promise<void> {
+    const button = this.page.getByRole('button', { name: componentId });
+    await button.click();
     await this.page
       .getByLabel(this.textMock('ux_editor.modal_properties_component_change_id'))
       .clear();

frontend/testing/playwright/tests/process-editor/process-editor.spec.ts

@@ -184,7 +184,9 @@ test('That it is possible to create a custom receipt', async ({ page, testAppNam
 
   await processEditorPage.customReceiptConfig.waitForSaveNewCustomReceiptButtonToBeVisible();
   await processEditorPage.customReceiptConfig.clickOnSaveNewCustomReceiptButton();
-  await processEditorPage.customReceiptConfig.waitForEditLayoutSetIdButtonToBeVisible();
+  await processEditorPage.customReceiptConfig.waitForEditLayoutSetIdButtonToBeVisible(
+    newLayoutSetId,
+  );
 
   // --------------------- Check that files are uploaded to Gitea ---------------------
   await goToGiteaAndNavigateToApplicationMetadataFile(header, giteaPage);

frontend/testing/playwright/tests/text-editor/text-editor.spec.ts

@@ -59,7 +59,7 @@ test('That it is possible to create a text at the ui-editor page, and that the t
   await navigateToUiEditorAndVerifyPage(header, uiEditorPage);
   await uiEditorPage.dragComponentIntoDroppableList(ComponentType.Input);
 
-  await uiEditorPage.deleteOldComponentId();
+  await uiEditorPage.deleteOldComponentId(COMPONENT_ID);
   await uiEditorPage.writeNewComponentId(COMPONENT_ID);
   await uiEditorPage.waitForXAmountOfMilliseconds(1000); // Wait for the API call to be done