diff --git a/core/src/components/segment-view/test/basic/segment-view.e2e.ts b/core/src/components/segment-view/test/basic/segment-view.e2e.ts
new file mode 100644
index 0000000000..4644abc207
--- /dev/null
+++ b/core/src/components/segment-view/test/basic/segment-view.e2e.ts
@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('segment-view: basic'), () => {
+ test('should show the first content with no initial value', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+ Paid
+ Free
+ Top
+
+ `,
+ config
+ );
+
+ const segmentContent = page.locator('ion-segment-content[id="paid"]');
+ await expect(segmentContent).toBeInViewport();
+ });
+
+ test('should show the content matching the initial value', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+ Paid
+ Free
+ Top
+
+ `,
+ config
+ );
+
+ const segmentContent = page.locator('ion-segment-content[id="free"]');
+ await expect(segmentContent).toBeInViewport();
+ });
+
+ test('should update the content when changing the value by clicking a segment button', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+ Paid
+ Free
+ Top
+
+ `,
+ config
+ );
+
+ await page.click('ion-segment-button[value="top"]');
+
+ const segmentContent = page.locator('ion-segment-content[id="top"]');
+ await expect(segmentContent).toBeInViewport();
+ });
+ });
+});