feat(Frame): Add addStyleTag API to frame - fixes #892 (#947)

This patch adds `Page.addStyleTag` and `Frame.addStyleTag` methods to the API. Fixes #892.
puppeteer · Oct 4, 2017 · 97e40e6 · 97e40e6
1 parent d87480b
commit 97e40e6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 0 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -34,6 +34,7 @@
     + [page.$$(selector)](#pageselector)
     + [page.$eval(selector, pageFunction[, ...args])](#pageevalselector-pagefunction-args)
     + [page.addScriptTag(url)](#pageaddscripttagurl)
+    + [page.addStyleTag(url)](#pageaddstyletagurl)
     + [page.authenticate(credentials)](#pageauthenticatecredentials)
     + [page.click(selector[, options])](#pageclickselector-options)
     + [page.close()](#pageclose)
@@ -108,6 +109,7 @@
     + [frame.$$(selector)](#frameselector)
     + [frame.$eval(selector, pageFunction[, ...args])](#frameevalselector-pagefunction-args)
     + [frame.addScriptTag(url)](#frameaddscripttagurl)
+    + [frame.addStyleTag(url)](#frameaddstyletagurl)
     + [frame.childFrames()](#framechildframes)
     + [frame.evaluate(pageFunction, ...args)](#frameevaluatepagefunction-args)
     + [frame.injectFile(filePath)](#frameinjectfilefilepath)
@@ -368,6 +370,14 @@ Adds a `<script>` tag into the page with the desired url. Alternatively, a local
 
 Shortcut for [page.mainFrame().addScriptTag(url)](#frameaddscripttagurl).
 
+#### page.addStyleTag(url)
+- `url` <[string]> Url of the `<link>` tag
+- returns: <[Promise]> which resolves when the stylesheet's onload fires.
+
+Adds a `<link rel="stylesheet">` tag into the page with the desired url.
+
+Shortcut for [page.mainFrame().addStyleTag(url)](#frameaddstyletagurl).
+
 #### page.authenticate(credentials)
 - `credentials` <[Object]>
   - `username` <[string]>
@@ -1175,6 +1185,12 @@ const html = await frame.$eval('.main-container', e => e.outerHTML);
 
 Adds a `<script>` tag to the frame with the desired url. Alternatively, JavaScript could be injected to the frame via [`frame.injectFile`](#frameinjectfilefilepath) method.
 
+#### frame.addStyleTag(url)
+- `url` <[string]> Url of a stylesheet to be added
+- returns: <[Promise]> Promise which resolves when the script gets added and loads.
+
+Adds a `<link rel="stylesheet">` tag to the frame with the desired url.
+
 #### frame.childFrames()
 - returns: <[Array]<[Frame]>>
 

diff --git a/lib/FrameManager.js b/lib/FrameManager.js
@@ -358,6 +358,25 @@ class Frame {
     }
   }
 
+  /**
+   * @param {string} url
+   */
+  async addStyleTag(url) {
+    return this.evaluate(addStyleTag, url);
+
+    /**
+     * @param {string} url
+     */
+    function addStyleTag(url) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      const promise = new Promise(x => link.onload = x);
+      document.head.appendChild(link);
+      return promise;
+    }
+  }
+
   /**
    * @param {(string|number|function())} selectorOrTimeout
    * @param {!Object=} options

diff --git a/lib/Page.js b/lib/Page.js
@@ -230,6 +230,13 @@ class Page extends EventEmitter {
     return this.mainFrame().addScriptTag(url);
   }
 
+  /**
+   * @param {string} url
+   */
+  async addStyleTag(url) {
+    return this.mainFrame().addStyleTag(url);
+  }
+
   /**
    * @param {string} filePath
    */

diff --git a/test/assets/injectedstyle.css b/test/assets/injectedstyle.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
diff --git a/test/test.js b/test/test.js
@@ -1769,6 +1769,14 @@ describe('Page', function() {
     }));
   });
 
+  describe('Page.addStyleTag', function() {
+    it('should work', SX(async function() {
+      await page.goto(EMPTY_PAGE);
+      await page.addStyleTag('/injectedstyle.css');
+      expect(await page.evaluate(`window.getComputedStyle(document.querySelector('body')).getPropertyValue('background-color')`)).toBe('rgb(255, 0, 0)');
+    }));
+  });
+
   describe('Page.url', function() {
     it('should work', SX(async function() {
       expect(page.url()).toBe('about:blank');