Repository: ionic-team/ionic-framework
File: core/src/components/segment-view/test/dynamic-height/segment-view.e2e.ts (TypeScript)

Code before:

        <ion-segment>
          <ion-segment-button value="first" content-id="first">
            <ion-label>First</ion-label>
          </ion-segment-button>
          <ion-segment-button value="second" content-id="second">
            <ion-label>Second</ion-label>
          </ion-segment-button>
          <ion-segment-button value="third" content-id="third">
            <ion-label>Third</ion-label>
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="first">
            Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora
            quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum
            mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus
            comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The
            voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum
            defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv
          </ion-segment-content>
          <ion-segment-content id="second">
            <ion-input value="" label="Email"></ion-input>
          </ion-segment-content>
          <ion-segment-content id="third">
            <ion-img class="img-part" src="https://picsum.photos/200/300"></ion-img>
          </ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      // Click the third button
      await page.locator('ion-segment-button[value="third"]').click();

      // Wait for the content to be scrolled
      await page.waitForChanges();

      // Check that the third content is visible
      const segmentView = page.locator('ion-segment-view');
      const thirdContent = page.locator('ion-segment-content#third');

      const viewBox = await segmentView.boundingBox();
      const contentBox = await thirdContent.boundingBox();

      if (!viewBox || !contentBox) throw new Error('Bounding box not found');

      // Allow a small tolerance to account for subpixel rendering,
      // scrollbars, or layout rounding differences
      const tolerance = 10;
      expect(contentBox.x).toBeGreaterThanOrEqual(viewBox.x);

Review comment (suggestion):
I can verify this works, however this test is going to be quite annoying for us at some point in the future, if not immediately. The problem is, it doesn't wait for the image to load before verifying the height of the third tab, which means we're depending on the speed of our internet and this image hosts' bandwidth.

I'd recommend either changing the way this test works, or adding something that waits for the image to load like this:

```typescript
      await page.waitForFunction(() => {
        const ionImg = document.querySelector('ion-segment-content#third ion-img');
        if (!ionImg) return false;

        // Check if the shadow DOM img element is loaded
        const shadowRoot = ionImg.shadowRoot;
        if (!shadowRoot) return false;

        const img = shadowRoot.querySelector('img');
        return img && img.complete && img.naturalHeight !== 0;
      });
```

This happened to me locally while testing, BTW. That's how I found the issue 😅 
<img width="945" height="220" alt="Screenshot-2025-07-16 at 06 26 26" src="https://github.com/user-attachments/assets/798835dd-1d4b-4dca-b365-53db9ad224f5" />


Code after:

        <ion-segment>
          <ion-segment-button value="first" content-id="first">
            <ion-label>First</ion-label>
          </ion-segment-button>
          <ion-segment-button value="second" content-id="second">
            <ion-label>Second</ion-label>
          </ion-segment-button>
          <ion-segment-button value="third" content-id="third">
            <ion-label>Third</ion-label>
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="first">
            Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora
            quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum
            mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus
            comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The
            voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum
            defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv
          </ion-segment-content>
          <ion-segment-content id="second">
            <ion-input value="" label="Email"></ion-input>
          </ion-segment-content>
          <ion-segment-content id="third">
            <ion-img class="img-part" src="https://picsum.photos/200/300"></ion-img>
          </ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      // Click the third button
      await page.locator('ion-segment-button[value="third"]').click();

      // Wait for the content to be scrolled
      await page.waitForChanges();

      // Wait for the image to load and be visible
      const imgLocator = page.locator('ion-segment-content#third ion-img');
      await imgLocator.waitFor({ state: 'visible', timeout: 10000 });

      // Wait for any layout adjustments
      await page.waitForChanges();

      // Check that the third content is visible
      const segmentView = page.locator('ion-segment-view');
      const thirdContent = page.locator('ion-segment-content#third');

      const viewBox = await segmentView.boundingBox();
      const contentBox = await thirdContent.boundingBox();