feat(codgen): support radio buttons (#12157)

packages/playwright-core/src/server/supplements/injected/recorder.ts

@@ -272,7 +272,7 @@ export class Recorder {
     if (['INPUT', 'TEXTAREA'].includes(target.nodeName)) {
       const inputElement = target as HTMLInputElement;
       const elementType = (inputElement.type || '').toLowerCase();
-      if (elementType === 'checkbox') {
+      if (['checkbox', 'radio'].includes(elementType)) {
         // Checkbox is handled in click, we can't let input trigger on checkbox - that would mean we dispatched click events while recording.
         return;
       }
@@ -457,7 +457,7 @@ function asCheckbox(node: Node | null): HTMLInputElement | null {
   if (!node || node.nodeName !== 'INPUT')
     return null;
   const inputElement = node as HTMLInputElement;
-  return inputElement.type === 'checkbox' ? inputElement : null;
+  return ['checkbox', 'radio'].includes(inputElement.type) ? inputElement : null;
 }
 
 function addEventListener(target: EventTarget, eventName: string, listener: EventListener, useCapture?: boolean): () => void {

tests/inspector/cli-codegen-1.spec.ts

@@ -435,6 +435,26 @@ test.describe('cli codegen', () => {
     expect(message.text()).toBe('true');
   });
 
+  test('should check a radio button', async ({ page, openRecorder }) => {
+    const recorder = await openRecorder();
+
+    await recorder.setContentAndWait(`<input id="checkbox" type="radio" name="accept" onchange="console.log(checkbox.checked)"></input>`);
+
+    const selector = await recorder.focusElement('input');
+    expect(selector).toBe('input[name="accept"]');
+
+    const [message, sources] = await Promise.all([
+      page.waitForEvent('console', msg => msg.type() !== 'error'),
+      recorder.waitForOutput('JavaScript', 'check'),
+      page.click('input')
+    ]);
+
+    expect(sources.get('JavaScript').text).toContain(`
+  // Check input[name="accept"]
+  await page.locator('input[name="accept"]').check();`);
+    expect(message.text()).toBe('true');
+  });
+
   test('should check with keyboard', async ({ page, openRecorder }) => {
     const recorder = await openRecorder();