feat(web-console): dynamic query status indicators, run button per query, run all queries in tab

.github/workflows/tests_with_context_path.yml

@@ -84,6 +84,14 @@ jobs:
           name: questdb-log
           path: tmp/dbroot/log/*
 
+      - name: Upload Cypress Screenshots
+        if: success() || failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-screenshots
+          path: packages/browser-tests/cypress/screenshots
+          if-no-files-found: ignore
+
       - name: Stop QuestDB
         if: success() || failure()
         run: ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh stop

packages/browser-tests/cypress/commands.js

@@ -86,13 +86,15 @@ beforeEach(() => {
 
 Cypress.Commands.add("clearSimulatedWarnings", () => {
   cy.typeQuery("select simulate_warnings('', '');");
-  cy.clickRun();
+  cy.clickRunIconInLine(1);
 });
 
 Cypress.Commands.add("getByDataHook", (name) =>
   cy.get(`[data-hook="${name}"]`)
 );
 
+Cypress.Commands.add("getByRole", (name) => cy.get(`[role="${name}"]`));
+
 Cypress.Commands.add("getGrid", () =>
   cy.get(".qg-viewport .qg-canvas").should("be.visible")
 );
@@ -103,9 +105,9 @@ Cypress.Commands.add("getGridRow", (n) =>
   cy.get(".qg-r").filter(":visible").eq(n)
 );
 
-Cypress.Commands.add("getColumnName", (n) => {
-  cy.get(".qg-header-name").filter(":visible").eq(n);
-})
+Cypress.Commands.add("getColumnName", (n) =>
+  cy.get(".qg-header-name").eq(n).invoke("text")
+);
 
 Cypress.Commands.add("getGridCol", (n) =>
   cy.get(".qg-c").filter(":visible").eq(n)
@@ -137,14 +139,22 @@ Cypress.Commands.add("runLineWithResponse", (response) => {
 });
 
 Cypress.Commands.add("clickLine", (n) => {
-  cy.get(".monaco-editor .view-line")
-    .eq(n - 1)
-    .click();
+  cy.window().then((win) => {
+    const monacoEditor = win.monaco.editor.getEditors()[0];
+    monacoEditor.revealLine(n);
+    monacoEditor.setPosition({
+      lineNumber: n,
+      column: monacoEditor.getModel().getLineMaxColumn(n),
+    });
+  });
+  cy.get(".active-line-number").should("contain", n);
 });
 
-Cypress.Commands.add("clickRun", () => {
-  cy.intercept("/exec*").as("exec");
-  return cy.get("button").contains("Run").click().wait("@exec");
+Cypress.Commands.add("scrollToLine", (n) => {
+  cy.window().then((win) => {
+    const monacoEditor = win.monaco.editor.getEditors()[0];
+    monacoEditor.revealLine(n);
+  });
 });
 
 Cypress.Commands.add("clearEditor", () => {
@@ -169,9 +179,7 @@ Cypress.Commands.add("getMountedEditor", () =>
   cy.get(".monaco-scrollable-element")
 );
 
-Cypress.Commands.add("getEditor", () => {
-  cy.get(".monaco-editor.vs-dark");
-});
+Cypress.Commands.add("getEditor", () => cy.get(".monaco-editor.vs-dark"));
 
 Cypress.Commands.add("getEditorContent", () =>
   cy
@@ -198,6 +206,49 @@ Cypress.Commands.add("getCursorQueryDecoration", () =>
 
 Cypress.Commands.add("getCursorQueryGlyph", () => cy.get(".cursorQueryGlyph"));
 
+Cypress.Commands.add("getRunIconInLine", (lineNumber) => {
+  cy.getCursorQueryGlyph().should("be.visible");
+  const selector = `.cursorQueryGlyph-line-${lineNumber}`;
+  cy.get("body").then(() => {
+    let element = null;
+
+    if (Cypress.$(selector).length > 0) {
+      element = cy.get(selector).first();
+    }
+
+    if (!element) {
+      throw new Error(`No run icon found for line ${lineNumber}.`);
+    }
+    return element;
+  });
+});
+
+Cypress.Commands.add("openRunDropdownInLine", (lineNumber) => {
+  cy.getRunIconInLine(lineNumber).rightclick();
+});
+
+Cypress.Commands.add("clickRunIconInLine", (lineNumber) => {
+  cy.getRunIconInLine(lineNumber).click();
+});
+
+Cypress.Commands.add("clickDropdownRunQuery", () => {
+  cy.intercept("/exec*").as("exec");
+  return cy.getByDataHook("dropdown-item-run-query").click().wait("@exec");
+});
+
+Cypress.Commands.add("clickDropdownGetQueryPlan", () => {
+  cy.intercept("/exec*").as("exec");
+  return cy.getByDataHook("dropdown-item-get-query-plan").click().wait("@exec");
+});
+
+Cypress.Commands.add("clickRunQuery", () => {
+  cy.intercept("/exec*").as("exec");
+  cy.getByDataHook("button-run-query")
+    .should("not.be.disabled")
+    .click()
+    .wait("@exec");
+});
+
 const numberRangeRegexp = (n, width = 3) => {
   const [min, max] = [n - width, n + width];
   const numbers = Array.from(
@@ -226,8 +277,29 @@ Cypress.Commands.add("F9", () => {
 
 Cypress.Commands.add("getSelectedLines", () => cy.get(".selected-text"));
 
+Cypress.Commands.add("selectRange", (startPos, endPos) => {
+  cy.window().then((win) => {
+    const monacoEditor = win.monaco.editor.getEditors()[0];
+    monacoEditor.setSelection({
+      startLineNumber: startPos.lineNumber,
+      startColumn: startPos.column,
+      endLineNumber: endPos.lineNumber,
+      endColumn: endPos.column,
+    });
+  });
+});
+
 Cypress.Commands.add("getVisibleLines", () => cy.get(".view-lines"));
 
+Cypress.Commands.add("expandNotifications", () =>
+  cy.get('[data-hook="expand-notifications"]').click()
+);
+
+Cypress.Commands.add("collapseNotifications", () => {
+  cy.get('[data-hook="collapse-notifications"]').click();
+  cy.get('[data-hook="notifications-collapsed"]').should("be.visible");
+});
+
 Cypress.Commands.add("getCollapsedNotifications", () =>
   cy.get('[data-hook="notifications-collapsed"]')
 );
@@ -334,7 +406,9 @@ Cypress.Commands.add("logout", () => {
 Cypress.Commands.add("executeSQL", (sql) => {
   cy.clearEditor();
   cy.typeQuery(sql);
-  cy.clickRun();
+  cy.intercept("/exec*").as("exec");
+  cy.clickRunIconInLine(1);
+  cy.wait("@exec");
 });
 
 Cypress.Commands.add("refreshSchema", () => {