diff --git a/conf/defaults.ini b/conf/defaults.ini
index 1c96618ac42..44f751d7234 100644
--- a/conf/defaults.ini
+++ b/conf/defaults.ini
@@ -1114,6 +1114,9 @@ license_path =
 # enable = feature1,feature2
 enable =
 
+# The new prometheus visual query builder 
+promQueryBuilder = true
+
 # feature1 = true
 # feature2 = false
 
diff --git a/e2e/various-suite/exemplars.spec.ts b/e2e/various-suite/exemplars.spec.ts
index 13abcbefc6b..e1369f38908 100644
--- a/e2e/various-suite/exemplars.spec.ts
+++ b/e2e/various-suite/exemplars.spec.ts
@@ -49,6 +49,9 @@ describe('Exemplars', () => {
     e2e.components.DataSourcePicker.container().should('be.visible').click();
     e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
 
+    // Switch to code editor
+    cy.contains('label', 'Code').click();
+
     // we need to wait for the query-field being lazy-loaded, in two steps:
     // 1. first we wait for the text 'Loading...' to appear
     // 1. then we wait for the text 'Loading...' to disappear
diff --git a/e2e/various-suite/query-editor.spec.ts b/e2e/various-suite/query-editor.spec.ts
index 90afade11d3..5a7e9d52025 100644
--- a/e2e/various-suite/query-editor.spec.ts
+++ b/e2e/various-suite/query-editor.spec.ts
@@ -11,7 +11,9 @@ e2e.scenario({
     e2e.components.DataSourcePicker.container().should('be.visible').click();
 
     cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
-    const queryText = 'http_requests_total';
+    const queryText = `rate(http_requests_total{job="grafana"}[5m])`;
+
+    cy.contains('label', 'Code').click();
 
     // we need to wait for the query-field being lazy-loaded, in two steps:
     // it is a two-step process:
@@ -20,13 +22,18 @@ e2e.scenario({
     const monacoLoadingText = 'Loading...';
     e2e.components.QueryField.container().should('be.visible').should('have.text', monacoLoadingText);
     e2e.components.QueryField.container().should('be.visible').should('not.have.text', monacoLoadingText);
-
-    e2e.components.QueryField.container().type(queryText).type('{backspace}');
+    e2e.components.QueryField.container().type(queryText, { parseSpecialCharSequences: false }).type('{backspace}');
 
     cy.contains(queryText.slice(0, -1)).should('be.visible');
 
     e2e.components.QueryField.container().type(e2e.typings.undo());
 
     cy.contains(queryText).should('be.visible');
+
+    cy.get('body').click();
+
+    cy.contains('label', 'Builder').click();
+
+    cy.get('[data-testid="operations.0.wrapper"]').should('be.visible');
   },
 });
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 75b38bc2107..967ac2dc2a9 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -171,6 +171,7 @@ export const Components = {
   QueryEditorRow: {
     actionButton: (title: string) => `${title} query operation action`,
     title: (refId: string) => `Query editor row title ${refId}`,
+    container: (refId: string) => `Query editor row ${refId}`,
   },
   AlertTab: {
     content: 'Alert editor tab content',