test(playwright): verify inverse relation types display correctly on both sides

Add E2E tests for #29687 that verify the UI shows the correct relation
perspective on each side of an asymmetric relation (narrower/broader,
hasPart/partOf) and that the correct type persists after page reload.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: anuj-kumary

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryTermInverseRelation.spec.ts

@@ -0,0 +1,153 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import test, { expect } from '@playwright/test';
+import { SidebarItem } from '../../../constant/sidebar';
+import { Glossary } from '../../../support/glossary/Glossary';
+import { GlossaryTerm } from '../../../support/glossary/GlossaryTerm';
+import { getApiContext, redirectToHomePage } from '../../../utils/common';
+import {
+  addRelatedTermsByRelationType,
+  selectActiveGlossary,
+  selectActiveGlossaryTerm,
+} from '../../../utils/glossary';
+import { sidebarClick } from '../../../utils/sidebar';
+
+test.use({
+  storageState: 'playwright/.auth/admin.json',
+});
+
+test.describe('Glossary Term — Inverse Relation Display (#29687)', () => {
+  test.beforeEach(async ({ page }) => {
+    await redirectToHomePage(page);
+  });
+
+  test('should show correct inverse relation type on the target term after reload', async ({
+    page,
+  }) => {
+    const { apiContext, afterAction } = await getApiContext(page);
+    const glossary = new Glossary();
+    const termFrom = new GlossaryTerm(glossary);
+    const termTo = new GlossaryTerm(glossary);
+
+    try {
+      await glossary.create(apiContext);
+      await termFrom.create(apiContext);
+      await termTo.create(apiContext);
+
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary.data.displayName);
+      await selectActiveGlossaryTerm(page, termFrom.data.displayName);
+
+      await addRelatedTermsByRelationType(page, [
+        { relationTypeLabel: 'Narrower', terms: [termTo] },
+      ]);
+
+      const termToName =
+        termTo.responseData?.displayName ?? termTo.data.displayName;
+
+      await expect(page.getByTestId(termToName)).toBeVisible();
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Narrower', { exact: true })
+      ).toBeVisible();
+
+      await selectActiveGlossaryTerm(page, termTo.data.displayName);
+
+      const termFromName =
+        termFrom.responseData?.displayName ?? termFrom.data.displayName;
+
+      await expect(page.getByTestId(termFromName)).toBeVisible();
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Broader', { exact: true })
+      ).toBeVisible();
+
+      const reloadRes = page.waitForResponse(
+        `/api/v1/glossaryTerms/name/*${encodeURIComponent(
+          termTo.data.name
+        )}*`
+      );
+      await page.reload();
+      await reloadRes;
+
+      await expect(page.getByTestId(termFromName)).toBeVisible();
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Broader', { exact: true })
+      ).toBeVisible();
+    } finally {
+      await termFrom.delete(apiContext);
+      await termTo.delete(apiContext);
+      await glossary.delete(apiContext);
+      await afterAction();
+    }
+  });
+
+  test('should show different inverse types on each side of the same relation', async ({
+    page,
+  }) => {
+    const { apiContext, afterAction } = await getApiContext(page);
+    const glossary = new Glossary();
+    const termParent = new GlossaryTerm(glossary);
+    const termChild = new GlossaryTerm(glossary);
+
+    try {
+      await glossary.create(apiContext);
+      await termParent.create(apiContext);
+      await termChild.create(apiContext);
+
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary.data.displayName);
+      await selectActiveGlossaryTerm(page, termParent.data.displayName);
+
+      await addRelatedTermsByRelationType(page, [
+        { relationTypeLabel: 'Has Part', terms: [termChild] },
+      ]);
+
+      const termChildName =
+        termChild.responseData?.displayName ?? termChild.data.displayName;
+      const termParentName =
+        termParent.responseData?.displayName ?? termParent.data.displayName;
+
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Has Part', { exact: true })
+      ).toBeVisible();
+      await expect(page.getByTestId(termChildName)).toBeVisible();
+
+      await selectActiveGlossaryTerm(page, termChild.data.displayName);
+
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Part Of', { exact: true })
+      ).toBeVisible();
+      await expect(page.getByTestId(termParentName)).toBeVisible();
+
+      await expect(
+        page
+          .getByTestId('related-term-container')
+          .getByText('Has Part', { exact: true })
+      ).not.toBeVisible();
+    } finally {
+      await termParent.delete(apiContext);
+      await termChild.delete(apiContext);
+      await glossary.delete(apiContext);
+      await afterAction();
+    }
+  });
+});