fix: capture screenshots during device emulation

[vigneshshanmugam]

• fix screenshots decoding issue when userAgent is modified #339
• When device is emulated via playwright options -

  synthetics/examples/todos/synthetics.config.ts

  Lines 8 to 21 in 87d1b9a

  	playwrightOptions: {
  	// Note, this is mostly equivalent to `...devices["iPhone 6"]` with import { devices } from 'playwright-chromium';
  	// Just expanded for illustration
  	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',
  	viewport: {
  	width: 375,
  	height: 667,
  	},
  	deviceScaleFactor: 2,
  	isMobile: true,
  	hasTouch: true,
  	},
  	};

  the underlying screenshot block calculation is in float instead of integers which causes error in sharp.
• Instead of trying to use floating points, we fallback to the nearest using `Math.floor' and discard the extra width and height.

NOTE: This is a quick fix and in the future we will modify the block construction algorithm to handle all the dynamic device emulation strategies and construct different number of blocks for greater efficiency.

[apmmachine]

💚 Build Succeeded

the below badges are clickable and redirect to their specific view in the CI or DOCS

Expand to view the summary

Build stats

• Build Cause: Pull request #340 opened

• Start Time: 2021-07-01T22:45:59.776+0000

• Duration: 15 min 16 sec

• Commit: 4ce1616

Test stats 🧪

Test	Results
Failed	0
Passed	119
Skipped	0
Total	119

Trends 🧪

[dominiqueclarke]

LGTM

[paulb-elastic]

@vigneshshanmugam / @dominiqueclarke does this need backporting to 7.x / 7.14?

[vigneshshanmugam]

@paulb-elastic This is only required on Synthetics side, a new release would do the job.