fix(discover): Fix flakey test on span view in Discover (#32733)

Co-authored-by: Ash Anand <0Calories@users.noreply.github.com>

static/app/components/events/interfaces/spans/spanBar.tsx

@@ -923,6 +923,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
   }
 
   render() {
+    const {spanNumber} = this.props;
     const bounds = this.getBounds();
     const {isSpanVisibleInView} = bounds;
 
@@ -932,7 +933,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
           ref={this.spanRowDOMRef}
           visible={isSpanVisibleInView}
           showBorder={this.state.showDetail}
-          data-test-id="span-row"
+          data-test-id={`span-row-${spanNumber}`}
         >
           <QuickTraceContext.Consumer>
             {quickTrace => {

static/app/components/events/interfaces/spans/spanGroupBar.tsx

@@ -329,7 +329,11 @@ class SpanGroupBar extends React.Component<Props> {
               const durationString = getHumanDuration(duration);
 
               return (
-                <Row visible={isSpanVisible} showBorder={false} data-test-id="span-row">
+                <Row
+                  visible={isSpanVisible}
+                  showBorder={false}
+                  data-test-id={`span-row-${spanNumber}`}
+                >
                   <RowCellContainer>
                     <RowCell
                       data-type="span-row-cell"

tests/acceptance/test_organization_events_v2.py

@@ -406,11 +406,11 @@ class OrganizationEventsV2Test(AcceptanceTestCase, SnubaTestCase):
             self.browser.snapshot("events-v2 - transactions event with auto-grouped spans")
 
             # Expand auto-grouped spans
-            self.browser.elements('[data-test-id="span-row"]')[4].click()
+            self.browser.element('[data-test-id="span-row-5"]').click()
 
             # Open a span detail so we can check the search by trace link.
             # Click on the 6th one as a missing instrumentation span is inserted.
-            self.browser.elements('[data-test-id="span-row"]')[6].click()
+            self.browser.element('[data-test-id="span-row-7"]').click()
 
             # Wait until the child event loads.
             child_button = '[data-test-id="view-child-transaction"]'