test(e2e, playwright): action-row improvements(modified the first test and added a test for Preview Portal button) (#52387)

client/src/templates/Challenges/classic/action-row.tsx

@@ -78,7 +78,7 @@ const ActionRow = ({
             </button>
           )}
           <button
-            data-playwright-test-label='preview-button'
+            data-playwright-test-label='preview-pane-button'
             aria-expanded={!!showPreviewPane}
             onClick={() => togglePane('showPreviewPane')}
           >
@@ -86,6 +86,7 @@ const ActionRow = ({
             <span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
           </button>
           <button
+            data-playwright-test-label='preview-portal-button'
             aria-expanded={!!showPreviewPortal}
             onClick={() => togglePane('showPreviewPortal')}
           >

e2e/action-row.spec.ts

@@ -24,7 +24,8 @@ function getTabsRowLocator(page: Page): Locator {
 }
 
 test('Action row buttons are visible', async ({ isMobile, page }) => {
-  const previewFrame = page.getByTitle('challenge preview');
+  const previewPaneButton = page.getByTestId('preview-pane-button');
+  const previewPortalButton = page.getByTestId('preview-portal-button');
   const actionRow = getActionRowLocator(page);
   const tabsRow = getTabsRowLocator(page);
 
@@ -37,7 +38,9 @@ test('Action row buttons are visible', async ({ isMobile, page }) => {
       const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
       await expect(btn).toBeVisible();
     }
-    await expect(previewFrame).toBeVisible();
+
+    await expect(previewPaneButton).toBeVisible();
+    await expect(previewPortalButton).toBeVisible();
   }
 });
 
@@ -84,8 +87,11 @@ test('Clicking Console button shows console panel', async ({
   }
 });
 
-test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
+test('Clicking Preview Pane button hides preview', async ({
-  const previewButton = page.getByTestId('preview-button');
+  isMobile,
+  page
+}) => {
+  const previewButton = page.getByTestId('preview-pane-button');
   const previewFrame = page.getByTitle('challenge preview');
   const actionRow = getActionRowLocator(page);
 
@@ -96,3 +102,21 @@ test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
     await expect(previewFrame).toBeHidden();
   }
 });
+
+test('Clicking Preview Portal button opens the preview in a new tab', async ({
+  page
+}) => {
+  const previewPortalButton = page.getByTestId('preview-portal-button');
+  const browserContext = page.context();
+
+  const [newPage] = await Promise.all([
+    browserContext.waitForEvent('page'),
+    previewPortalButton.click()
+  ]);
+
+  await newPage.waitForLoadState();
+
+  await expect(newPage).toHaveURL('about:blank');
+
+  await newPage.close();
+});