microsoft · dgozman · Aug 13, 2025 · Aug 13, 2025
diff --git a/packages/playwright-core/src/server/recorder.ts b/packages/playwright-core/src/server/recorder.ts
@@ -570,7 +570,7 @@ function isScreenshotCommand(metadata: CallMetadata) {
   return metadata.method.toLowerCase().includes('screenshot');
 }
 
-function languageForFile(file: string) {
+function languageForFile(file: string): Language {
   if (file.endsWith('.py'))
     return 'python';
   if (file.endsWith('.java'))

diff --git a/packages/playwright-core/src/server/recorder/recorderApp.ts b/packages/playwright-core/src/server/recorder/recorderApp.ts
@@ -52,8 +52,8 @@ export class RecorderApp {
   private _actions: actions.ActionInContext[] = [];
   private _userSources: Source[] = [];
   private _recorderSources: Source[] = [];
-  private _primaryLanguage: string;
-  private _selectedLanguageId: string;
+  private _primaryGeneratorId: string;
+  private _selectedGeneratorId: string;
 
   private constructor(recorder: Recorder, params: RecorderAppParams, page: Page, wsEndpointForTest: string | undefined) {
     this._page = page;
@@ -70,8 +70,8 @@ export class RecorderApp {
     };
 
     this._throttledOutputFile = params.outputFile ? new ThrottledFile(params.outputFile) : null;
-    this._primaryLanguage = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryLanguage(params.sdkLanguage);
-    this._selectedLanguageId = this._primaryLanguage;
+    this._primaryGeneratorId = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryGeneratorId(params.sdkLanguage);
+    this._selectedGeneratorId = this._primaryGeneratorId;
   }
 
   private async _init(inspectedContext: BrowserContext) {
@@ -133,7 +133,7 @@ export class RecorderApp {
       const source = [...this._recorderSources, ...this._userSources].find(s => s.id === data.params.fileId);
       if (source) {
         if (source.isRecorded)
-          this._selectedLanguageId = source.id;
+          this._selectedGeneratorId = source.id;
         this._recorder.setLanguage(source.language);
       }
       return;
@@ -358,9 +358,9 @@ export class RecorderApp {
       };
       source.revealLine = text.split('\n').length - 1;
       recorderSources.push(source);
-      if (languageGenerator.id === this._primaryLanguage)
+      if (languageGenerator.id === this._primaryGeneratorId)
         this._throttledOutputFile?.setContent(source.text);
-      if (reveal === 'reveal' && source.id === this._selectedLanguageId)
+      if (reveal === 'reveal' && source.id === this._selectedGeneratorId)
         revealSourceId = source.id;
     }
 
@@ -370,8 +370,8 @@ export class RecorderApp {
   }
 }
 
-// For example, if the SDK language is 'javascript', we return 'playwright-test' as the primary language.
-function determinePrimaryLanguage(sdkLanguage: Language): string {
+// For example, if the SDK language is 'javascript', this returns 'playwright-test'.
+function determinePrimaryGeneratorId(sdkLanguage: Language): string {
   for (const language of languageSet()) {
     if (language.highlighter === sdkLanguage)
       return language.id;

diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
@@ -182,14 +182,14 @@ export const Recorder: React.FC<RecorderProps> = ({
     </Toolbar>
     <SplitView
       sidebarSize={200}
-      main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
+      main={<CodeMirrorWrapper text={source.text} highlighter={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
       sidebar={<TabbedPane
         rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []}
         tabs={[
           {
             id: 'locator',
             title: 'Locator',
-            render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
+            render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' highlighter={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
           },
           {
             id: 'log',
@@ -199,7 +199,7 @@ export const Recorder: React.FC<RecorderProps> = ({
           {
             id: 'aria',
             title: 'Aria',
-            render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
+            render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' highlighter={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
           },
         ]}
         selectedTab={selectedTab}

diff --git a/packages/trace-viewer/src/ui/inspectorTab.tsx b/packages/trace-viewer/src/ui/inspectorTab.tsx
@@ -15,14 +15,15 @@
  */
 
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-import type { Language, SourceHighlight } from '@web/components/codeMirrorWrapper';
+import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import { copy } from '@web/uiUtils';
 import * as React from 'react';
 import type { HighlightedElement } from './snapshotTab';
 import './sourceTab.css';
 import { parseAriaSnapshot } from '@isomorphic/ariaSnapshot';
 import yaml from 'yaml';
+import type { Language } from '@isomorphic/locatorGenerators';
 
 export const InspectorTab: React.FunctionComponent<{
   sdkLanguage: Language,
@@ -55,7 +56,7 @@ export const InspectorTab: React.FunctionComponent<{
       }}></ToolbarButton>
     </div>
     <div style={{ height: 50 }}>
-      <CodeMirrorWrapper text={highlightedElement.locator || ''} language={sdkLanguage} isFocused={true} wrapLines={true} onChange={text => {
+      <CodeMirrorWrapper text={highlightedElement.locator || ''} highlighter={sdkLanguage} isFocused={true} wrapLines={true} onChange={text => {
         // Updating text needs to go first - react can squeeze a render between the state updates.
         setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' });
         setIsInspecting(false);
@@ -71,7 +72,7 @@ export const InspectorTab: React.FunctionComponent<{
     <div style={{ height: 150 }}>
       <CodeMirrorWrapper
         text={highlightedElement.ariaSnapshot || ''}
-        language='yaml'
+        highlighter='yaml'
         wrapLines={false}
         highlight={ariaSnapshotErrors}
         onChange={onAriaEditorChange} />

diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -114,7 +114,7 @@ export const SourceTab: React.FunctionComponent<{
         <CopyToClipboard description='Copy filename' value={shortFileName}/>
         {location && <ToolbarButton icon='link-external' title='Open in VS Code' onClick={openExternally}></ToolbarButton>}
       </Toolbar> }
-      <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} dataTestId='source-code-mirror'/>
+      <CodeMirrorWrapper text={source.content || ''} highlighter='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} dataTestId='source-code-mirror'/>
     </div>}
     sidebar={<StackTraceView stack={stack} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame} />}
   />;

diff --git a/packages/web/src/components/codeMirrorWrapper.spec.tsx b/packages/web/src/components/codeMirrorWrapper.spec.tsx
@@ -69,27 +69,27 @@ class Program
 `;
 
 test('highlight JavaScript', async ({ mount }) => {
-  const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} language='javascript' />);
+  const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} highlighter='javascript' />);
   await expect(component.locator('text="async"').first()).toHaveClass('cm-keyword');
 });
 
 test('highlight Python', async ({ mount }) => {
-  const component = await mount(<CodeMirrorWrapper text={pythonSnippet} language='python' />);
+  const component = await mount(<CodeMirrorWrapper text={pythonSnippet} highlighter='python' />);
   await expect(component.locator('text="async"').first()).toHaveClass('cm-keyword');
 });
 
 test('highlight Java', async ({ mount }) => {
-  const component = await mount(<CodeMirrorWrapper text={javaSnippet} language='java' />);
+  const component = await mount(<CodeMirrorWrapper text={javaSnippet} highlighter='java' />);
   await expect(component.locator('text="public"').first()).toHaveClass('cm-keyword');
 });
 
 test('highlight C#', async ({ mount }) => {
-  const component = await mount(<CodeMirrorWrapper text={csharpSnippet} language='csharp' />);
+  const component = await mount(<CodeMirrorWrapper text={csharpSnippet} highlighter='csharp' />);
   await expect(component.locator('text="public"').first()).toHaveClass('cm-keyword');
 });
 
 test('highlight lines', async ({ mount }) => {
-  const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} language='javascript' highlight={[
+  const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} highlighter='javascript' highlight={[
     { line: 4, type: 'running' },
     { line: 5, type: 'paused' },
     { line: 6, type: 'error' },

diff --git a/packages/web/src/components/codeMirrorWrapper.tsx b/packages/web/src/components/codeMirrorWrapper.tsx
@@ -27,13 +27,13 @@ export type SourceHighlight = {
   message?: string;
 };
 
-export type Language = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown' | 'yaml';
+type CodeMirrorHighlighter = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown' | 'yaml';
 
 export const lineHeight = 20;
 
 export interface SourceProps {
   text: string;
-  language?: Language;
+  highlighter?: CodeMirrorHighlighter;
   mimeType?: string;
   linkify?: boolean;
   readOnly?: boolean;
@@ -51,7 +51,7 @@ export interface SourceProps {
 
 export const CodeMirrorWrapper: React.FC<SourceProps> = ({
   text,
-  language,
+  highlighter,
   mimeType,
   linkify,
   readOnly,
@@ -85,7 +85,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
       if (!element)
         return;
 
-      const mode = languageToMode(language) || mimeTypeToMode(mimeType) || (linkify ? 'text/linkified' : '');
+      const mode = highlighterToMode(highlighter) || mimeTypeToMode(mimeType) || (linkify ? 'text/linkified' : '');
 
       if (codemirrorRef.current
         && mode === codemirrorRef.current.cm.getOption('mode')
@@ -113,7 +113,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
       setCodemirror(cm);
       return cm;
     })();
-  }, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
+  }, [modulePromise, codemirror, codemirrorElement, highlighter, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
 
   React.useEffect(() => {
     if (codemirrorRef.current)
@@ -244,8 +244,8 @@ function mimeTypeToMode(mimeType: string | undefined): string | undefined {
     return 'css';
 }
 
-function languageToMode(language: Language | undefined): string | undefined {
-  if (!language)
+function highlighterToMode(highlighter: CodeMirrorHighlighter | undefined): string | undefined {
+  if (!highlighter)
     return;
   return {
     javascript: 'javascript',
@@ -257,5 +257,5 @@ function languageToMode(language: Language | undefined): string | undefined {
     html: 'htmlmixed',
     css: 'css',
     yaml: 'yaml',
-  }[language];
+  }[highlighter];
 }