[Question] Need help with reusing tests for app as standalone pages and as embedded in iFrame of another page #16620

We are working on an app that has its own standalone web pages and also can be embedded to an iFrame in other pages. We would like to keep a single suite of Playwright tests that target both, depending on the value of an environment variable.

The test structure is as below. We launch the embedded mode test app if embeddedmode is set to true, otherwise, launch the standalone app. The difficulty lies in the test when we want to deal with a specific element. For example, await page.click(elements.TEXT_PANEL.NAV_BUTTON); as below needs to be page.frame(({url: /.localhost:3000./}).click in embedded mode. Actually any page related calls need to be sent to page.frame for embedded mode, but we can't add the if statement everywhere the page apis are used. Is there a way to abstract and synthesize them without using the if(process.env.embeddedmode) statement as below? Thank you very much for your help.

test.describe('Text tests', () => {

  test.beforeEach(async ({ page }) => {
   if(process.env.embeddedmode)
    {
      await page.goto('http://localhost:8080/');
    }
   else
    {
    await page.goto('http://localhost:3000/');
    }
  });

  test('Verify text panel', async ({ page }) => {
   if(process.env.embeddedmode)
    {
     await page.frame(({url: /.*localhost:3000.*/}).click(elements.TEXT_PANEL.NAV_BUTTON);
    }
   else
    {
       await page.click(elements.TEXT_PANEL.NAV_BUTTON);
    }
    await verifyElementScreenshot();
  });
});