Блог

Я пытаюсь запустить тест в режиме заголовка в Chrome с помощью Puppeteer и CodeceptJS, но страница отображается неправильно, на ней отсутствуют некоторые элементы (см. Ниже).

Шаги по воспроизведению:

• У меня есть приложение react, работающее на https://localhost:3000 с установленным Puppeteer и CodeceptJS.
• Откройте Chrome вручную, перейдите в https://localhost:3000

Страница отображается правильно

• В корневой папке проекта в терминале: npx codeceptjs run
• Кукловод автоматически открывает окно Chrome

Ожидаемое поведение: В окне Chrome, открытом кукольником, страница должна отображаться правильно.

Фактическое поведение: На странице отсутствуют такие элементы, как тег привязки с надписью «Вход», а также нижний колонтитул. Примечание: элементы присутствуют в инспекторе DOM (см. скриншот).

Информация о версии

Chrome: 94.0.4606.61

macOS: 11,6

Кукольник: 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;
  }
};