Make screenshot test more stable by waiting for ripple animation to finish

Author: tinayuangao

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'));
     });
   });
 });

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,29 +17,37 @@ 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', () => {
       let inputEl = element(by.css('input[id=input-test-checkbox]'));
 
       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'));
       });
     });