chore: Perform perf tests on a large app (#10831)

Co-authored-by: Satish Gandham <satish@appsmith.com>

app/client/perf/gen-summary.js

@@ -0,0 +1,4 @@
+const { summaries } = require("./src/summary");
+
+console.log(__dirname);
+summaries(`${__dirname}/traces/reports`);

app/client/perf/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "median": "^0.0.2",
     "node-stdev": "^1.0.1",
     "puppeteer": "^12.0.1",
     "sanitize-filename": "^1.6.3",

app/client/perf/src/perf.js

@@ -52,6 +52,9 @@ module.exports = class Perf {
       await this.page.screenshot({
         path: screenshotPath,
       });
+      if (this.currentTrace) {
+        await this.stopTrace();
+      }
       this.browser.close();
     });
   }
@@ -169,7 +172,7 @@ module.exports = class Perf {
       report[action].warnings = sortObjectKeys(tasks.getWarningCounts());
     });
 
-    fs.writeFile(
+    await fs.writeFile(
       `${APP_ROOT}/traces/reports/${getFormattedTime()}.json`,
       JSON.stringify(report, "", 4),
       (err) => {

app/client/perf/src/summary.js

@@ -1,8 +1,10 @@
 const fs = require("fs");
 const path = require("path");
 const sd = require("node-stdev");
+var median = require("median");
 
 global.APP_ROOT = path.resolve(__dirname);
+global.APP_ROOT = "/Users/satish/work/appsmith/app/client/perf";
 
 exports.summaries = async (directory) => {
   const files = await fs.promises.readdir(directory);
@@ -56,11 +58,11 @@ const generateMarkdown = (results) => {
   for (let i = 0; i < size; i++) {
     markdown = markdown + `| Run ${i + 1} `;
   }
-  markdown = markdown + `| Mean | SD.Sample | SD.Population`;
+  markdown = markdown + `| Median | Mean | SD.Sample | SD.Population`;
 
   markdown += "|\n";
 
-  for (let i = 0; i <= size + 3; i++) {
+  for (let i = 0; i <= size + 4; i++) {
     markdown = markdown + `| ------------- `;
   }
   markdown += "|\n";
@@ -68,7 +70,7 @@ const generateMarkdown = (results) => {
   Object.keys(results).forEach((key) => {
     const action = results[key];
     markdown += `**${key}**`;
-    for (let i = 0; i <= size; i++) {
+    for (let i = 0; i <= size + 4; i++) {
       markdown += `| `;
     }
     markdown += "|\n";
@@ -82,6 +84,8 @@ const generateMarkdown = (results) => {
           markdown += " | ";
         }
       }
+      // Add median
+      markdown += `| ${median(action[key])}`;
       // Add average
       const avg = parseFloat(
         (action[key].reduce((sum, val) => sum + val, 0) / length).toFixed(2),

app/client/perf/src/utils/utils.js

@@ -130,3 +130,14 @@ exports.sortObjectKeys = (obj) => {
     });
   return sortedObj;
 };
+
+exports.makeid = (length = 8) => {
+  var result = "";
+  var characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  var charactersLength = characters.length;
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};

app/client/perf/tests/golden-app.perf.js

@@ -0,0 +1,122 @@
+const path = require("path");
+const Perf = require("../src/perf.js");
+const dsl = require("./dsl/simple-typing").dsl;
+const { delay, makeid } = require("../src/utils/utils");
+process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
+
+const SEL = {
+  category: "div[label=Uncategorized]",
+  multiSelect: ".rc-select-selection-search-input",
+  table: "#tablejabdu9f16g",
+  tableData: ".t--property-control-tabledata textarea",
+  tableRow:
+    "#tablejabdu9f16g > div.tableWrap > div > div:nth-child(1) > div > div.tbody.no-scroll > div:nth-child(6) > div:nth-child(2)",
+  titleInput: ".appsmith_widget_in8e51pg3y  input",
+  updateButton:
+    "#comment-overlay-wrapper-4gnygu5jew > div > div > div > div > button",
+  tableRowCell:
+    "#tablejabdu9f16g > div.tableWrap > div > div:nth-child(1) > div > div.tbody.no-scroll > div:nth-child(6) > div:nth-child(2) > div > span > span > span",
+  deletePostButton:
+    "#tablejabdu9f16g > div.tableWrap > div > div:nth-child(1) > div > div.tbody.no-scroll > div:nth-child(1) > div:nth-child(27) > div > div > button",
+  modalTitle: "#reyoxo4oec",
+  closeModal:
+    "#comment-overlay-wrapper-lryg8kw537 > div > div > div > div > button",
+  commentsPageLink: "div[data-guided-tour-iid='Comments']",
+  commentsTableTitle: "#urzv99hdc8",
+};
+
+async function testTyping() {
+  const perf = new Perf();
+  await perf.launch();
+  const page = perf.getPage();
+  // await page.goto(
+  //   "https://dev.appsmith.com/applications/61f8d29164802f7676ae8631/pages/61f8d29164802f7676ae8637/edit",
+  //   {
+  //     waitUntil: "networkidle0",
+  //   },
+  // );
+
+  await perf.importApplication(`${APP_ROOT}/tests/dsl/blog-admin-app-dev.json`);
+
+  await delay(10000, "for newly created page to settle down");
+  // Make the elements of the dropdown render
+  await page.waitForSelector(SEL.multiSelect);
+  await page.click(SEL.multiSelect);
+
+  await perf.startTrace("Select category");
+  await page.waitForSelector(SEL.category);
+  await page.click(SEL.category);
+
+  await perf.stopTrace();
+
+  // Focus on the table widget
+  await page.waitForSelector(SEL.table);
+  await page.click(SEL.table);
+
+  // Profile table Data binding
+  await perf.startTrace("Bind table data");
+  await page.waitForSelector(SEL.tableData);
+  await page.type(SEL.tableData, "{{SelectQuery.data}}");
+  await page.waitForSelector(SEL.tableRow);
+  await perf.stopTrace();
+
+  // Click on table row
+  await perf.startTrace("Click on table #comments");
+  await page.click(SEL.tableRow);
+  await page.waitForFunction(
+    `document.querySelector("${SEL.titleInput}").value.includes("Template: Comments")`,
+  );
+
+  await perf.stopTrace();
+
+  // Edit title
+  await page.waitForSelector(SEL.titleInput);
+  await perf.startTrace("Update title");
+
+  const randomString = makeid();
+  await page.type(SEL.titleInput, randomString);
+  await delay(5000, "For the evaluations to comeback?");
+
+  await page.waitForSelector(SEL.updateButton);
+  await page.click(SEL.updateButton);
+  // When the row is updated, selected row changes.
+  // await page.waitForSelector(SEL.tableRowCell);
+  await page.waitForFunction(
+    `document.querySelector("${SEL.table}").textContent.includes("${randomString}")`,
+  );
+  await perf.stopTrace();
+
+  // Open modal
+  await page.waitForSelector(SEL.deletePostButton);
+  await perf.startTrace("Open modal");
+  await page.click(SEL.deletePostButton);
+  await page.waitForSelector(SEL.modalTitle);
+  await perf.stopTrace();
+
+  // Close modal
+  await page.waitForSelector(SEL.closeModal);
+  await perf.startTrace("Close modal");
+  await page.click(SEL.closeModal);
+  await delay(3000, "wait after closing modal");
+  await perf.stopTrace();
+
+  /* Enable this after the new entity explorer
+  // Navigate to a page
+  await page.waitForSelector(SEL.commentsPageLink);
+  await perf.startTrace("Switch page");
+  await page.click(SEL.commentsPageLink);
+  await page.waitForSelector(SEL.commentsTableTitle);
+  await perf.stopTrace();
+*/
+  await perf.generateReport();
+  await perf.close();
+}
+
+async function runTests() {
+  await testTyping();
+  await testTyping();
+  await testTyping();
+  await testTyping();
+  await testTyping();
+}
+runTests();

app/client/perf/yarn.lock

@@ -190,6 +190,11 @@ lodash@^4.17.2:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+median@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/median/-/median-0.0.2.tgz#1b7172bc221eb3e9bf4f479fadaadefc50c44787"
+  integrity sha1-G3FyvCIes+m/T0efrare/FDER4c=
+
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"