From c22971e5423e83610890dc8c433acf16a7fa909e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Telaty=C5=84ski?= <7t3chguy@gmail.com>
Date: Mon, 27 Feb 2023 09:16:49 +0000
Subject: [PATCH] Improve percy snapshot stability (#10239)

---
 cypress/e2e/polls/polls.spec.ts       |  4 ++--
 cypress/e2e/timeline/timeline.spec.ts | 14 ++++++--------
 cypress/support/percy.ts              |  4 +++-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts
index 07a14533c7..b2537c2cbe 100644
--- a/cypress/e2e/polls/polls.spec.ts
+++ b/cypress/e2e/polls/polls.spec.ts
@@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { MatrixClient } from "../../global";
 import Chainable = Cypress.Chainable;
 
-const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
 
 describe("Polls", () => {
     let homeserver: HomeserverInstance;
@@ -133,7 +133,7 @@ describe("Polls", () => {
             .as("pollId");
 
         cy.get<string>("@pollId").then((pollId) => {
-            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hideTimestampCSS });
+            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hidePercyCSS });
 
             // Bot votes 'Maybe' in the poll
             botVoteForOption(bot, roomId, pollId, pollParams.options[2]);
diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index aa5a94a6dd..246f4e3d77 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -185,9 +185,8 @@ describe("Timeline", () => {
                 .should("have.css", "margin-inline-start", "104px")
                 .should("have.css", "inset-inline-start", "0px");
 
-            // Exclude timestamp from snapshot
-            const percyCSS =
-                ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }";
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
             cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", {
                 percyCSS,
             });
@@ -213,8 +212,8 @@ describe("Timeline", () => {
             // Click timestamp to highlight hidden event line
             cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
 
-            // Exclude timestamp from snapshot
-            const percyCSS = ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp { visibility: hidden !important; }";
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
 
             // should not add inline start padding to a hidden event line on IRC layout
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -336,9 +335,8 @@ describe("Timeline", () => {
 
             cy.checkA11y();
 
-            // Exclude timestamp from snapshot
-            const percyCSS =
-                ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }";
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
             cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", {
                 percyCSS,
                 widths: [800, 400],
diff --git a/cypress/support/percy.ts b/cypress/support/percy.ts
index b0f5c9f7c7..9183d5ebf6 100644
--- a/cypress/support/percy.ts
+++ b/cypress/support/percy.ts
@@ -41,7 +41,9 @@ declare global {
 Cypress.Commands.add("percySnapshotElement", { prevSubject: "element" }, (subject, name, options) => {
     if (!options?.allowSpinners) {
         // Await spinners to vanish
-        cy.get(".mx_Spinner").should("not.exist");
+        cy.get(".mx_Spinner", { log: false }).should("not.exist");
+        // But like really no more spinners please
+        cy.get(".mx_Spinner", { log: false }).should("not.exist");
     }
     cy.percySnapshot(name, {
         domTransformation: (documentClone) => scope(documentClone, subject.selector),