Add a web vital integration test

This tests ensures that web vitals are measured and emitted to the metric samples channel. We read off the channel and assert that expected web vitals metrics have been emitted during the test run.
grafana · Mar 28, 2023 · 2eb7085 · 2eb7085
1 parent 65ab80a
commit 2eb7085
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 0 deletions.
diff --git a/tests/static/web_vitals.html b/tests/static/web_vitals.html
@@ -0,0 +1,69 @@
+<!--
+  This web page has sleeps to mimic getting things over the
+  network that could affect a web page as it is being loaded.
+  This helps the web vital library to measure and emit web
+  vitals. A perfect page where everything loads instantly
+  will only emit a couple of web vital metrics as there will
+  not be enough data to work with.
+-->
+
+<html>
+  <head>
+    <title>for web vital</title>
+  </head>
+  <script type="text/javascript">
+    async function myFunction() {
+      await new Promise(r => setTimeout(r, 200));
+
+      document.getElementById("onLoadDiv").innerText = "⏳";
+
+      await new Promise(r => setTimeout(r, 200));
+
+      const link = document.createElement('a');
+      link.setAttribute("id", "clickMe");
+      link.href = "javascript:clickMeFunction()"
+      link.text = "Click me"
+      document.body.insertBefore(link, document.getElementById("theTable"));
+
+      document.getElementById("onLoadDiv").innerText = "⌛️";
+    }
+    async function clickMeFunction() {
+      document.getElementById("amendableDiv").innerText = "👍";
+      await new Promise(r => setTimeout(r, 200));
+      location.reload();
+    }
+  </script>
+  <div id="amendableDiv"></div>
+  <div id="onLoadDiv"></div>
+  <div id="textBlock">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+    officia deserunt mollit anim id est laborum.
+  </div>
+  <body onload="myFunction()">
+    <table id="theTable">
+      <tr>
+        <td>Title</td>
+        <td>Review</td>
+      </tr>
+      <tr>
+        <td>Book A</td>
+        <td>Good</td>
+      </tr>
+      <tr>
+        <td>Book B</td>
+        <td>Ok</td>
+      </tr>
+      <tr>
+        <td>Book C</td>
+        <td>Not good</td>
+      </tr>
+      <tr>
+        <td>Book D</td>
+        <td>Very good</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/tests/webvital_test.go b/tests/webvital_test.go
@@ -0,0 +1,69 @@
+package tests
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	k6metrics "go.k6.io/k6/metrics"
+)
+
+// TestWebVitalMetric is asserting that web vital metrics
+// are being emitted when navigating and interacting with
+// a web page.
+func TestWebVitalMetric(t *testing.T) {
+	var (
+		samples  = make(chan k6metrics.SampleContainer)
+		browser  = newTestBrowser(t, withFileServer(), withSamplesListener(samples))
+		page     = browser.NewPage(nil)
+		expected = map[string]bool{
+			"webvital_time_to_first_byte":           false,
+			"webvital_time_to_first_byte_good":      false,
+			"webvital_first_contentful_paint":       false,
+			"webvital_first_contentful_paint_good":  false,
+			"webvital_largest_content_paint":        false,
+			"webvital_largest_content_paint_good":   false,
+			"webvital_first_input_delay":            false,
+			"webvital_first_input_delay_good":       false,
+			"webvital_cumulative_layout_shift":      false,
+			"webvital_cumulative_layout_shift_good": false,
+		}
+	)
+
+	count := 0
+	ctx, cancel := context.WithTimeout(context.Background(), time.Second*3)
+	go func() {
+		for {
+			metric := <-samples
+			samples := metric.GetSamples()
+			for _, s := range samples {
+				if _, ok := expected[s.Metric.Name]; ok {
+					expected[s.Metric.Name] = true
+					count++
+				}
+			}
+			if count == len(expected) {
+				cancel()
+			}
+		}
+	}()
+
+	resp, err := page.Goto(browser.staticURL("/web_vitals.html"), nil)
+	require.NoError(t, err)
+	require.NotNil(t, resp)
+
+	// A click action helps measure first input delay.
+	// The click action also refreshes the page, which
+	// also helps the web vital library to measure CLS.
+	err = page.Click("#clickMe", nil)
+	require.NoError(t, err)
+
+	<-ctx.Done()
+
+	for k, v := range expected {
+		assert.True(t, v, "expected %s to have been measured and emitted", k)
+	}
+}