[Playwright] DSM Tissue-Request test is not working on CircleCI (#2240)

* fix dsm tissue request test

Author: aweng98

playwright-e2e/dsm/component/modal.ts

@@ -8,7 +8,7 @@ export default class Modal {
   private readonly rootSelector: Locator;
 
   constructor(private readonly page: Page) {
-    this.rootSelector = this.page.locator('app-modal, .modal-dialog');
+    this.rootSelector = this.page.locator('.modal-dialog').locator('visible=true');
   }
 
   public toLocator(): Locator {
@@ -23,8 +23,9 @@ export default class Modal {
     return this.toLocator().locator('.modal-footer');
   }
 
-  public bodyLocator(): Locator {
-    return this.toLocator().locator('.modal-body');
+  public bodyLocator(opts: { nth?: number } = {}): Locator {
+    const { nth = 0 } = opts;
+    return this.toLocator().locator('.modal-body').nth(nth);
   }
 
   async getHeader(): Promise<string> {

playwright-e2e/dsm/pages/tissue/tissue-information-page.ts

@@ -9,6 +9,7 @@ import Tissue from 'dsm/component/tissue';
 import Checkbox from 'dss/component/checkbox';
 import Button from 'dss/component/button';
 import Input from 'dss/component/input';
+import Modal from 'dsm/component/modal';
 
 
 export default class TissueInformationPage {
@@ -186,22 +187,14 @@ export default class TissueInformationPage {
 
   /* Helper Functions */
   private async applyToAll(root: Locator): Promise<void> {
-    const applyToAllBtn = new Button(this.page,
-      { root, label: 'APPLY TO ALL', exactMatch: true }
-    );
-    const isApplyToAllBtnDisabled = await applyToAllBtn.isDisabled();
-    if (!isApplyToAllBtnDisabled) {
-      await applyToAllBtn.click();
-      const yesBtn = new Button(this.page, { root: this.page.locator('app-modal'), label: 'Yes', exactMatch: true });
-      await yesBtn.toLocator().waitFor({ state: 'attached'});
-      const isModalBtnDisabled = await yesBtn.isDisabled();
-      if (!isModalBtnDisabled) {
-        await yesBtn.click();
-        const successModalBtn = new Button(this.page, { root: this.page.locator('app-modal'), label: 'Ok', exactMatch: true });
-        await waitForResponse(this.page, { uri: 'institutions' });
-        await successModalBtn.click();
-      }
-    }
+    const applyToAllBtn = new Button(this.page, { root, label: 'APPLY TO ALL', exactMatch: true });
+    await applyToAllBtn.click();
+
+    const modal = new Modal(this.page);
+    await expect(modal.bodyLocator()).toHaveText(/Are you sure you want to change the destruction policy for all of the tissues from this facility/);
+    const yesBtn = modal.getButton({ label: 'Yes' }).toLocator();
+    await yesBtn.click();
+    // after click Yes button, dialog window is automatically handled by Playwright
   }
 
   private async fillFaxSentDate(dateIndex: number, date: FillDate): Promise<void> {

playwright-e2e/playwright.config.ts

@@ -71,7 +71,7 @@ const testConfig: PlaywrightTestConfig = {
       // Account for minor difference in text rendering and resolution between headless and headed mode
       ignoreDefaultArgs: ['--hide-scrollbars']
     },
-    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36',
+    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36',
     viewport: { width: 1280, height: 960 },
     ignoreHTTPSErrors: true,
 

playwright-e2e/tests/dsm/tissue-request/cmi-tissue-request.spec.ts

@@ -5,10 +5,7 @@ import { AdditionalFilter } from 'dsm/component/filters/sections/search/search-e
 import ParticipantPage from 'dsm/pages/participant-page/participant-page';
 import { TabEnum } from 'dsm/component/tabs/enums/tab-enum';
 import OncHistoryTab from 'dsm/component/tabs/onc-history-tab';
-import {
-  OncHistoryInputColumnsEnum,
-  OncHistorySelectRequestEnum
-} from 'dsm/component/tabs/enums/onc-history-input-columns-enum';
+import { OncHistoryInputColumnsEnum, OncHistorySelectRequestEnum } from 'dsm/component/tabs/enums/onc-history-input-columns-enum';
 import { expect } from '@playwright/test';
 import { getDate } from 'utils/date-utils';
 import { TissueDynamicFieldsEnum } from 'dsm/pages/tissue/enums/tissue-information-enum';