chore: report highlight parse error to debug controller (#33984)

packages/playwright-core/src/server/debugController.ts

@@ -25,6 +25,9 @@ import { Recorder } from './recorder';
 import { EmptyRecorderApp } from './recorder/recorderApp';
 import { asLocator, type Language } from '../utils';
 import { parseYamlForAriaSnapshot } from './ariaSnapshot';
+import type { ParsedYaml } from '../utils/isomorphic/ariaSnapshot';
+import { parseYamlTemplate } from '../utils/isomorphic/ariaSnapshot';
+import { unsafeLocatorOrSelectorAsSelector } from '../utils/isomorphic/locatorParser';
 
 const internalMetadata = serverSideCallMetadata();
 
@@ -144,9 +147,17 @@ export class DebugController extends SdkObject {
   }
 
   async highlight(params: { selector?: string, ariaTemplate?: string }) {
+    // Assert parameters validity.
+    if (params.selector)
+      unsafeLocatorOrSelectorAsSelector(this._sdkLanguage, params.selector, 'data-testid');
+    let parsedYaml: ParsedYaml | undefined;
+    if (params.ariaTemplate) {
+      parsedYaml = parseYamlForAriaSnapshot(params.ariaTemplate);
+      parseYamlTemplate(parsedYaml);
+    }
     for (const recorder of await this._allRecorders()) {
-      if (params.ariaTemplate)
+      if (parsedYaml)
-        recorder.setHighlightedAriaTemplate(parseYamlForAriaSnapshot(params.ariaTemplate));
+        recorder.setHighlightedAriaTemplate(parsedYaml);
       else if (params.selector)
         recorder.setHighlightedSelector(this._sdkLanguage, params.selector);
     }

packages/playwright-core/src/utils/isomorphic/locatorParser.ts

@@ -216,19 +216,24 @@ function transform(template: string, params: TemplateParams, testIdAttributeName
 }
 
 export function locatorOrSelectorAsSelector(language: Language, locator: string, testIdAttributeName: string): string {
+  try {
+    return unsafeLocatorOrSelectorAsSelector(language, locator, testIdAttributeName);
+  } catch (e) {
+    return '';
+  }
+}
+
+export function unsafeLocatorOrSelectorAsSelector(language: Language, locator: string, testIdAttributeName: string): string {
   try {
     parseSelector(locator);
     return locator;
   } catch (e) {
   }
-  try {
+  const { selector, preferredQuote } = parseLocator(locator, testIdAttributeName);
-    const { selector, preferredQuote } = parseLocator(locator, testIdAttributeName);
+  const locators = asLocators(language, selector, undefined, undefined, preferredQuote);
-    const locators = asLocators(language, selector, undefined, undefined, preferredQuote);
+  const digest = digestForComparison(language, locator);
-    const digest = digestForComparison(language, locator);
+  if (locators.some(candidate => digestForComparison(language, candidate) === digest))
-    if (locators.some(candidate => digestForComparison(language, candidate) === digest))
+    return selector;
-      return selector;
-  } catch (e) {
-  }
   return '';
 }
 

tests/library/debug-controller.spec.ts

@@ -300,3 +300,9 @@ test('should highlight aria template', async ({ backend, connectedBrowser }, tes
   const box2 = roundBox(await highlight.boundingBox());
   expect(box1).toEqual(box2);
 });
+
+test('should report error in aria template', async ({ backend }) => {
+  await backend.navigate({ url: `data:text/html,<button>Submit</button>` });
+  const error = await backend.highlight({ ariaTemplate: `- button "Submit` }).catch(e => e);
+  expect(error.message).toContain('Unterminated string:');
+});