Updated screenshot function to hide moving elements and blur input

frontend/src/metabase/home/containers/HomepageApp.jsx

@@ -81,7 +81,7 @@ export default class HomepageApp extends Component {
                         <div className="Layout-mainColumn">
                             <header style={this.styles.headerGreeting} className="flex align-center pb4 pt1">
                                 <Smile />
-                                <div className="ml2">{this.state.greeting}</div>
+                                <div id="Greeting" className="ml2">{this.state.greeting}</div>
                             </header>
                         </div>
                     </div>

frontend/src/metabase/lib/card.js

@@ -66,7 +66,7 @@ export function isCardDirty(card, originalCard) {
 }
 
 export function serializeCardForUrl(card) {
-    console.log(JSON.stringify(card, null, '  '));
+    // console.log(JSON.stringify(card, null, '  '));
     var dataset_query = angular.copy(card.dataset_query);
     if (dataset_query.query) {
         dataset_query.query = Query.cleanQuery(dataset_query.query);

frontend/test/e2e/admin/people.spec.js

@@ -74,8 +74,8 @@ describe("admin/people", () => {
             expect(await saveButton.isEnabled()).toBe(true);
             await saveButton.click();
 
-            expect(await waitForElementText(driver, ".ContentTable tr:first-child td:first-child span:last-child")).toEqual("12345 123456");
-            expect(await waitForElementText(driver, ".ContentTable tr:first-child td:nth-child(3)")).toEqual("12345@1234.com");
+            expect(await waitForElementText(driver, ".ContentTable tr:first-child td:first-child span:last-child", "12345 123456")).toEqual("12345 123456");
+            expect(await waitForElementText(driver, ".ContentTable tr:first-child td:nth-child(3)", "12345@1234.com")).toEqual("12345@1234.com");
 
             // reset user password
             await waitForAndClickElement(driver, ".ContentTable tr:first-child td:last-child a");

frontend/test/e2e/support/utils.js

@@ -19,9 +19,16 @@ export const waitForElementRemoved = async (driver, selector, timeout = DEFAULT_
     await driver.wait(until.stalenessOf(element), timeout);
 };
 
-export const waitForElementText = async (driver, selector, timeout = DEFAULT_TIMEOUT) => {
+export const waitForElementText = async (driver, selector, text, timeout = DEFAULT_TIMEOUT) => {
     const element = await waitForElement(driver, selector, timeout);
-    return await element.getText();
+    const elementText = await element.getText();
+
+    if (!text || text === elementText) {
+        return elementText;
+    }
+
+    await driver.wait(until.elementTextIs(element, text), timeout);
+    return text;
 };
 
 export const clickElement = async (driver, selector) =>
@@ -45,8 +52,16 @@ export const waitForUrl = (driver, url, timeout = DEFAULT_TIMEOUT) => {
     return driver.wait(async () => await driver.getCurrentUrl() === url, timeout);
 };
 
-const screenshotsToHideSelectors = {
-
+const screenshotToHideSelectors = {
+    "screenshots/setup-tutorial-main.png": [
+        "#Greeting"
+    ],
+    "screenshots/qb.png": [
+        ".LoadingSpinner"
+    ],
+    "screenshots/auth-login.png": [
+        ".brand-boat"
+    ]
 };
 
 export const screenshot = async (driver, filename) => {
@@ -55,6 +70,21 @@ export const screenshot = async (driver, filename) => {
         await fs.mkdir(dir);
     }
 
+    // hide elements that are always in motion or randomized
+    const hideSelectors = screenshotToHideSelectors[filename];
+    if (hideSelectors) {
+        await hideSelectors.map((selector) => driver.executeScript(`
+            const element = document.querySelector("${selector}");
+            if (!element) {
+                return;
+            }
+            element.classList.add('hide');
+        `));
+    }
+
+    // blur input focus to avoid capturing blinking cursor in diffs
+    await driver.executeScript(`document.activeElement.blur();`);
+
     const image = await driver.takeScreenshot();
     await fs.writeFile(filename, image, 'base64');
 };