Possibility to use devtools on chrome browser using CodeceptJS

Question

I have to write tests for web application and also I have to use them on mobile chrome browser.It is any possibility to use chrome devtools and mobile device emulator during test?

Thanks for help

Answer 1

For Puppeteer use chrome option in config with defaultViewport value.

https://codecept.io/helpers/Puppeteer/#configuration https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions

"Puppeteer": {
  "url": "https://rambler.ru",
  "browser": "chrome",
  ...
  "chrome": {
      "defaultViewport": {
          "width": 640,
          "height": 360,
          "deviceScaleFactor": 1,
          "isMobile": true,
          "hasTouch": true,
          "isLandscape": false
      }
  }
}

Or use page.emulate() before each test https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions

UPD: add page.emulate example

For page.emulate using: In custom helper, create own function, which will work with page for example:

async emulateDevice(options) {
  const currentPage = this.helpers['Puppeteer'].page;
  await currentPage.emulate(options);
}

Where option is object with viewport and userAgent: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions https://codecept.io/helpers/Puppeteer/#access-from-helpers

Then in test: Create options:

const myCustomViewPort = {
  viewport: {
    width: 640,
    height: 360,
    deviceScaleFactor: 1,
    isMobile: true,
    hasTouch: true,
    isLandscape: false
  },
  userAgent: ""
}

And you can call it in your code:

Before(async (I) => {
  await I.emulateDevice(myCustomViewPort);
});