From 37fcfe1906bbec007b769b44deca96633fd03f7b Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Tue, 14 Feb 2017 15:54:54 -0800
Subject: [PATCH] Make screenshot test more stable by waiting for ripple
 animation to finish

---
 e2e/components/button/button.e2e.ts     | 10 +++++++---
 e2e/components/checkbox/checkbox.e2e.ts | 18 +++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts
index dd183358e118..91719f606425 100644
--- a/e2e/components/button/button.e2e.ts
+++ b/e2e/components/button/button.e2e.ts
@@ -1,4 +1,4 @@
-import {browser, by, element} from 'protractor';
+import {browser, by, element, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
 
 
@@ -9,12 +9,16 @@ describe('button', () => {
     it('should prevent click handlers from executing when disabled', () => {
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      screenshot('clicked once');
+      browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+        .then(() => screenshot('clicked once'));
 
       element(by.id('disable-toggle')).click();
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      screenshot('click disabled');
+      browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+        .then(() => screenshot('click disabled'));
     });
   });
 });
diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts
index b6b1a255b4a1..0ac0e1d420ea 100644
--- a/e2e/components/checkbox/checkbox.e2e.ts
+++ b/e2e/components/checkbox/checkbox.e2e.ts
@@ -1,4 +1,4 @@
-import {browser, by, element, Key} from 'protractor';
+import {browser, by, element, Key, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
 
 describe('checkbox', function () {
@@ -17,14 +17,18 @@ describe('checkbox', function () {
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('checked'));
       });
-      screenshot('checked');
 
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('unchecked'));
       });
-      screenshot('unchecked');
     });
 
     it('should toggle the checkbox when pressing space', () => {
@@ -32,14 +36,18 @@ describe('checkbox', function () {
 
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-        screenshot('start');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('start'));
       });
 
       inputEl.sendKeys(Key.SPACE);
 
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
-        screenshot('pressed space');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('pressed space'));
       });
     });