feat: Adds Playwright testing.

.gitignore

@@ -1,5 +1,6 @@
 # Ignore all node_modules including in subdirectories for samples/
 **/node_modules/
+**/test-results/
 samples/.env
 
 # (temporary) Ignore dist files generated by build

e2e/example.spec.ts

@@ -1,6 +1,22 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
 import { test, expect } from '@playwright/test';
 /**
-// NOTE: Trying to graft the old js-samples tests in here to see what happens.
+// NOTE: KEEP THIS CODE. It contains things you need to add.
 import { waitForGoogleMapsToLoad, failOnPageError } from "./utils";
 import fs from "fs";
 

e2e/samples.spec.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+import childProcess from 'child_process';
+
+const samplesDir = path.join(__dirname, '..', 'samples');
+
+const sampleFolders = fs.readdirSync(samplesDir).filter((file) => {
+  return fs.statSync(path.join(samplesDir, file)).isDirectory();
+});
+
+// Iterate through samples and run the same test for each one.
+sampleFolders.forEach((sampleFolder) => {
+  test(`test ${sampleFolder}`, async ({ page }) => {
+
+    // START Build the sample
+    const buildProcess = childProcess.spawn('npm', ['run', 'build'], {
+      cwd: path.join(samplesDir, sampleFolder),
+      stdio: 'inherit',
+    });
+
+    await new Promise((resolve, reject) => {
+        buildProcess.on('close', (code) => {
+          if (code === 0) {
+            resolve(true);
+          } else {
+            reject(`Build process exited with code ${code}`);
+          }
+        });
+      });
+    // END Build the sample
+
+    // START run the preview
+    // Get an available port
+    const port = 8080;
+
+    const url = `http://localhost:${port}/`;
+
+    const viteProcess = childProcess.spawn('vite', ['preview', `--port=${port}`], {
+      cwd: path.join(samplesDir, sampleFolder),
+      stdio: 'inherit', 
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 500)); // Set a timeout to let the web server start.
+    // END run the preview
+
+    /**
+     * Run all of the tests. Each method call either runs a test or inserts a timeout for loading.
+     * `expect`s are assertions that test for conditions.
+     * Run `npx playwright test --ui` to launch Playwright in UI mode to iteratively debug this file.
+     */
+    try {
+      // Check for console errors. Define a promise, then call after page load.
+      const consoleErrors: string[] = [];
+      const errorPromise = new Promise<void>((resolve) => {
+        page.on('console', (msg => {
+          if (msg.type() === 'error') {
+            consoleErrors.push(msg.text());
+            resolve();
+          }
+        }));
+
+        page.on('pageerror', (exception) => {
+          consoleErrors.push(exception.message);
+          resolve();
+        });
+
+        // Set a timeout to resolve the promise even if no error occurs.
+        setTimeout(() => {
+          resolve();
+        }, 500);
+      });
+
+      // Navigate to the page.
+      await page.goto(url);
+
+      // There must be no console errors.
+      await errorPromise;
+      expect(consoleErrors).toHaveLength(0);
+
+      // Wait for the page DOM to load; this does NOT include the Google Maps APIs.
+      await page.waitForLoadState('domcontentloaded');
+
+      // Wait for Google Maps to load.
+      await page.waitForFunction(() => window.google && window.google.maps);
+
+      // Insert a delay in ms to let the map load.
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // Yo dawg, I heard you like tests, so I made you a test for testing your tests.
+      //await expect(page).toHaveTitle('Simple Map'); // Passes on the simple map page, fails on the other as expected.
+
+      // Assertions. These must be met or the test will fail.
+      // The sample must load the Google Maps API.
+      const hasGoogleMaps = await page.evaluate(() => {
+        return typeof window.google !== 'undefined' && typeof window.google.maps !== 'undefined';
+      });
+
+      await expect(hasGoogleMaps).toBeTruthy();
+
+      const mapElement = await page.locator('#map');
+      if (await page.locator('#map').isVisible()) {
+        console.log(`✅ Assertion passed: Map is visible.`);
+      } else {
+        console.error(`❌ Assertion failed: Map is not visible.`);
+        throw new Error('Assertion failed: Map is not visible.');
+      }
+    } finally {
+      viteProcess.kill();
+    }
+  });
+});

e2e/utils.ts

@@ -1,3 +1,21 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
+// IMPORTANT: Keep this file, it contains things you may need. This file is not
+
 import { Page } from "@playwright/test";
 
 // from https://github.com/lit/lit.dev/blob/5d79d1e0989e68f8b5905e5271229ffe4c55265c/packages/lit-dev-tests/src/playwright/util.ts

playwright.config.ts

@@ -1,5 +1,21 @@
 import { defineConfig, devices } from '@playwright/test';
 
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -20,34 +36,40 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  //workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
+
+  /* Timeout (tests should complete within 60 seconds) */
+  //timeout: 60000,
+
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:8080',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
 
+  testMatch: 'e2e/samples.spec.ts', // NEW
+
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], },
     },
-
+    /**
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
-    },
+    },*/
 
     /* Test against mobile viewports. */
     // {
@@ -76,4 +98,4 @@ export default defineConfig({
   //   url: 'http://127.0.0.1:3000',
   //   reuseExistingServer: !process.env.CI,
   // },
-});
+});

samples/add-map/index.html

@@ -17,7 +17,7 @@
  <!--[START maps_add_map]-->
 <html>
   <head>
-    <title>Simple Map</title>
+    <title>Add a Map</title>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>

samples/add-map/index.js

@@ -34,7 +34,7 @@ async function initMap() {
     // [START maps_add_map_instantiate_marker]
     // The marker, positioned at Uluru
     const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' });
-    // [END maps_add_map_instantiate_marker]
+    // [END maps_add_map_instantiate_marker]  
 }
 initMap();
 // [END maps_add_map]

samples/add-map/index.ts

@@ -39,7 +39,7 @@ async function initMap(): Promise<void> {
   // [START maps_add_map_instantiate_marker]
   // The marker, positioned at Uluru
   const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
-  // [END maps_add_map_instantiate_marker]
+  // [END maps_add_map_instantiate_marker]  
 }
 initMap();
 // [END maps_add_map]

samples/app.sh

@@ -27,6 +27,7 @@ cp "${OUTPUT_DIR}/${NAME}/package.json" "${DIST_DIR}/package.json"
 cp "${OUTPUT_DIR}/${NAME}/tsconfig.json" "${DIST_DIR}/tsconfig.json"
 cp "${OUTPUT_DIR}/${NAME}/README.md" "${DIST_DIR}/README.md"
 cp "${OUTPUT_DIR}/.env" "${DIST_DIR}/.env"
+cp -r "${OUTPUT_DIR}/${NAME}/dist" "${DIST_DIR}/dist"
 
 # Generate .eslintsrc.json
 touch "${DIST_DIR}/.eslintsrc.json"