From 92045b7faf079a01c9c50e505a75a28ba8e0fddb Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Wed, 16 Feb 2022 19:10:00 +0100
Subject: [PATCH] feat(codgen): support radio buttons (#12157)

---
 .../server/supplements/injected/recorder.ts   |  4 ++--
 tests/inspector/cli-codegen-1.spec.ts         | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/src/server/supplements/injected/recorder.ts b/packages/playwright-core/src/server/supplements/injected/recorder.ts
index 4487241b34..7eac90a378 100644
--- a/packages/playwright-core/src/server/supplements/injected/recorder.ts
+++ b/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 {
diff --git a/tests/inspector/cli-codegen-1.spec.ts b/tests/inspector/cli-codegen-1.spec.ts
index 0dca8e0324..418b3a9a24 100644
--- a/tests/inspector/cli-codegen-1.spec.ts
+++ b/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();