ref(replay): Rage click clicked element name (#70493)

Since we now use react component names in the selector path, we should
modify clicked element to provide more specific info such as class, role
etc.
This prevents giving the react component name twice and would give more
info for debugging since react component names aren't very specific

Before: 
<img width="845" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/87b6c8cd-1b29-40bb-b448-715595cb255b">

Author: c298lee

src/sentry/replays/usecases/ingest/issue_creation.py

@@ -32,7 +32,7 @@ def report_rage_click_issue_with_replay_event(
     timestamp_utc = date.replace(tzinfo=datetime.UTC)
 
     selector = selector
-    clicked_element = selector.split(" > ")[-1]
+    clicked_element = _make_clicked_element(node)
     component_name = component_name
     evidence = [
         IssueEvidence(name="Clicked Element", value=clicked_element, important=False),
@@ -110,3 +110,27 @@ def _make_tags(replay_id, url, replay_event):
         tags.update(replay_event["tags"])
 
     return tags
+
+
+def _make_clicked_element(node):
+    element = node.get("tagName", "")
+    if "attributes" in node:
+        for key, value in node["attributes"].items():
+            if key == "id":
+                element += f"#{value}"
+            elif key == "class":
+                element = element + "." + ".".join(value.split(" "))
+            elif key == "role":
+                element += f'[role="{value}"]'
+            elif key == "alt":
+                element += f'[alt="{value}"]'
+            elif key == "data-test-id" or key == "data-testid":
+                element += f'[data-test-id="{value}"]'
+            elif key == "aria-label":
+                element += f'[aria="{value}"]'
+            elif key == "title":
+                element += f'[title="{value}"]'
+            elif key == "data-sentry-component":
+                element += f'[data-sentry-component="{value}"]'
+
+    return element

tests/sentry/replays/unit/test_issue_creation.py

@@ -23,36 +23,66 @@ def test_report_rage_click_issue_with_replay_event(mock_new_issue_occurrence, de
     report_rage_click_issue_with_replay_event(
         project_id=default_project.id,
         replay_id=replay_id,
-        selector="div.xyz > a",
+        selector="div.xyz > SmartSearchBar",
         timestamp=seq1_timestamp.timestamp(),
         url="https://www.sentry.io",
-        node={"tagName": "a"},
+        node={
+            "tagName": "a",
+            "attributes": {
+                "id": "id",
+                "class": "class1 class2",
+                "role": "button",
+                "aria-label": "test",
+                "alt": "1",
+                "data-testid": "2",
+                "title": "3",
+                "data-sentry-component": "SignUpForm",
+            },
+        },
         component_name="SmartSearchBar",
         replay_event=mock_replay_event(),
     )
     issue_occurence_call = mock_new_issue_occurrence.call_args[1]
     assert issue_occurence_call["culprit"] == "https://www.sentry.io"
     assert issue_occurence_call["environment"] == "production"
-    assert issue_occurence_call["fingerprint"] == ["div.xyz > a"]
+    assert issue_occurence_call["fingerprint"] == ["div.xyz > SmartSearchBar"]
     assert issue_occurence_call["issue_type"].type_id == 5002
     assert issue_occurence_call["level"] == "error"
     assert issue_occurence_call["platform"] == "javascript"
     assert issue_occurence_call["project_id"] == default_project.id
-    assert issue_occurence_call["subtitle"] == "div.xyz > a"
+    assert issue_occurence_call["subtitle"] == "div.xyz > SmartSearchBar"
     assert issue_occurence_call["title"] == "Rage Click"
     assert issue_occurence_call["evidence_data"] == {
-        "node": {"tagName": "a"},
-        "selector": "div.xyz > a",
+        "node": {
+            "tagName": "a",
+            "attributes": {
+                "id": "id",
+                "class": "class1 class2",
+                "role": "button",
+                "aria-label": "test",
+                "alt": "1",
+                "data-testid": "2",
+                "title": "3",
+                "data-sentry-component": "SignUpForm",
+            },
+        },
+        "selector": "div.xyz > SmartSearchBar",
         "component_name": "SmartSearchBar",
     }
 
     assert (
         issue_occurence_call["evidence_display"][0].to_dict()
-        == IssueEvidence(name="Clicked Element", value="a", important=False).to_dict()
+        == IssueEvidence(
+            name="Clicked Element",
+            value='a#id.class1.class2[role="button"][aria="test"][alt="1"][data-test-id="2"][title="3"][data-sentry-component="SignUpForm"]',
+            important=False,
+        ).to_dict()
     )
     assert (
         issue_occurence_call["evidence_display"][1].to_dict()
-        == IssueEvidence(name="Selector Path", value="div.xyz > a", important=False).to_dict()
+        == IssueEvidence(
+            name="Selector Path", value="div.xyz > SmartSearchBar", important=False
+        ).to_dict()
     )
     assert (
         issue_occurence_call["evidence_display"][2].to_dict()