diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts
index 896b1082be0..bd9f4693926 100644
--- a/packages/g6/__tests__/main.ts
+++ b/packages/g6/__tests__/main.ts
@@ -52,6 +52,25 @@ function initPanel() {
   const Animation = panel.add(options, 'Animation').onChange(render);
   const MultiLayers = panel.add(options, 'MultiLayers').onChange(render);
   const reload = panel.add(options, 'Reload').onChange(render);
+
+  const goTo = (diff: number) => {
+    // @ts-expect-error private property
+    const keys = Demo._values;
+    const currentIndex = keys.indexOf(options.Demo);
+    const nextIndex = (currentIndex + diff + keys.length) % keys.length;
+    options.Demo = keys[nextIndex];
+    Demo.updateDisplay();
+    render();
+  };
+
+  globalThis.addEventListener('keydown', (e) => {
+    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+      goTo(1);
+    } else if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+      goTo(-1);
+    }
+  });
+
   return { panel, Demo, Search, Renderer, GridLine, Theme, Animation, MultiLayers, reload };
 }
 
@@ -74,6 +93,10 @@ async function render() {
   const testCase = demos[Demo as keyof typeof demos];
   if (!testCase) return;
 
+  performance.clearMarks();
+  performance.clearMeasures();
+  performance.mark('demo-start');
+
   const graph = await testCase({
     container: canvas,
     animation: Animation,
@@ -81,6 +104,10 @@ async function render() {
     canvas: canvasOptions,
   });
 
+  performance.mark('demo-end');
+  performance.measure('demo', 'demo-start', 'demo-end');
+  console.log('Time:', performance.getEntriesByName('demo')[0].duration, 'ms');
+
   Object.assign(window, { graph, __g_instances__: Object.values(graph.getCanvas().getLayers()) });
 
   renderForm(panels.panel, testCase.form);