Mobile testing / set UserAgent

[ICame4You]

I'm struggling with emulating any mobile with chromy. We have a website, that shows a desktop or mobile version depending on a UserAgent, but I didn't find a clear explanation how and where this functionality can be added inside Backstop. Could you provide maybe some examples or a clear way where to add it, or maybe somehow using puppeteer?

[garris]

Use an onBeforeScript. Check the docs for usage and do something like this...

module.exports = async (page, scenario, vp) => {
  await require('./loadCookies')(page, scenario);

  // Example: set user agent
  await page.setUserAgent('some user agent string here');

};

[seleckis]

The code you mentioned is for puppeteer. For chromy I do it like this:

chromy/onBefore.js:

module.exports = function (chromy, scenario, vp, isReference, chromyStatic) {
  const {label, ...restVP} = vp;
  chromyStatic.addCustomDevice({
    "name": label,
    ...restVP
  });
  chromy.emulate(label);
}

in backstop.json:

"viewports": [
    {
      "label": "iPhone_v",
      "width": 375,
      "height": 667,
      "deviceScaleFactor": 2.0,
      "pageScaleFactor": 1.0,
      "mobile": true,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
    },
    {
      "label": "iPhone_h",
      "width": 667,
      "height": 375,
      "deviceScaleFactor": 2.0,
      "pageScaleFactor": 1.0,
      "mobile": true,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
    },
    {
      "label": "iPad_v",
      "width": 768,
      "height": 1024,
      "deviceScaleFactor": 1.0,
      "pageScaleFactor": 1.0,
      "mobile": true,
      "userAgent": "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"
    },
    {
      "label": "iPad_h",
      "width": 1024,
      "height": 768,
      "deviceScaleFactor": 1.0,
      "pageScaleFactor": 1.0,
      "mobile": true,
      "userAgent": "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"
    },
    {
      "label": "desktop",
      "width": 1440,
      "height": 900,
      "deviceScaleFactor": 1.0,
      "pageScaleFactor": 1.0,
      "mobile": false,
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36"
    }
],

[ICame4You]

Here's my backstop.json file

{
  "id": "testingMobile",
  "viewports": [
    {
      "label": "iPhone_v",
      "width": 375,
      "height": 667,
      "deviceScaleFactor": 2.0,
      "pageScaleFactor": 1.0,
      "mobile": true,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
    },
    {
      "label": "PC full HD",
      "width": 1920,
      "height": 1080
    }
  ],
  "onBeforeScript": "puppet/testingMobile.js",
  "onReadyScript": "puppet/testingMobile.js",
  "scenarios": [
    {
      "label": "Google",
      "url": "https://www.google.com/?hl=en"
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": ["--no-sandbox"]
  },
  "asyncCaptureLimit": 2,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

And here's testingMobile.js

// onBefore (puppeteer engine)
module.exports = async (page, scenario, vp) => {
    await require('./loadCookies')(page, scenario);

    await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1');
};

// onReady (puppeteer engine)
module.exports = async (page, scenario, vp) => {
    console.log('SCENARIO > ' + scenario.label);
    await require('./clickAndHoverHelper')(page, scenario);
};

I'm still getting only desktop version of the vebsite

[seleckis]

No, this is not enough. Take a look at my code. I'm passing all params from viewports to chromyStatic.addCustomDevice() function.