build: more stable screenshot tests (#7774)

* Most of the time the screenshot tests are failing because the caret is blinking and therefore the screenshot is different. Setting the caret-color to `transparent` for focused elements ensures that the screenshot tests are running more stable.

Author: devversion

src/e2e-app/e2e-app/e2e-app.css

@@ -0,0 +1,8 @@
+/**
+ * Don't show the caret for focused elements since those are causing the screenshot comparisons
+ * to be flaky. The `caret-color` CSS property is not supported in most of the browsers, but since
+ * the e2e tests run against Chrome we can use that property instead of a workaround using `color`.
+ */
+*:focus {
+  caret-color: transparent;
+}

src/e2e-app/e2e-app/e2e-app.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
@@ -11,6 +11,8 @@ export class Home {}
   moduleId: module.id,
   selector: 'e2e-app',
   templateUrl: 'e2e-app.html',
+  styleUrls: ['e2e-app.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class E2EApp {
   showLinks: boolean = false;