{ const steps: DriveStep[] = [ { popover: { title: '🛠️ Troubleshoot a broken flow', description: 'We created a flow that is a temperature converter that validates input and converts Celsius to Fahrenheit. For this tutorial, our flow is intentionally broken.', onNextClick: () => { driver.moveNext() } } }, { element: SELECTORS.testFlowButton, onHighlighted: async () => { stepComplete[1] = false await wait(DELAY_SHORT) stepComplete[1] = true }, popover: { title: 'Test our flow', description: 'Let\'s run it so you can see what needs to be fixed.', side: 'bottom', onNextClick: async () => { if (!checkStepComplete(1)) return // Click the Test Flow button to open the drawer const testFlowButton = document.querySelector(SELECTORS.testFlowButton) as HTMLElement if (testFlowButton) { testFlowButton.click() await wait(DELAY_LONG) } driver.moveNext() } } }, { element: SELECTORS.testFlowDrawer, onHighlighted: async () => { stepComplete[2] = false await wait(DELAY_SHORT) stepComplete[2] = true }, popover: { title: 'Run the flow', description: 'Click "Next" to execute the flow. We\'ll use the results to troubleshoot the error.', side: 'left', onNextClick: async () => { if (!checkStepComplete(2)) return // Click the Test button to execute the flow const testButton = document.querySelector(SELECTORS.testFlowDrawer) as HTMLElement if (testButton) { testButton.click() } await wait(DELAY_LONG) driver.moveNext() } } }, { element: '.border.rounded-md.shadow.p-2', onHighlighted: async () => { stepComplete[3] = false await wait(DELAY_SHORT) stepComplete[3] = true }, popover: { title: 'Review the error', description: 'Our flow failed. Let\'s review the error and understand what happened.', side: 'left', onNextClick: () => { if (!checkStepComplete(3)) return driver.moveNext() } } }, { element: '.border-b.flex.flex-row.whitespace-nowrap.scrollbar-hidden.mx-auto', onHighlighted: async () => { stepComplete[4] = false await wait(DELAY_SHORT) stepComplete[4] = true }, popover: { title: 'Explore the tabs', description: 'Use these tabs to navigate between different views: Result, Logs, and Graph. We\'ll focus on the Graph tab to review the error.', side: 'bottom', onNextClick: () => { if (!checkStepComplete(4)) return driver.moveNext() } } }, { element: '.grid.grid-cols-3.border.h-full', onHighlighted: async () => { stepComplete[5] = false await wait(DELAY_SHORT) // Find the step 'b' button inside the drawer and click it with fake cursor const flowPreviewContent = getElementBySelector(SELECTORS.flowPreviewContent) if (flowPreviewContent) { const stepButton = findButtonByText(flowPreviewContent, TEXT.convertToFahrenheit) if (stepButton) { await animateFakeCursorClick(stepButton, 1.5, { usePointerEvents: true }) await wait(DELAY_MEDIUM) } } stepComplete[5] = true }, popover: { title: 'Inspect the flow graph', description: 'B step failed during the run. Let\'s take a closer look at its behavior.', side: 'top', onNextClick: () => { if (!checkStepComplete(5)) return driver.moveNext() } } }, { element: '.rounded-md.grow.bg-surface-tertiary.text-xs.flex.flex-col.max-h-screen.gap-2.overflow-hidden.border', onHighlighted: async () => { stepComplete[6] = false await wait(DELAY_SHORT) stepComplete[6] = true }, popover: { title: 'Error spotted!', description: 'We made a typo in the code. Let\'s fix it and run the flow again.', side: 'left', onNextClick: async () => { if (!checkStepComplete(6)) return // Click the close button inside the drawer const drawer = getElementBySelector(SELECTORS.flowPreviewContent) if (drawer) { const closeButton = findCloseButton(drawer) if (closeButton) { await animateFakeCursorClick(closeButton, 1.5) } } await wait(DELAY_LONG) driver.moveNext() } } }, { element: SELECTORS.stepB, onHighlighted: async () => { stepComplete[7] = false await wait(DELAY_SHORT) // Click on div id="b" to open the editor const stepBDiv = getElementBySelector(SELECTORS.stepB) if (stepBDiv) { await animateFakeCursorClick(stepBDiv, 1.5) await wait(DELAY_LONG) } stepComplete[7] = true }, popover: { title: 'Your turn now!', description: 'Fix the issue in the code, and run the flow again to confirm everything works.

💡 Want to learn more? Access more tutorials from the Tutorials page in the main menu or in the Help submenu.

', side: 'top', onNextClick: () => { if (!checkStepComplete(7)) return updateProgress(index) driver.destroy() } } } ] return steps }} />