feat: add font loading (#18)

Author: mxschmitt

.github/workflows/tests.yml

@@ -20,4 +20,4 @@ jobs:
     - name: Build project
       run: yarn run build
     - name: Test lambda function
-      run: bash buildbots/stub.sh
+      run: bash buildbots/test.sh

README.md

@@ -1,8 +1,8 @@
 # playwright-aws-lambda
 
-Support for PlayWright running on AWS Lambda and Google Cloud Functions.
+Support for Playwright running on AWS Lambda and Google Cloud Functions.
 
-NOTE: Currently only Chromium is supported.
+**NOTE**: Currently only Chromium is supported.
 
 ## Install
 
@@ -12,8 +12,8 @@ npm install playwright-core playwright-aws-lambda --save
 
 ## Usage
 
-This package works with the `nodejs8.10`, `nodejs10.x` and `nodejs12.x` AWS
-Lambda runtimes out of the box.
+This package works with the `nodejs10.x` and `nodejs12.x` AWS Lambda runtimes
+out of the box.
 
 ```javascript
 const playwright = require('playwright-aws-lambda');
@@ -41,9 +41,22 @@ exports.handler = async (event, context) => {
 
 ## API
 
-| Method / Property | Returns                                  | Description                    |
-| ----------------- | ---------------------------------------- | ------------------------------ |
-| `launchChromium`  | `{!Promise<playwright.ChromiumBrowser>}` | Launches the Chromium browser. |
+| Method / Property | Returns                                  | Description                           |
+| ----------------- | ---------------------------------------- | ------------------------------------- |
+| `launchChromium`  | `{!Promise<playwright.ChromiumBrowser>}` | Launches the Chromium browser.        |
+| `loadFont(url)`   | `{Promise<void>}`                        | Downloads and activates a custom font |
+
+### Loading additional fonts
+
+If you need custom font support by e.g. emojicons in your browser, you have to
+load it by using the `loadFont(url: string)` function before you launch the
+browser.
+
+```js
+await loadFont(
+  'https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf'
+);
+```
 
 ## Thanks / Credits
 

buildbots/assets/emoji.png

@@ -1,4 +1,5 @@
-const playwright = require('../dist/src/');
+const playwright = require('../../dist/src/');
+const assert = require('assert');
 
 exports.handler = async (event, context) => {
   let browser = null;
@@ -9,11 +10,16 @@ exports.handler = async (event, context) => {
 
     const page = await context.newPage();
     await page.goto(event.url || 'https://example.com');
+
     const data = await page.screenshot();
-    if (data.length === 0) {
-      throw new Error(`Screenshot is empty`);
-    }
-    console.log('Page title: ', await page.title());
+    assert(data.length > 0, 'Page screenshot is empty');
+
+    assert((await page.title()) === 'Google', 'Title does not match');
+
+    // Test so it does not crash
+    await page.setContent('<span id="icon">🎭</span>');
+
+    console.log('inside-lambda: Passed tests');
   } catch (error) {
     throw error;
   } finally {

examples/stub.js renamed to buildbots/assets/test-default.js

@@ -0,0 +1,44 @@
+const playwright = require('../../dist/src/');
+const assert = require('assert');
+const fs = require('fs');
+const PNG = require('pngjs').PNG;
+const pixelmatch = require('pixelmatch');
+
+exports.handler = async (event, context) => {
+  let browser = null;
+
+  try {
+    await playwright.loadFont(
+      'https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf'
+    );
+    const browser = await playwright.launchChromium();
+    const context = await browser.newContext();
+
+    const page = await context.newPage();
+    await page.goto(event.url || 'https://example.com');
+
+    const data = await page.screenshot();
+    assert(data.length > 0, 'Page screenshot is empty');
+
+    assert((await page.title()) === 'Google', 'Title does not match');
+
+    await page.setContent('<span id="icon">🎭</span>');
+    const emojiImage = await (await page.$('#icon')).screenshot();
+    const img1 = PNG.sync.read(fs.readFileSync('buildbots/assets/emoji.png'));
+    const img2 = PNG.sync.read(emojiImage);
+    const { width, height } = img1;
+
+    const imageMatches = pixelmatch(img1.data, img2.data, null, width, height, {
+      threshold: 0.1,
+    });
+    assert(!imageMatches, 'font loading with emojis does not work');
+
+    console.log('inside-lambda: Passed tests');
+  } catch (error) {
+    throw error;
+  } finally {
+    if (browser !== null) {
+      await browser.close();
+    }
+  }
+};

buildbots/assets/test-font.js

@@ -0,0 +1,21 @@
+#/bin/bash
+
+set -ex
+
+LOG_FILE="log.txt"
+
+function run_test {
+    test_file="$1"
+    echo "Testing $newfile against $oldfile"
+
+    echo "Running test: $test_file"
+    docker run --rm -v "$PWD":/var/task:delegated lambci/lambda:nodejs12.x "buildbots/assets/$test_file.handler" '{"url": "https://google.com"}' 2>&1 | tee "$LOG_FILE"
+    grep -Fq "inside-lambda: Passed tests" "$LOG_FILE"
+
+    echo "Sucessfully passed test: $test_file"
+}
+
+run_test "test-font"
+run_test "test-default"
+
+rm "$LOG_FILE"

buildbots/stub.sh

@@ -35,7 +35,9 @@
     "jest": "^26.3.0",
     "lint-staged": "10.2.11",
     "nodemon": "^2.0.4",
+    "pixelmatch": "^5.2.1",
     "playwright-core": "^1.3.0",
+    "pngjs": "^5.0.0",
     "prettier": "^2.0.5",
     "ts-jest": "^26.2.0",
     "tslint": "^6.1.3",

buildbots/test.sh

@@ -1,16 +1,21 @@
 import { promises as fsPromises } from 'fs';
-import { join } from 'path';
+import * as fs from 'fs';
+import * as path from 'path';
+import { promisify } from 'util';
+import * as https from 'https';
+
 import * as playwright from 'playwright-core';
+import { LaunchOptions } from 'playwright-core';
+
 import isLambdaRuntimeEnvironment from './util/isLambdaRuntimeEnvironment';
 import isHeadlessModeEnabled from './util/isHeadlessModeEnabled';
 import fileExists from './util/fileExists';
-import setEnvironmentVariables from './util/setEnvironmentVariables';
-import { LaunchOptions } from 'playwright-core';
+import getEnvironmentVariables, {
+  AWS_FONT_DIR,
+} from './util/getEnvironmentVariables';
 
 const { inflate } = require('lambdafs');
 
-setEnvironmentVariables();
-
 /**
  * Returns a list of recommended additional Chromium flags.
  */
@@ -80,7 +85,7 @@ async function getChromiumExecutablePath(
     return '/tmp/chromium';
   }
 
-  const input = join(__dirname, 'bin');
+  const input = path.join(__dirname, 'bin');
   const promises = [
     inflate(`${input}/chromium.br`),
     inflate(`${input}/swiftshader.tar.br`),
@@ -99,12 +104,45 @@ export async function launchChromium(launchOptions?: Partial<LaunchOptions>) {
   const args = getChromiumArgs(headless);
   const executablePath = await getChromiumExecutablePath(headless);
 
+  const env: LaunchOptions['env'] = {
+    ...(await getEnvironmentVariables()),
+    ...(launchOptions?.env || {}),
+  };
   const browser = await playwright.chromium.launch({
     args,
     executablePath,
     headless,
+    env,
     ...launchOptions,
   });
 
   return browser;
 }
+
+export const loadFont = async (input: string) =>
+  new Promise(async (resolve, reject) => {
+    const url = new URL(input);
+    const output = path.join(AWS_FONT_DIR, url.pathname.split('/').pop()!);
+    if (await promisify(fs.exists)(output)) {
+      resolve();
+      return;
+    }
+    if (!fs.existsSync(AWS_FONT_DIR)) {
+      await fsPromises.mkdir(AWS_FONT_DIR);
+    }
+    const stream = fs.createWriteStream(output);
+    stream.once('error', (error) => {
+      return reject(error);
+    });
+    https.get(input, (response) => {
+      response.on('data', (chunk) => {
+        stream.write(chunk);
+      });
+
+      response.once('end', () => {
+        stream.end(() => {
+          return resolve();
+        });
+      });
+    });
+  });

package.json

@@ -1,5 +1 @@
-import setEnvironmentVariables from './util/setEnvironmentVariables';
-
-setEnvironmentVariables();
-
 export * from './chromium';