E2E: Add new run modes for e2e tests (#22795)

* WIP: started e2e tests for bar gauge

* Updated

* Updated

* Updated cypress from 3.7 -> 4.1

* reverted cypress upgrade

* Updated test

* Update e2e docs

* Updated docs

e2e/run-suite

@@ -8,8 +8,23 @@ timeout 60 bash -c 'until nc -z $0 $1; do sleep 1; done' localhost $PORT
 
 echo -e "Starting Cypress scenarios"
 
+CMD="start"
+PARAMS=""
+SLOWMO=0
+
+if [ "$1" == "debug" ]; then
+    echo -e "Debug mode"
+    SLOWMO=1
+    PARAMS="--headed --no-exit"
+fi
+
+if [ "$1" == "dev" ]; then
+    echo "Dev mode"
+    CMD="open"
+fi
+
 cd packages/grafana-e2e
 
-yarn start --env BASE_URL=http://localhost:$PORT,CIRCLE_SHA1=$CIRCLE_SHA1,SLOWMO=$SLOWMO \
+yarn $CMD --env BASE_URL=http://localhost:$PORT,CIRCLE_SHA1=$CIRCLE_SHA1,SLOWMO=$SLOWMO \
   --config integrationFolder=../../e2e/suite1/specs,screenshotsFolder=../../e2e/suite1/screenshots,videosFolder=../../e2e/suite1/videos,fileServerFolder=./cypress,viewportWidth=1920,viewportHeight=1080,trashAssetsBeforeRuns=false \
-  "$@"
+  $PARAMS

e2e/suite1/specs/bar-gauge.spec.ts

@@ -0,0 +1,18 @@
+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Bar Gauge Panel',
+  itName: 'Bar Guage rendering e2e tests',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    // open Panel Tests - Bar Gauge
+    e2e.flows.openDashboard('O6f11TZWk');
+
+    e2e()
+      .get('#panel-6 .bar-gauge__value')
+      .should('have.css', 'color', 'rgb(242, 73, 92)')
+      .contains('100');
+  },
+});