test(perf): Add a test to measure overall rendering timings (#2518)

Author: markov00

e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/lens-stress-test-chrome-linux.png

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { test, expect } from '@playwright/test';
+
+import { common, CommonPage } from '../page_objects';
+
+test.describe('Performance', () => {
+  for (let i = 0; i < 10; i++) {
+    test(`Get performance metrics ${i}`, async ({ page }) => {
+      const url = CommonPage.parseUrl('http://localhost:9001/?path=/story/test-cases--lens-stress-test');
+      await page.goto(url);
+      await common.waitForElement(page)(common.chartWaitSelector);
+      await page.evaluate(() => window.performance.measure('overall', 'Perf:Started', 'Perf:Ended'));
+      // eslint-disable-next-line no-console
+      console.log('=============Performance Metrics===============');
+      const getAllMarksJson = await page.evaluate(() => JSON.stringify(window.performance.getEntriesByType('mark')));
+      const getAllMarks = await JSON.parse(getAllMarksJson);
+      // eslint-disable-next-line no-console
+      console.log('window.performance.getEntriesByType("mark")', getAllMarks);
+      const getAllMeasuresJson = await page.evaluate(() =>
+        JSON.stringify(window.performance.getEntriesByType('measure')),
+      );
+      const getAllMeasures = await JSON.parse(getAllMeasuresJson);
+      // eslint-disable-next-line no-console
+      console.log('window.performance.getEntriesByType("measure")', getAllMeasures);
+      // using these two values as min/max to understand if we are increasing or decreasing the rendering speed.
+      expect(getAllMeasures[0].duration).toBeGreaterThan(1500);
+      expect(getAllMeasures[0].duration).toBeLessThan(1800);
+    });
+  }
+});

e2e/tests/performance.test.ts

@@ -52,7 +52,7 @@
     "test:e2e:generate:examples": "./e2e_server/scripts/extract_examples.sh",
     "test:e2e:generate:page": "./e2e_server/scripts/compile_vrt_page.sh",
     "test:e2e:server": "export NODE_OPTIONS=--openssl-legacy-provider; sh ./e2e_server/scripts/start.sh",
-    "test:e2e:server:build": "export NODE_OPTIONS=--openssl-legacy-provider; cd e2e_server/server && webpack build",
+    "test:e2e:server:build": "export NODE_OPTIONS=--openssl-legacy-provider; cd e2e_server/server && webpack build && cp ../../public/data.json ../.out/",
     "typecheck:base": "tsc -p ./tsconfig.base.json --noEmit",
     "typecheck:src": "lerna run --loglevel=silent --scope @elastic/charts typecheck --stream --no-prefix",
     "typecheck:docs": "lerna run --loglevel=silent --scope elastic-charts-docs typecheck --stream --no-prefix",