From f24b93599da557848c71d7f2b147c58630c75fb6 Mon Sep 17 00:00:00 2001
From: Rahul Suresh <22114682+rahulsuresh-git@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:54:59 -0600
Subject: [PATCH] fix(e2e, playwright): resolved mobile test failure on
 action-row.spec.ts (#52446)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 client/src/templates/Challenges/classic/action-row.tsx | 3 +--
 e2e/action-row.spec.ts                                 | 9 +++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Challenges/classic/action-row.tsx b/client/src/templates/Challenges/classic/action-row.tsx
index 41e4ecad727..b253cfb3778 100644
--- a/client/src/templates/Challenges/classic/action-row.tsx
+++ b/client/src/templates/Challenges/classic/action-row.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import EditorTabs from './editor-tabs';
 
@@ -86,7 +86,6 @@ 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')}
           >
diff --git a/e2e/action-row.spec.ts b/e2e/action-row.spec.ts
index 28250b2b81c..8089c22b628 100644
--- a/e2e/action-row.spec.ts
+++ b/e2e/action-row.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, type Page, type Locator } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
 
 const challengeButtons = [
   'Instructions',
@@ -25,7 +26,9 @@ function getTabsRowLocator(page: Page): Locator {
 
 test('Action row buttons are visible', async ({ isMobile, page }) => {
   const previewPaneButton = page.getByTestId('preview-pane-button');
-  const previewPortalButton = page.getByTestId('preview-portal-button');
+  const previewPortalButton = page.getByRole('button', {
+    name: translations.aria['move-preview-to-new-window']
+  });
   const actionRow = getActionRowLocator(page);
   const tabsRow = getTabsRowLocator(page);
 
@@ -106,7 +109,9 @@ test('Clicking Preview Pane button hides preview', async ({
 test('Clicking Preview Portal button opens the preview in a new tab', async ({
   page
 }) => {
-  const previewPortalButton = page.getByTestId('preview-portal-button');
+  const previewPortalButton = page.getByRole('button', {
+    name: translations.aria['move-preview-to-new-window']
+  });
   const browserContext = page.context();
 
   const [newPage] = await Promise.all([