[E2E] Fix 13455 flake (#21476)

* Move comment to an appropriate place

* Limit the number of results to speed things up

* Wait for both `dataset` responses to come back

* Use second to last index

* Use a helper function instead of aliases

* Add some additional comments

* Update test title

frontend/test/metabase/scenarios/question/settings.cy.spec.js

@@ -72,7 +72,7 @@ describe("scenarios > question > settings", () => {
         .should("not.exist");
     });
 
-    it("should preserve correct order of columns after column removal via sidebar (metabase#13455)", () => {
+    it("should preserve correct order of columns after column removal or addition via sidebar (metabase#13455)", () => {
       cy.viewport(2000, 1200);
       // Orders join Products
       visitQuestionAdhoc({
@@ -92,6 +92,7 @@ describe("scenarios > question > settings", () => {
                 alias: "Products",
               },
             ],
+            limit: 5,
           },
           database: SAMPLE_DB_ID,
         },
@@ -99,12 +100,8 @@ describe("scenarios > question > settings", () => {
       });
 
       cy.findByText("Settings").click();
-      cy.findByTextEnsureVisible("Click and drag to change their order")
-        .parent()
-        .find(".cursor-grab")
-        .as("sidebarColumns"); // Store all columns in an array
 
-      cy.get("@sidebarColumns")
+      getSidebarColumns()
         .eq("12")
         .as("prod-category")
         .contains(/Products? → Category/);
@@ -117,46 +114,60 @@ describe("scenarios > question > settings", () => {
         .trigger("mouseup", 0, -300, { force: true });
 
       reloadResults();
+
       findColumnAtIndex("Products → Category", 5);
+
       // Remove "Total"
-      cy.get("@sidebarColumns")
+      getSidebarColumns()
         .contains("Total")
         .closest(".cursor-grab")
         .find(".Icon-close")
         .click();
+
       reloadResults();
+
       cy.findByText("117.03").should("not.exist");
+
       // This click doesn't do anything, but simply allows the array to be updated (test gives false positive without this step)
       cy.findByText("Visible columns").click();
+
       findColumnAtIndex("Products → Category", 5);
 
+      // We need to do some additional checks. Please see:
       // https://github.com/metabase/metabase/pull/21338#pullrequestreview-928807257
 
       // Add "Address"
       cy.findByText("Address")
         .siblings(".Icon-add")
         .click();
-      /**
-       * Helper functions related to THIS test only
-       */
-      // The result automatically load when adding new fields
-      cy.wait("@dataset");
 
-      // Refresh @sidebarColumns as we added a new field
-      cy.findByText("Click and drag to change their order")
-        .parent()
-        .find(".cursor-grab")
-        .as("sidebarColumns"); // Store all columns in an array
+      // The result automatically load when adding new fields but two requests are fired.
+      // Please see: https://github.com/metabase/metabase/pull/21338#discussion_r842816687
+      cy.wait(["@dataset", "@dataset"]);
 
       findColumnAtIndex("User → Address", -1).as("user-address");
 
+      // Move it one place up
       cy.get("@user-address")
         .trigger("mousedown", 0, 0, { force: true })
         .trigger("mousemove", 5, 5, { force: true })
         .trigger("mousemove", 0, -50, { force: true })
         .trigger("mouseup", 0, -50, { force: true });
 
-      findColumnAtIndex("User → Address", 15);
+      findColumnAtIndex("User → Address", -2);
+
+      /**
+       * Helper functions related to THIS test only
+       */
+
+      function getSidebarColumns() {
+        return cy
+          .findByText("Click and drag to change their order")
+          .scrollIntoView()
+          .should("be.visible")
+          .parent()
+          .find(".cursor-grab");
+      }
 
       function reloadResults() {
         cy.icon("play")
@@ -169,8 +180,7 @@ describe("scenarios > question > settings", () => {
       }
 
       function findColumnAtIndex(column_name, index) {
-        return cy
-          .get("@sidebarColumns")
+        return getSidebarColumns()
           .eq(index)
           .contains(column_name);
       }