e2eテストで画面キャプチャを取得した際に、テキストボックス等がキャプチャに表示されていない

内容

Protractorを用いたe2eテストを実行しており、画面キャプチャを取得した際に、テキストボックスやボタン等のinputタグを使用している要素が、キャプチャに映らないという事象が発生しております。
テキストボックスに値を入力することはできており、単にキャプチャの問題のように見えます。
原因や解決方法にお心があれば、ご教示いただきたいです。

実行環境

Linuxサーバ上でヘッドレスモードで起動したFireFoxでe2eテストを実行。
Angularバージョンは10になります。

キャプチャ取得コード

browser.takeScreenshot().then(data => {
      const fs: any = require("fs");
      const stream: WriteStream = fs.createWriteStream("./screenshot-e2e/test.png");
      stream.write(new Buffer(data, "base64"));
      stream.end();
 });

protractor.conf.js

exports.config = {
  allScriptsTimeout: 11000,
  specs: ["./src/**/*.e2e-spec.ts"],
  capabilities: {
    browserName: "firefox",
    firefoxOptions: {
      args: ["--headless"]
    },
    "moz:firefoxOptions": {
      args: ["--headless"]
    }
  },
  directConnect: true,
  baseUrl: "http://localhost:4200/spa/biz-pc-ja/",
  framework: "jasmine",
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require("ts-node").register({
      project: require("path").join(__dirname, "./tsconfig.e2e.json")
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};