feat(browser): Generate getByRole selectors (#877)

Author: allansson

extension/src/frontend/recording.ts

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid'
 import { BrowserEvent } from '@/schemas/recording'
 
 import { BrowserExtensionClient } from '../messaging'
-import { generateSelectors } from '../selectors'
+import { getEventTarget } from '../target'
 import {
   findAssociatedElement,
   findInteractiveElement,
@@ -113,7 +113,7 @@ export function startRecording(client: BrowserExtensionClient) {
       type: 'click',
       eventId: nanoid(),
       timestamp: Date.now(),
-      target: { selectors: generateSelectors(clickTarget) },
+      target: getEventTarget(clickTarget),
       button,
       modifiers: {
         ctrl: ev.ctrlKey,
@@ -130,7 +130,7 @@ export function startRecording(client: BrowserExtensionClient) {
       type: 'select-change',
       eventId: nanoid(),
       timestamp: Date.now(),
-      target: { selectors: generateSelectors(target) },
+      target: getEventTarget(target),
       selected: [...target.selectedOptions].map((option) => option.value),
       multiple: target.multiple,
       tab: getTabId(),
@@ -142,7 +142,7 @@ export function startRecording(client: BrowserExtensionClient) {
       type: 'input-change',
       eventId: nanoid(),
       timestamp: Date.now(),
-      target: { selectors: generateSelectors(target) },
+      target: getEventTarget(target),
       value: target.value,
       sensitive: false,
       tab: getTabId(),
@@ -165,7 +165,7 @@ export function startRecording(client: BrowserExtensionClient) {
         type: 'check-change',
         eventId: nanoid(),
         timestamp: Date.now(),
-        target: { selectors: generateSelectors(target) },
+        target: getEventTarget(target),
         checked: target.checked,
         tab: getTabId(),
       })
@@ -182,7 +182,7 @@ export function startRecording(client: BrowserExtensionClient) {
         type: 'radio-change',
         eventId: nanoid(),
         timestamp: Date.now(),
-        target: { selectors: generateSelectors(target) },
+        target: getEventTarget(target),
         name: target.name,
         value: target.value,
         tab: getTabId(),
@@ -195,7 +195,7 @@ export function startRecording(client: BrowserExtensionClient) {
       type: 'input-change',
       eventId: nanoid(),
       timestamp: Date.now(),
-      target: { selectors: generateSelectors(target) },
+      target: getEventTarget(target),
       value: target.value,
       sensitive: target.type === 'password',
       tab: getTabId(),
@@ -249,8 +249,8 @@ export function startRecording(client: BrowserExtensionClient) {
       type: 'submit-form',
       eventId: nanoid(),
       timestamp: Date.now(),
-      form: { selectors: generateSelectors(ev.target) },
-      submitter: { selectors: generateSelectors(ev.submitter) },
+      form: getEventTarget(ev.target),
+      submitter: getEventTarget(ev.submitter),
       tab: getTabId(),
     })
   })

extension/src/frontend/view/ElementInspector/ElementInspector.tsx

@@ -94,11 +94,7 @@ export function ElementInspector({ onClose }: ElementInspectorProps) {
           eventId: nanoid(),
           timestamp: Date.now(),
           tab: getTabId(),
-          target: {
-            selectors: {
-              css: assertion.selector,
-            },
-          },
+          target: assertion.target,
           assertion: toAssertion(assertion),
         },
       ],
@@ -132,9 +128,9 @@ export function ElementInspector({ onClose }: ElementInspectorProps) {
               `}
             >
               <div>Tag</div>
-              <div>{element.target.tagName.toLowerCase()}</div>
+              <div>{element.element.tagName.toLowerCase()}</div>
               <div>Selector</div>
-              <div>{element.selector.css}</div>
+              <div>{element.target.selectors.css}</div>
               <div>Roles</div>
               <div>{formatRoles(element.roles)}</div>
             </div>

extension/src/frontend/view/ElementInspector/ElementMenu.tsx

@@ -90,7 +90,7 @@ function CheckboxAssertion({
   function handleAddCheckAssertion() {
     onAddAssertion({
       type: 'check',
-      selector: input.selector.css,
+      target: input.target,
       inputType: isNative(role, input.element) ? 'native' : 'aria',
       expected: getCheckedState(input.element),
     })
@@ -116,7 +116,7 @@ function TextInputAssertion({
   const handleAddAssertion = () => {
     onAddAssertion({
       type: 'text-input',
-      selector: input.selector.css,
+      target: input.target,
       multiline:
         input.element instanceof HTMLTextAreaElement ||
         input.element.getAttribute('aria-multiline') === 'true',
@@ -193,16 +193,16 @@ export function ElementMenu({ element, onSelectAssertion }: ElementMenuProps) {
   const handleAddVisibilityAssertion = () => {
     onSelectAssertion({
       type: 'visibility',
-      selector: element.selector.css,
+      target: element.target,
       state: 'visible',
     })
   }
 
   const handleAddTextAssertion = () => {
     onSelectAssertion({
       type: 'text',
-      selector: element.selector.css,
-      text: element.target.textContent ?? '',
+      target: element.target,
+      text: element.element.textContent ?? '',
     })
   }
 

extension/src/frontend/view/ElementInspector/ElementMenu.utils.ts

@@ -1,5 +1,5 @@
-import { ElementSelector } from '@/schemas/recording'
-import { generateSelectors } from 'extension/src/selectors'
+import { BrowserEventTarget } from '@/schemas/recording'
+import { getEventTarget } from 'extension/src/target'
 import { ElementRole, getElementRoles } from 'extension/src/utils/aria'
 import { findAssociatedElement } from 'extension/src/utils/dom'
 
@@ -18,30 +18,30 @@ function* getAncestors(element: Element) {
 
 export interface LabeledControl {
   element: Element
-  selector: ElementSelector
+  target: BrowserEventTarget
   roles: ElementRole[]
 }
 
 export function findAssociatedControl({
+  element,
   target,
-  selector,
   roles,
 }: TrackedElement): LabeledControl | null {
   // If the target is already a control, then we don't need to do a search.
   if (
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLButtonElement ||
-    target instanceof HTMLSelectElement ||
-    target instanceof HTMLTextAreaElement
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLButtonElement ||
+    element instanceof HTMLSelectElement ||
+    element instanceof HTMLTextAreaElement
   ) {
     return {
-      element: target,
-      selector,
+      element,
+      target,
       roles,
     }
   }
 
-  const label = [...getAncestors(target)].find(
+  const label = [...getAncestors(element)].find(
     (ancestor) => ancestor instanceof HTMLLabelElement
   )
 
@@ -57,7 +57,7 @@ export function findAssociatedControl({
 
   return {
     element: associatedElement,
-    selector: generateSelectors(associatedElement),
+    target: getEventTarget(associatedElement),
     roles: [...getElementRoles(associatedElement)],
   }
 }

extension/src/frontend/view/ElementInspector/ElementPopover.tsx

@@ -97,7 +97,7 @@ ElementPopover.Selector = function ElementSelector({
           flex: 1 1 0;
         `}
       >
-        {element.selector.css}
+        {element.target.selectors.css}
       </ElementPopover.Heading>
       <Tooltip asChild content="Select child element">
         <IconButton disabled={onContract === undefined} onClick={onContract}>

extension/src/frontend/view/ElementInspector/assertions/types.ts

@@ -1,28 +1,28 @@
-import { CheckState } from '@/schemas/recording'
+import { BrowserEventTarget, CheckState } from '@/schemas/recording'
 
 export interface CheckAssertionData {
   type: 'check'
-  selector: string
+  target: BrowserEventTarget
   inputType: 'aria' | 'native'
   expected: CheckState
 }
 
 export interface VisibilityAssertionData {
   type: 'visibility'
-  selector: string
+  target: BrowserEventTarget
   state: 'visible' | 'hidden'
 }
 
 export interface TextInputAssertionData {
   type: 'text-input'
-  selector: string
+  target: BrowserEventTarget
   multiline: boolean
   expected: string
 }
 
 export interface TextAssertionData {
   type: 'text'
-  selector: string
+  target: BrowserEventTarget
   text: string
 }
 

extension/src/frontend/view/ElementInspector/hooks.ts

@@ -25,7 +25,7 @@ export function usePinnedElement(element?: TrackedElement | undefined) {
       return undefined
     }
 
-    const parent = head.target.parentElement
+    const parent = head.element.parentElement
 
     if (parent === null || parent === document.documentElement) {
       return undefined
@@ -71,7 +71,7 @@ export function useElementHighlight(element: TrackedElement | null) {
       type: 'highlight-elements',
       selector: element && {
         type: 'css',
-        selector: element.selector.css,
+        selector: element.target.selectors.css,
       },
     })
   }, [client, element])

extension/src/frontend/view/ElementInspector/utils.ts

@@ -1,17 +1,17 @@
 import { nanoid } from 'nanoid'
 
-import { ElementSelector } from '@/schemas/recording'
+import { BrowserEventTarget } from '@/schemas/recording'
+import { getEventTarget } from 'extension/src/target'
 import { ElementRole, getElementRoles } from 'extension/src/utils/aria'
 
-import { generateSelectors } from '../../../selectors'
 import { Bounds } from '../types'
 import { getElementBounds } from '../utils'
 
 export interface TrackedElement {
   id: string
   roles: ElementRole[]
-  selector: ElementSelector
-  target: Element
+  target: BrowserEventTarget
+  element: Element
   bounds: Bounds
 }
 
@@ -21,8 +21,8 @@ export function toTrackedElement(element: Element): TrackedElement {
   return {
     id: nanoid(),
     roles: [...roles],
-    selector: generateSelectors(element),
-    target: element,
+    target: getEventTarget(element),
+    element: element,
     bounds: getElementBounds(element),
   }
 }

extension/src/frontend/view/TextSelectionPopover.tsx

@@ -31,7 +31,7 @@ function TextSelectionPopoverContent({
 
   const [assertion, setAssertion] = useState<TextAssertionData>({
     type: 'text',
-    selector: selection.element.selector.css,
+    target: selection.element.target,
     text: selection.text,
   })
 
@@ -46,7 +46,7 @@ function TextSelectionPopoverContent({
   const handleSubmit = (assertion: TextAssertionData) => {
     onAdd({
       ...assertion,
-      selector: targetElement.selector.css,
+      target: targetElement.target,
     })
 
     onClose()
@@ -98,11 +98,7 @@ export function TextSelectionPopover({ onClose }: TextSelectionPopoverProps) {
           timestamp: Date.now(),
           type: 'assert',
           tab: getTabId(),
-          target: {
-            selectors: {
-              css: assertion.selector,
-            },
-          },
+          target: assertion.target,
           assertion: {
             type: 'text',
             operation: {