Add Puppeteer testing tutorial (#1016)

* Add Puppeteer testing tutorial * Use Jest as test runner * Add comment on changing headless mode
GoogleChrome · Oct 12, 2023 · b25a56b · b25a56b
1 parent 477973e
commit b25a56b
Show file tree

Hide file tree

Showing 10 changed files with 9,817 additions and 2 deletions.
diff --git a/api-samples/history/showHistory/manifest.json b/api-samples/history/showHistory/manifest.json
@@ -1,10 +1,11 @@
 {
   "name": "Typed URL History",
   "version": "1.3",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0FAp+xWiJpGBmsKPhGcqF4/gQN9F5tmXgEVYEHUHc8HcBIUcT+9w+jo4q2OtXa2ThqgEXsx2zcNZIWJ/5yXcofVry5E2/HKBuLWHNtYOlI1rhwc/CLujo0RHhzF7rIiYcMPQdBhzr6L0u5u9N29VUWjLozltquKRcUbjXNe4LT7+q/akhn5tvfvWHkQ9qC6mRjvGwGTFlh1A6+vWKKSVYx/J+IBHW+I2X5NlAxwG734OMYVWRWK487jf1wsWZ2jHRTqg9TB3htT+84r7+E3kFYMycow9+2EhvoI2k5VGhZw1tAJcpie1Poozc5u8CTrZ4sZ5LK4h59OCOxmejC048QIDAQAB",
   "description": "Uses the chrome.history API to display in a popup the user's most visited pages.",
   "permissions": ["history"],
   "action": {
-    "default_popup": "typed-urls.html",
+    "default_popup": "popup.html",
     "default_icon": "clock.png"
   },
   "manifest_version": 3

diff --git a/...mples/history/showHistory/typed-urls.html → api-samples/history/showHistory/popup.html b/...mples/history/showHistory/typed-urls.html → api-samples/history/showHistory/popup.html
@@ -11,7 +11,7 @@
 
   <body>
     <h2>Recently Typed URLs:</h2>
-    <script src="typed-urls.js"></script>
+    <script src="popup.js"></script>
     <div id="typedUrl_div"></div>
   </body>
 </html>
diff --git a/...samples/history/showHistory/typed-urls.js → api-samples/history/showHistory/popup.js b/...samples/history/showHistory/typed-urls.js → api-samples/history/showHistory/popup.js
diff --git a/functional-samples/tutorial.puppeteer/.eslintrc b/functional-samples/tutorial.puppeteer/.eslintrc
@@ -0,0 +1,7 @@
+{
+  "extends": ["../../.eslintrc"],
+  "plugins": ["jest"],
+  "env": {
+    "jest/globals": true
+  }
+}
diff --git a/functional-samples/tutorial.puppeteer/README.md b/functional-samples/tutorial.puppeteer/README.md
@@ -0,0 +1,11 @@
+# Tutorial: Testing Chrome Extensions with Puppeteer
+
+## Overview
+
+This is the sample code for the [Testing Chrome Extensions with Puppeteer](https://developer.chrome.com/docs/extensions/mv3/tut_puppeteer-testing/) tutorial.
+
+## Running the tests
+
+1. Install [Node.JS](https://nodejs.org/).
+2. Run `npm install`.
+3. Run `npm start`.
diff --git a/functional-samples/tutorial.puppeteer/index.test.js b/functional-samples/tutorial.puppeteer/index.test.js
@@ -0,0 +1,47 @@
+// Copyright 2023 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.
+
+// eslint-disable-next-line no-undef
+const puppeteer = require('puppeteer');
+
+const EXTENSION_PATH = '../../api-samples/history/showHistory';
+const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';
+
+let browser;
+
+beforeEach(async () => {
+  browser = await puppeteer.launch({
+    // Set to 'new' to hide Chrome if running as part of an automated build.
+    headless: false,
+    args: [
+      `--disable-extensions-except=${EXTENSION_PATH}`,
+      `--load-extension=${EXTENSION_PATH}`
+    ]
+  });
+});
+
+afterEach(async () => {
+  await browser.close();
+  browser = undefined;
+});
+
+test('one history item is visible', async () => {
+  const page = await browser.newPage();
+  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
+
+  const list = await page.$('ul');
+  const children = await list.$$('li');
+
+  expect(children.length).toBe(1);
+});