From c7d84f5f37e4140d2f412eb3764a355ff429a0b8 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <aslushnikov@gmail.com>
Date: Thu, 23 Mar 2023 01:52:04 +0000
Subject: [PATCH] cherry-pick(#21866): fix(trace-viewer): survive broken
 selectors

---
 packages/trace-viewer/src/ui/actionList.tsx  |  2 +-
 packages/trace-viewer/src/ui/callTab.tsx     |  2 +-
 packages/trace-viewer/src/ui/snapshotTab.tsx |  2 +-
 tests/library/trace-viewer.spec.ts           | 13 +++++++++++++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index 8c5b19c683c85..7163b5bd1d607 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -60,7 +60,7 @@ const renderAction = (
   revealConsole: () => void
 ) => {
   const { errors, warnings } = modelUtil.stats(action);
-  const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined;
+  const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector, false /* isFrameLocator */, true /* playSafe */) : undefined;
 
   let time: string = '';
   if (action.endTime)
diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx
index 219587cddbe24..84c2f2960e909 100644
--- a/packages/trace-viewer/src/ui/callTab.tsx
+++ b/packages/trace-viewer/src/ui/callTab.tsx
@@ -95,7 +95,7 @@ function propertyToString(event: ActionTraceEvent, name: string, value: any, sdk
   if ((name === 'value' && isEval) || (name === 'received' && event.method === 'expect'))
     value = parseSerializedValue(value, new Array(10).fill({ handle: '<handle>' }));
   if (name === 'selector')
-    return { text: asLocator(sdkLanguage || 'javascript', event.params.selector), type: 'locator', name: 'locator' };
+    return { text: asLocator(sdkLanguage || 'javascript', event.params.selector, false /* isFrameLocator */, true /* playSafe */), type: 'locator', name: 'locator' };
   const type = typeof value;
   if (type !== 'object' || value === null)
     return { text: String(value), type, name };
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
index 732b0dbb8b437..830060bd51679 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -265,7 +265,7 @@ export const InspectModeController: React.FunctionComponent<{
       recorder = new Recorder(injectedScript, {
         async setSelector(selector: string) {
           recorder!.setUIState({ mode: 'none', language: sdkLanguage, testIdAttributeName });
-          setHighlightedLocator(asLocator('javascript', selector, false));
+          setHighlightedLocator(asLocator('javascript', selector, false /* isFrameLocator */, true /* playSafe */));
         }
       });
       win._recorder = recorder;
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 4f5c7602f2f99..faa3cb5f4bb1c 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -689,6 +689,19 @@ test('should include requestUrl in route.fulfill', async ({ page, runAndTrace, b
   await expect(callLine.getByText('requestUrl')).toContainText('http://test.com');
 });
 
+test('should not crash with broken locator', async ({ page, runAndTrace, server }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/21832' });
+  const traceViewer = await runAndTrace(async () => {
+    try {
+      await page.locator('[class*=github-btn] a]').click();
+    } catch (e) {
+    }
+  });
+  await expect(traceViewer.page).toHaveTitle('Playwright Trace Viewer');
+  const header = traceViewer.page.getByText('Playwright', { exact: true });
+  await expect(header).toBeVisible();
+});
+
 test('should include requestUrl in route.continue', async ({ page, runAndTrace, server }) => {
   await page.route('**/*', route => {
     route.continue({ url: server.EMPTY_PAGE });