diff --git a/modules/benchmarks/src/largetable/BUILD.bazel b/modules/benchmarks/src/largetable/BUILD.bazel
index a03fd4fe0c..0a662ad406 100644
--- a/modules/benchmarks/src/largetable/BUILD.bazel
+++ b/modules/benchmarks/src/largetable/BUILD.bazel
@@ -21,7 +21,7 @@ ts_library(
         "largetable_perf.spec.ts",
     ],
     deps = [
-        "//modules/e2e_util:lib",
+        "//modules/e2e_util",
         "//packages:types",
         "@ngdeps//protractor",
     ],
diff --git a/modules/benchmarks/src/tree/BUILD.bazel b/modules/benchmarks/src/tree/BUILD.bazel
index 64f64eef6d..9dea8fba76 100644
--- a/modules/benchmarks/src/tree/BUILD.bazel
+++ b/modules/benchmarks/src/tree/BUILD.bazel
@@ -21,7 +21,7 @@ ts_library(
         "tree_perf.spec.ts",
     ],
     deps = [
-        "//modules/e2e_util:lib",
+        "//modules/e2e_util",
         "//packages:types",
         "@ngdeps//protractor",
     ],
diff --git a/modules/e2e_util/BUILD.bazel b/modules/e2e_util/BUILD.bazel
index 6209f07cf1..a39c6ac905 100644
--- a/modules/e2e_util/BUILD.bazel
+++ b/modules/e2e_util/BUILD.bazel
@@ -3,7 +3,7 @@ package(default_visibility = ["//visibility:public"])
 load("//tools:defaults.bzl", "ts_library")
 
 ts_library(
-    name = "lib",
+    name = "e2e_util",
     testonly = 1,
     srcs = glob(["*.ts"]),
     deps = [
diff --git a/modules/playground/e2e_test/BUILD.bazel b/modules/playground/e2e_test/BUILD.bazel
new file mode 100644
index 0000000000..b8c5b364b1
--- /dev/null
+++ b/modules/playground/e2e_test/BUILD.bazel
@@ -0,0 +1 @@
+exports_files(["start-server.js"])
diff --git a/modules/playground/e2e_test/async/BUILD.bazel b/modules/playground/e2e_test/async/BUILD.bazel
new file mode 100644
index 0000000000..90ff687e3e
--- /dev/null
+++ b/modules/playground/e2e_test/async/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "async",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/async:devserver",
+)
diff --git a/modules/playground/e2e_test/async/async_spec.ts b/modules/playground/e2e_test/async/async_spec.ts
index d2afab7542..c67993f581 100644
--- a/modules/playground/e2e_test/async/async_spec.ts
+++ b/modules/playground/e2e_test/async/async_spec.ts
@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, browser} from 'protractor';
 import {promise} from 'selenium-webdriver';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('async', () => {
-  const URL = 'all/playground/src/async/index.html';
+  const URL = '/';
 
   beforeEach(() => browser.get(URL));
 
diff --git a/modules/playground/e2e_test/example_test.bzl b/modules/playground/e2e_test/example_test.bzl
new file mode 100644
index 0000000000..c58cefd3aa
--- /dev/null
+++ b/modules/playground/e2e_test/example_test.bzl
@@ -0,0 +1,31 @@
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("//tools:defaults.bzl", "ts_library")
+
+def example_test(name, srcs, server, data = []):
+    ts_library(
+        name = "%s_lib" % name,
+        testonly = True,
+        srcs = srcs,
+        tsconfig = "//modules/playground:tsconfig-e2e.json",
+        deps = [
+            "//modules/e2e_util",
+            "//packages/private/testing",
+            "@ngdeps//@types/jasminewd2",
+            "@ngdeps//@types/selenium-webdriver",
+            "@ngdeps//protractor",
+        ],
+    )
+
+    protractor_web_test_suite(
+        name = "protractor_tests",
+        data = ["//packages/bazel/src/protractor/utils"] + data,
+        on_prepare = "//modules/playground/e2e_test:start-server.js",
+        server = server,
+        deps = [
+            ":%s_lib" % name,
+            "@ngdeps//protractor",
+            "@ngdeps//selenium-webdriver",
+            "@ngdeps//yargs",
+            "@ngdeps//source-map",
+        ],
+    )
diff --git a/modules/playground/e2e_test/hello_world/BUILD.bazel b/modules/playground/e2e_test/hello_world/BUILD.bazel
new file mode 100644
index 0000000000..c1010cab13
--- /dev/null
+++ b/modules/playground/e2e_test/hello_world/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "hello_world",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/hello_world:devserver",
+)
diff --git a/modules/playground/e2e_test/hello_world/hello_world_spec.ts b/modules/playground/e2e_test/hello_world/hello_world_spec.ts
index 1d6bb3fab8..c6e8261378 100644
--- a/modules/playground/e2e_test/hello_world/hello_world_spec.ts
+++ b/modules/playground/e2e_test/hello_world/hello_world_spec.ts
@@ -14,7 +14,7 @@ describe('hello world', function() {
   afterEach(verifyNoBrowserErrors);
 
   describe('hello world app', function() {
-    const URL = 'all/playground/src/hello_world/index.html';
+    const URL = '/';
 
     it('should greet', function() {
       browser.get(URL);
diff --git a/modules/playground/e2e_test/http/BUILD.bazel b/modules/playground/e2e_test/http/BUILD.bazel
new file mode 100644
index 0000000000..3d64eb56f0
--- /dev/null
+++ b/modules/playground/e2e_test/http/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "http",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/http:devserver",
+)
diff --git a/modules/playground/e2e_test/http/http_spec.ts b/modules/playground/e2e_test/http/http_spec.ts
index 441400fb5d..58d4ecb0db 100644
--- a/modules/playground/e2e_test/http/http_spec.ts
+++ b/modules/playground/e2e_test/http/http_spec.ts
@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('http', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    const URL = 'all/playground/src/http/index.html';
+    const URL = '/';
 
     it('should fetch and display people', function() {
       browser.get(URL);
diff --git a/modules/playground/e2e_test/jsonp/BUILD.bazel b/modules/playground/e2e_test/jsonp/BUILD.bazel
new file mode 100644
index 0000000000..3372078e11
--- /dev/null
+++ b/modules/playground/e2e_test/jsonp/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "jsonp",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/jsonp:devserver",
+)
diff --git a/modules/playground/e2e_test/jsonp/jsonp_spec.ts b/modules/playground/e2e_test/jsonp/jsonp_spec.ts
index b4fcda164a..71c6734ea4 100644
--- a/modules/playground/e2e_test/jsonp/jsonp_spec.ts
+++ b/modules/playground/e2e_test/jsonp/jsonp_spec.ts
@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('jsonp', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    const URL = 'all/playground/src/jsonp/index.html';
+    const URL = '/';
 
     it('should fetch and display people', function() {
       browser.get(URL);
diff --git a/modules/playground/e2e_test/key_events/BUILD.bazel b/modules/playground/e2e_test/key_events/BUILD.bazel
new file mode 100644
index 0000000000..b5963a7b65
--- /dev/null
+++ b/modules/playground/e2e_test/key_events/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "key_events",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/key_events:devserver",
+)
diff --git a/modules/playground/e2e_test/key_events/key_events_spec.ts b/modules/playground/e2e_test/key_events/key_events_spec.ts
index 98f4044629..f98d087df4 100644
--- a/modules/playground/e2e_test/key_events/key_events_spec.ts
+++ b/modules/playground/e2e_test/key_events/key_events_spec.ts
@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element, protractor} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 const Key = protractor.Key;
 
 describe('key_events', function() {
 
-  const URL = 'all/playground/src/key_events/index.html';
+  const URL = '/';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });
diff --git a/modules/playground/e2e_test/model_driven_forms/BUILD.bazel b/modules/playground/e2e_test/model_driven_forms/BUILD.bazel
new file mode 100644
index 0000000000..848cd4bdf0
--- /dev/null
+++ b/modules/playground/e2e_test/model_driven_forms/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "model_driven_forms",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/model_driven_forms:devserver",
+)
diff --git a/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts b/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts
index a3b3aaaca6..8fd35bea15 100644
--- a/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts
+++ b/modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts
@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Model-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/model_driven_forms/index.html';
+  const URL = '/';
 
   it('should display errors', function() {
     browser.get(URL);
diff --git a/modules/playground/e2e_test/order_management/BUILD.bazel b/modules/playground/e2e_test/order_management/BUILD.bazel
new file mode 100644
index 0000000000..b0f523a2a3
--- /dev/null
+++ b/modules/playground/e2e_test/order_management/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "order_management",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/order_management:devserver",
+)
diff --git a/modules/playground/e2e_test/order_management/order_management_spec.ts b/modules/playground/e2e_test/order_management/order_management_spec.ts
index 7750eeda44..970f71ae9f 100644
--- a/modules/playground/e2e_test/order_management/order_management_spec.ts
+++ b/modules/playground/e2e_test/order_management/order_management_spec.ts
@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Order Management CRUD', function() {
-  const URL = 'all/playground/src/order_management/index.html';
+  const URL = '/';
 
   it('should work', function() {
     browser.get(URL);
diff --git a/modules/playground/e2e_test/person_management/BUILD.bazel b/modules/playground/e2e_test/person_management/BUILD.bazel
new file mode 100644
index 0000000000..3a441d2895
--- /dev/null
+++ b/modules/playground/e2e_test/person_management/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "person_management",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/person_management:devserver",
+)
diff --git a/modules/playground/e2e_test/person_management/person_management_spec.ts b/modules/playground/e2e_test/person_management/person_management_spec.ts
index b1d5dad6c6..3fddf0638e 100644
--- a/modules/playground/e2e_test/person_management/person_management_spec.ts
+++ b/modules/playground/e2e_test/person_management/person_management_spec.ts
@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Person Management CRUD', function() {
-  const URL = 'all/playground/src/person_management/index.html';
+  const URL = '/';
 
   it('should work', function() {
     browser.get(URL);
diff --git a/modules/playground/e2e_test/relative_assets/BUILD.bazel b/modules/playground/e2e_test/relative_assets/BUILD.bazel
new file mode 100644
index 0000000000..5159c74498
--- /dev/null
+++ b/modules/playground/e2e_test/relative_assets/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "relative_assets",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/relative_assets:devserver",
+)
diff --git a/modules/playground/e2e_test/relative_assets/assets_spec.ts b/modules/playground/e2e_test/relative_assets/assets_spec.ts
index 99dcb7f1ec..1b777c6d2d 100644
--- a/modules/playground/e2e_test/relative_assets/assets_spec.ts
+++ b/modules/playground/e2e_test/relative_assets/assets_spec.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 function waitForElement(selector: string) {
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
@@ -18,7 +19,7 @@ describe('relative assets relative-app', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/relative_assets/';
+  const URL = '/';
 
   it('should load in the templateUrl relative to the my-cmp component', () => {
     browser.get(URL);
diff --git a/modules/playground/e2e_test/routing/BUILD.bazel b/modules/playground/e2e_test/routing/BUILD.bazel
new file mode 100644
index 0000000000..049f348561
--- /dev/null
+++ b/modules/playground/e2e_test/routing/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "routing",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/routing:devserver",
+)
diff --git a/modules/playground/e2e_test/routing/routing_spec.ts b/modules/playground/e2e_test/routing/routing_spec.ts
index d86efa17af..9e28ba0d41 100644
--- a/modules/playground/e2e_test/routing/routing_spec.ts
+++ b/modules/playground/e2e_test/routing/routing_spec.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 function waitForElement(selector: string) {
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
@@ -19,7 +20,7 @@ describe('routing inbox-app', () => {
   afterEach(verifyNoBrowserErrors);
 
   describe('index view', () => {
-    const URL = 'all/playground/src/routing/';
+    const URL = '/';
 
     it('should list out the current collection of items', () => {
       browser.get(URL);
diff --git a/modules/playground/e2e_test/sourcemap/BUILD.bazel b/modules/playground/e2e_test/sourcemap/BUILD.bazel
new file mode 100644
index 0000000000..943adc8d2a
--- /dev/null
+++ b/modules/playground/e2e_test/sourcemap/BUILD.bazel
@@ -0,0 +1,11 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "sourcemap",
+    srcs = glob(["**/*.ts"]),
+    data = [
+        "//modules/playground/src/sourcemap",
+        "//modules/playground/src/sourcemap:index.ts",
+    ],
+    server = "//modules/playground/src/sourcemap:devserver",
+)
diff --git a/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts b/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts
index 2a2155dd8c..2110fd372b 100644
--- a/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts
+++ b/modules/playground/e2e_test/sourcemap/sourcemap_spec.ts
@@ -13,7 +13,7 @@ const fs = require('fs');
 const sourceMap = require('source-map');
 
 describe('sourcemaps', function() {
-  const URL = 'all/playground/src/sourcemap/index.html';
+  const URL = '/';
 
   it('should map sources', function() {
     browser.get(URL);
@@ -36,7 +36,7 @@ describe('sourcemaps', function() {
 
 
       const content =
-          fs.readFileSync('dist/all/playground/src/sourcemap/index.js').toString('utf8');
+          fs.readFileSync(require.resolve('../../src/sourcemap/index.js')).toString('utf8');
       const marker = '//# sourceMappingURL=data:application/json;base64,';
       const index = content.indexOf(marker);
       const sourceMapData =
@@ -46,7 +46,7 @@ describe('sourcemaps', function() {
 
       const originalPosition = decoder.originalPositionFor({line: errorLine, column: errorColumn});
 
-      const sourceCodeLines = fs.readFileSync('modules/playground/src/sourcemap/index.ts', {
+      const sourceCodeLines = fs.readFileSync(require.resolve('../../src/sourcemap/index.ts'), {
                                   encoding: 'UTF-8'
                                 }).split('\n');
       expect(sourceCodeLines[originalPosition.line - 1])
diff --git a/modules/playground/e2e_test/start-server.js b/modules/playground/e2e_test/start-server.js
new file mode 100644
index 0000000000..e7d432281a
--- /dev/null
+++ b/modules/playground/e2e_test/start-server.js
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = async function(config) {
+  const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
+  const serverUrl = `http://localhost:${port}`;
+
+  protractor.browser.baseUrl = serverUrl;
+};
diff --git a/modules/playground/e2e_test/svg/BUILD.bazel b/modules/playground/e2e_test/svg/BUILD.bazel
new file mode 100644
index 0000000000..3bba6c3b1e
--- /dev/null
+++ b/modules/playground/e2e_test/svg/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "svg",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/svg:devserver",
+)
diff --git a/modules/playground/e2e_test/svg/svg_spec.ts b/modules/playground/e2e_test/svg/svg_spec.ts
index 464f8d0afc..0c58cab353 100644
--- a/modules/playground/e2e_test/svg/svg_spec.ts
+++ b/modules/playground/e2e_test/svg/svg_spec.ts
@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('SVG', function() {
 
-  const URL = 'all/playground/src/svg/index.html';
+  const URL = '/';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });
diff --git a/modules/playground/e2e_test/template_driven_forms/BUILD.bazel b/modules/playground/e2e_test/template_driven_forms/BUILD.bazel
new file mode 100644
index 0000000000..31a512dbf6
--- /dev/null
+++ b/modules/playground/e2e_test/template_driven_forms/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "template_driven_forms",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/template_driven_forms:devserver",
+)
diff --git a/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts b/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts
index ae2eab5958..b822ad49cd 100644
--- a/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts
+++ b/modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts
@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Template-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/template_driven_forms/index.html';
+  const URL = '/';
 
   it('should display errors', function() {
     browser.get(URL);
diff --git a/modules/playground/e2e_test/upgrade/BUILD.bazel b/modules/playground/e2e_test/upgrade/BUILD.bazel
new file mode 100644
index 0000000000..e7dfac39ef
--- /dev/null
+++ b/modules/playground/e2e_test/upgrade/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "upgrade",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/upgrade:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/animations/BUILD.bazel b/modules/playground/e2e_test/web_workers/animations/BUILD.bazel
new file mode 100644
index 0000000000..2bd6e176d7
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/animations/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "animations",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/animations:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/animations/animations_spec.ts b/modules/playground/e2e_test/web_workers/animations/animations_spec.ts
index d3590ff9fe..9e148d5d63 100644
--- a/modules/playground/e2e_test/web_workers/animations/animations_spec.ts
+++ b/modules/playground/e2e_test/web_workers/animations/animations_spec.ts
@@ -6,10 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element, protractor} from 'protractor';
 
-// TODO(matsko): make this test work again with new view engine.
+import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
+
+
+// Disabled because with ViewEngine animations within webworkers is not supported.
+// See: https://github.com/angular/angular/issues/18610
 xdescribe('WebWorkers Animations', function() {
   afterEach(() => {
     verifyNoBrowserErrors();
diff --git a/modules/playground/e2e_test/web_workers/input/BUILD.bazel b/modules/playground/e2e_test/web_workers/input/BUILD.bazel
new file mode 100644
index 0000000000..ae90a5daa4
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/input/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "input",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/input:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/kitchen_sink/BUILD.bazel b/modules/playground/e2e_test/web_workers/kitchen_sink/BUILD.bazel
new file mode 100644
index 0000000000..a764d7b479
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/kitchen_sink/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "kitchen_sink",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/kitchen_sink:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/message_broker/BUILD.bazel b/modules/playground/e2e_test/web_workers/message_broker/BUILD.bazel
new file mode 100644
index 0000000000..74b19d9060
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/message_broker/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "message_broker",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/message_broker:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/router/BUILD.bazel b/modules/playground/e2e_test/web_workers/router/BUILD.bazel
new file mode 100644
index 0000000000..e6c55fae25
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/router/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "router",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/router:devserver",
+)
diff --git a/modules/playground/e2e_test/web_workers/todo/BUILD.bazel b/modules/playground/e2e_test/web_workers/todo/BUILD.bazel
new file mode 100644
index 0000000000..907933a699
--- /dev/null
+++ b/modules/playground/e2e_test/web_workers/todo/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "todo",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/todo:devserver",
+)
diff --git a/modules/playground/e2e_test/zippy_component/BUILD.bazel b/modules/playground/e2e_test/zippy_component/BUILD.bazel
new file mode 100644
index 0000000000..acded1138e
--- /dev/null
+++ b/modules/playground/e2e_test/zippy_component/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "zippy_component",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/zippy_component:devserver",
+)
diff --git a/modules/playground/e2e_test/zippy_component/zippy_spec.ts b/modules/playground/e2e_test/zippy_component/zippy_spec.ts
index fc339a12e3..e3d7f25043 100644
--- a/modules/playground/e2e_test/zippy_component/zippy_spec.ts
+++ b/modules/playground/e2e_test/zippy_component/zippy_spec.ts
@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Zippy Component', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('zippy', function() {
-    const URL = 'all/playground/src/zippy_component/index.html';
+    const URL = '/';
 
     beforeEach(function() { browser.get(URL); });
 
diff --git a/modules/playground/tsconfig-e2e.json b/modules/playground/tsconfig-e2e.json
new file mode 100644
index 0000000000..16123f3cc4
--- /dev/null
+++ b/modules/playground/tsconfig-e2e.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "types": ["node", "jasminewd2", "selenium-webdriver"]
+  }
+}
diff --git a/packages/private/testing/BUILD.bazel b/packages/private/testing/BUILD.bazel
index 3c5b80774d..90299288c5 100644
--- a/packages/private/testing/BUILD.bazel
+++ b/packages/private/testing/BUILD.bazel
@@ -1,4 +1,7 @@
-package(default_visibility = ["//packages:__subpackages__"])
+package(default_visibility = [
+    "//modules/playground:__subpackages__",
+    "//packages:__subpackages__",
+])
 
 exports_files(["package.json"])