feat(FrameManager): add type=module to addScriptTag (#2090)

This patch adds a new "type" option to the `addScriptTag` method that
allows adding "module" tags to the page.

Fixes #2078

docs/api.md

@@ -668,6 +668,7 @@ Shortcut for [page.mainFrame().$x(expression)](#frameexpression)
   - `url` <[string]> URL of a script to be added.
   - `path` <[string]> Path to the JavaScript file to be injected into frame. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd).
   - `content` <[string]> Raw JavaScript content to be injected into frame.
+  - `type` <[string]> Script type. Use 'module' in order to load a Javascript ES6 module. See [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for more details.
 - returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script's onload fires or when the script content was injected into frame.
 
 Adds a `<script>` tag into the page with the desired url or content.
@@ -1718,6 +1719,7 @@ The method evaluates the XPath expression.
   - `url` <[string]> URL of a script to be added.
   - `path` <[string]> Path to the JavaScript file to be injected into frame. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd).
   - `content` <[string]> Raw JavaScript content to be injected into frame.
+  - `type` <[string]> Script type. Use 'module' in order to load a Javascript ES6 module. See [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for more details.
 - returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script's onload fires or when the script content was injected into frame.
 
 Adds a `<script>` tag into the page with the desired url or content.

lib/FrameManager.js

@@ -440,7 +440,7 @@ class Frame {
       const url = options.url;
       try {
         const context = await this._contextPromise;
-        return (await context.evaluateHandle(addScriptUrl, url)).asElement();
+        return (await context.evaluateHandle(addScriptUrl, url, options.type)).asElement();
       } catch (error) {
         throw new Error(`Loading script from ${url} failed`);
       }
@@ -450,23 +450,26 @@ class Frame {
       let contents = await readFileAsync(options.path, 'utf8');
       contents += '//# sourceURL=' + options.path.replace(/\n/g, '');
       const context = await this._contextPromise;
-      return (await context.evaluateHandle(addScriptContent, contents)).asElement();
+      return (await context.evaluateHandle(addScriptContent, contents, options.type)).asElement();
     }
 
     if (typeof options.content === 'string') {
       const context = await this._contextPromise;
-      return (await context.evaluateHandle(addScriptContent, options.content)).asElement();
+      return (await context.evaluateHandle(addScriptContent, options.content, options.type)).asElement();
     }
 
     throw new Error('Provide an object with a `url`, `path` or `content` property');
 
     /**
      * @param {string} url
+     * @param {string} type
      * @return {!Promise<!HTMLElement>}
      */
-    async function addScriptUrl(url) {
+    async function addScriptUrl(url, type) {
       const script = document.createElement('script');
       script.src = url;
+      if (type)
+        script.type = type;
       document.head.appendChild(script);
       await new Promise((res, rej) => {
         script.onload = res;
@@ -477,11 +480,12 @@ class Frame {
 
     /**
      * @param {string} content
+     * @param {string} type
      * @return {!HTMLElement}
      */
-    function addScriptContent(content) {
+    function addScriptContent(content, type = 'text/javascript') {
       const script = document.createElement('script');
-      script.type = 'text/javascript';
+      script.type = type;
       script.text = content;
       document.head.appendChild(script);
       return script;

test/assets/es6/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "parserOptions": {
+        "sourceType": "module"
+    }
+}

test/assets/es6/es6import.js

@@ -0,0 +1,2 @@
+import num from './es6module.js';
+window.__es6injected = num;

test/assets/es6/es6module.js

@@ -0,0 +1 @@
+export default 42;

test/assets/es6/es6pathimport.js

@@ -0,0 +1,2 @@
+import num from './es6/es6module.js';
+window.__es6injected = num;

test/test.js

@@ -2984,6 +2984,26 @@ describe('Page', function() {
       expect(await page.evaluate(() => __injected)).toBe(42);
     });
 
+    it('should work with a url and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ url: '/es6/es6import.js', type: 'module' });
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
+    it('should work with a path and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ path: path.join(__dirname, 'assets/es6/es6pathimport.js'), type: 'module' });
+      await page.waitForFunction('window.__es6injected');
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
+    it('should work with a content and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ content: `import num from '/es6/es6module.js';window.__es6injected = num;`, type: 'module' });
+      await page.waitForFunction('window.__es6injected');
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
     it('should throw an error if loading from url fail', async({page, server}) => {
       await page.goto(server.EMPTY_PAGE);
       let error = null;