feat: add font loading (#18)

mxschmitt · web-flow · commit a708702bd7b0 · 2020-08-12T09:19:12.000-04:00
diff --git a/.github/workflows/tests.yml b/.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
diff --git a/README.md b/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
 
diff --git a/buildbots/assets/emoji.png b/buildbots/assets/emoji.png
diff --git a/buildbots/assets/test-default.js b/buildbots/assets/test-default.js
@@ -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 {
diff --git a/buildbots/assets/test-font.js b/buildbots/assets/test-font.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();
+    }
+  }
+};
diff --git a/buildbots/stub.sh b/buildbots/stub.sh
diff --git a/buildbots/test.sh b/buildbots/test.sh
@@ -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"
diff --git a/package.json b/package.json
@@ -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",
diff --git a/src/chromium.ts b/src/chromium.ts
@@ -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();
+        });
+      });
+    });
+  });
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1 @@
-import setEnvironmentVariables from './util/setEnvironmentVariables';
-
-setEnvironmentVariables();
-
 export * from './chromium';
diff --git a/src/util/getEnvironmentVariables.ts b/src/util/getEnvironmentVariables.ts
@@ -0,0 +1,44 @@
+import { promises as fsPromises, existsSync } from 'fs';
+import * as path from 'path';
+
+import isLambdaRuntimeEnvironment from './isLambdaRuntimeEnvironment';
+
+export const AWS_TMP_DIR = '/tmp/aws';
+export const AWS_FONT_DIR = '/tmp/fonts';
+const AWS_LIB_DIR = `${AWS_TMP_DIR}/lib`;
+
+export default async function getEnvironmentVariables(): Promise<
+  Record<string, string>
+> {
+  if (!isLambdaRuntimeEnvironment()) {
+    return {};
+  }
+  const env: Record<string, string> = {};
+  // If Chromium will be initialized without an FONTCONFIG_PATH or empty it crashes. To prevent
+  // that we only set the custom font directory if the custom directory was created (by loadFont function)
+  // alternatively set it to a non-existing directory.
+  if (!process.env.FONTCONFIG_PATH && existsSync(AWS_FONT_DIR)) {
+    env.FONTCONFIG_PATH = AWS_FONT_DIR;
+    await fsPromises.writeFile(
+      path.join(AWS_FONT_DIR, 'fonts.conf'),
+      `<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+  <dir>${AWS_FONT_DIR}</dir>
+  <cachedir>/tmp/fonts-cache/</cachedir>
+  <config></config>
+</fontconfig>`
+    );
+  } else {
+    env.FONTCONFIG_PATH = AWS_TMP_DIR;
+  }
+
+  if (!process.env.LD_LIBRARY_PATH) {
+    env.LD_LIBRARY_PATH = AWS_LIB_DIR;
+  } else if (!process.env.LD_LIBRARY_PATH.startsWith(AWS_LIB_DIR)) {
+    env.LD_LIBRARY_PATH = [
+      ...new Set([AWS_LIB_DIR, ...process.env.LD_LIBRARY_PATH.split(':')]),
+    ].join(':');
+  }
+  return env;
+}
diff --git a/src/util/isLambdaRuntimeEnvironment.ts b/src/util/isLambdaRuntimeEnvironment.ts
@@ -1,7 +1,5 @@
-export default function isLambdaRuntimeEnvironment() {
-  return (
-    ['AWS_Lambda_nodejs10.x', 'AWS_Lambda_nodejs12.x'].includes(
-      process.env.AWS_EXECUTION_ENV as string
-    ) === true
+export default function isLambdaRuntimeEnvironment(): boolean {
+  return ['AWS_Lambda_nodejs10.x', 'AWS_Lambda_nodejs12.x'].includes(
+    process.env.AWS_EXECUTION_ENV as string
   );
 }
diff --git a/src/util/setEnvironmentVariables.ts b/src/util/setEnvironmentVariables.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,7 @@
     "allowJs": false,
     "moduleResolution": "node",
     "module": "commonjs",
-    "target": "ESNext",
+    "target": "ES2019",
     "pretty": true,
     "inlineSourceMap": false,
     "inlineSources": false,
diff --git a/yarn.lock b/yarn.lock
@@ -3429,6 +3429,13 @@ pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
+pixelmatch@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
+  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
+  dependencies:
+    pngjs "^4.0.1"
+
 pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -3459,6 +3466,11 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
 pngjs@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
