Add test case for interacting with elements with complex HTML IDs

test/browser/test/userEvent.test.ts

@@ -70,6 +70,27 @@ describe('userEvent.click', () => {
 
     expect(onClick).toHaveBeenCalled()
   })
+
+  test('clicks a button with complex HTML ID', async () => {
+    const container = document.createElement('div')
+    // This is similar to unique IDs generated by React's useId()
+    container.id = ':r3:'
+    const button = document.createElement('button')
+    // Use uppercase and special characters
+    button.id = 'A:Button'
+    button.textContent = 'Click me'
+    container.appendChild(button)
+    document.body.appendChild(container)
+
+    const onClick = vi.fn()
+    const dblClick = vi.fn()
+    button.addEventListener('click', onClick)
+
+    await userEvent.click(button)
+
+    expect(onClick).toHaveBeenCalled()
+    expect(dblClick).not.toHaveBeenCalled()
+  });
 })
 
 describe('userEvent.dblClick', () => {