Why is page not displayed properly in Chrome with Puppeteer and CodeceptJS?

Question

I'm trying to run a test in headed mode in Chrome with Puppeteer and CodeceptJS but the page is not being displayed properly, it is missing some elements (see below).

Steps to reproduce:

• I have a react app running at https://localhost:3000 with Puppeteer and CodeceptJS installed.
• Open Chrome manually, go to https://localhost:3000

Page displays correctly

• In project root folder in terminal: npx codeceptjs run
• Puppeteer opens Chrome window automatically

Expected behavior: In Chrome window opened by Puppeteer, page should be displayed correctly.

Actual behavior: Page is missing elements such as an anchor tag with "Login", as well as footer. Note: the elements are present in DOM inspector (see screenshot).

Version info

Chrome: 94.0.4606.61

MacOS: 11.6

Puppeteer: 10.4.0

CodeceptJS: 3.1.3

./e2e/App_test.js:

const { I, app } = inject();

Feature('Basic Page Layout and Navigation');

Scenario(
  'Check for Header,Footer and IBM login Icon if user is not logged in',
  ({ I }) => {
    I.amOnPage('/');
    I.see('Login');
    pause();
  }
);

./codecept.conf.js:

const { setHeadlessWhen } = require('@codeceptjs/configure');

// turn on headless mode when running with HEADLESS=true environment variable
// HEADLESS=true npx codecept run
setHeadlessWhen(process.env.HEADLESS);

exports.config = {
  tests: './e2e/*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      url: 'https://localhost:3000',
      show: true,
      waitForAction: 500,
      waitForNavigation: ['domcontentloaded', 'networkidle0', 'networkidle2'],
      chrome: {
        ignoreHTTPSErrors: true,
        defaultViewport: {
          width: 1920,
          height: 1080
        },
        channel: 'chrome'
      }
    },
    FileSystem: {},
    MockRequest: {
      require: '@codeceptjs/mock-request'
    }
  },
  include: {
    I: './steps_file.js',
    app: './e2e/page-objects/App.js'
  },
  bootstrap: null,
  mocha: {},
  name: 'admin-ui',
  plugins: {
    retryFailedStep: {
      enabled: true
    },
    screenshotOnFail: {
      enabled: true
    }
  }
};

./e2e/page-objects/App.js

module.exports = {
  navList: { css: 'nav > ul' },
  appName: { css: '.bx--header__name' },
  headerPartner: {
    css: '.bx--header__menu-bar > li:nth-child(1) > a:nth-child(1)'
  },
  headerPromotion: {
    css: '.bx--header__menu-bar > li:nth-child(2) > a:nth-child(1)'
  },
  portalFooter: { css: '.operations-portal-footer' },
  copyRightText: { css: '.operations-portal-footer div.footer-link-text' },
  logo: { css: '.operations-portal-footer img' },
  getString(language, string) {
    let locales = require(`../../src/locales/${language}/translation.json`);
    const stringPath = string.split('.');

    if (stringPath.length > 0) {
      stringPath.forEach(path => {
        locales = locales[path];
      });
    } else {
      locales = '';
    }
    return locales;
  }
};