fix(trace-viewer): survive broken selectors (microsoft#21866)

Fixes microsoft#21832

Author: aslushnikov

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)

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 };

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;

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 });