diff --git a/e2e/playground.spec.ts b/e2e/playground.spec.ts
index 4f09adc0..48219968 100644
--- a/e2e/playground.spec.ts
+++ b/e2e/playground.spec.ts
@@ -100,6 +100,11 @@ test.describe('Playground page', () => {
     expect(requestId).toHaveLength(20);
     expect(requestId).not.toEqual(oldRequestId);
   });
+
+  test.only('Clicking JSON link scrolls to appropriate JSON property', async ({ page }) => {
+    await page.getByText('See the JSON below').click({ force: true });
+    await expect(page.locator('span.json-view--property:text("rawDeviceAttributes")')).toBeInViewport();
+  });
 });
 
 test.describe('Proxy integration', () => {
diff --git a/src/app/playground/components/ArrowLinks.tsx b/src/app/playground/components/ArrowLinks.tsx
index 9fa0591c..f339606c 100644
--- a/src/app/playground/components/ArrowLinks.tsx
+++ b/src/app/playground/components/ArrowLinks.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { FunctionComponent, useRef } from 'react';
 import { ExternalLinkArrowSvg } from '../../../client/img/externalLinkArrowSvg';
 import styles from '../playground.module.scss';
+import { TEST_IDS } from '../../../client/testIDs';
 
 export const DocsLink: FunctionComponent<{ children: string; href: string; style?: React.CSSProperties }> = ({
   children,
@@ -40,6 +41,8 @@ export const JsonLink: FunctionComponent<{
   return (
     <div
       className={styles.jsonLink}
+      data-testid={TEST_IDS.playground.jsonLink}
+      data-test-property-name={propertyName}
       onClick={() => {
         // scroll to property and highlight it
         const jsonProperties = document.querySelectorAll('.json-view--property');
diff --git a/src/client/testIDs.ts b/src/client/testIDs.ts
index 5dbe21d5..82400e70 100644
--- a/src/client/testIDs.ts
+++ b/src/client/testIDs.ts
@@ -88,6 +88,7 @@ export const TEST_IDS = {
     agentResponseJSON: 'agentResponseJSON',
     serverResponseJSON: 'serverResponseJSON',
     refreshButton: 'refreshButton',
+    jsonLink: 'jsonLink',
   },
 } as const;