Fix: Incorrect page size on screenshot in full-page mode in Chrome he…

…adless(closes DevExpress#5961)

package.json

@@ -182,7 +182,7 @@
     "chai-string": "^1.5.0",
     "chrome-launcher": "^0.15.0",
     "connect": "^3.4.0",
-    "devtools-protocol": "0.0.678506",
+    "devtools-protocol": "0.0.1007616",
     "dom-walk": "^0.1.1",
     "escape-string-regexp": "^4.0.0",
     "eslint-plugin-hammerhead": "0.4.0",

src/browser/provider/built-in/dedicated/chrome/cdp-client/index.ts

@@ -200,15 +200,15 @@ export class BrowserClient {
     public async resizeWindow (newDimensions: Size): Promise<void> {
         const { browserId, config, viewportSize, providerMethods, emulatedDevicePixelRatio } = this._runtimeInfo;
 
-        const currentWidth = viewportSize.width;
+        const currentWidth  = viewportSize.width;
         const currentHeight = viewportSize.height;
-        const newWidth = newDimensions.width || currentWidth;
-        const newHeight = newDimensions.height || currentHeight;
+        const newWidth      = newDimensions.width || currentWidth;
+        const newHeight     = newDimensions.height || currentHeight;
 
         if (!config.headless)
             await providerMethods.resizeLocalBrowserWindow(browserId, newWidth, newHeight, currentWidth, currentHeight);
 
-        viewportSize.width = newWidth;
+        viewportSize.width  = newWidth;
         viewportSize.height = newHeight;
 
         const client = await this.getActiveClient();
@@ -280,10 +280,7 @@ export class BrowserClient {
     }
 
     public async getScreenshotData (fullPage?: boolean): Promise<Buffer> {
-        let viewportWidth  = 0;
-        let viewportHeight = 0;
-
-        const { config, emulatedDevicePixelRatio } = this._runtimeInfo;
+        let clip: Protocol.Page.Viewport | undefined = void 0;
 
         const client = await this.getActiveClient();
 
@@ -295,37 +292,21 @@ export class BrowserClient {
         }
 
         if (fullPage) {
-            const { contentSize, visualViewport } = await client.Page.getLayoutMetrics();
-
-            await this._setDeviceMetricsOverride(
-                client,
-                Math.ceil(contentSize.width),
-                Math.ceil(contentSize.height),
-                emulatedDevicePixelRatio,
-                config.mobile);
+            const metrics           = await client.Page.getLayoutMetrics();
+            const { width, height } = metrics.cssContentSize || metrics.contentSize;
 
-            viewportWidth = visualViewport.clientWidth;
-            viewportHeight = visualViewport.clientHeight;
+            clip = { x: 0, y: 0, width, height, scale: 1 };
         }
 
-        const screenshotData = await client.Page.captureScreenshot({});
-
-        if (fullPage) {
-            if (config.emulation) {
-                await this._setDeviceMetricsOverride(
-                    client,
-                    config.width || viewportWidth,
-                    config.height || viewportHeight,
-                    emulatedDevicePixelRatio,
-                    config.mobile);
-            }
-            else
-                await client.Emulation.clearDeviceMetricsOverride();
-        }
+        const result = await client.Page.captureScreenshot({
+            clip,
+            captureBeyondViewport: true,
+        });
 
-        return Buffer.from(screenshotData.data, 'base64');
+        return Buffer.from(result.data, 'base64');
     }
 
+
     public async closeTab (): Promise<void> {
         if (this._parentTarget)
             await remoteChrome.Close({ id: this._parentTarget.id, port: this._runtimeInfo.cdpPort });
@@ -341,7 +322,7 @@ export class BrowserClient {
 
         const windowDimensions = windowDimensionsQueryResult.result.value;
 
-        this._runtimeInfo.viewportSize.width = windowDimensions.outerWidth;
+        this._runtimeInfo.viewportSize.width  = windowDimensions.outerWidth;
         this._runtimeInfo.viewportSize.height = windowDimensions.outerHeight;
     }
 

src/services/compiler/host.ts

@@ -108,7 +108,7 @@ interface CompilerHostInitOptions {
 }
 
 export default class CompilerHost extends AsyncEventEmitter implements CompilerProtocol {
-    private runtime: Promise<RuntimeResources|undefined>;
+    private runtime: Promise<RuntimeResources | undefined>;
     private cdp: cdp.ProtocolApi & EventEmitter | undefined;
     private readonly developmentMode: boolean;
     private readonly v8Flags: string[];
@@ -174,7 +174,7 @@ export default class CompilerHost extends AsyncEventEmitter implements CompilerP
                 includeCommandLineAPI: true,
             });
 
-            await this.cdp.Debugger.resume();
+            await this.cdp.Debugger.resume({ terminateOnResume: false });
         });
 
         testRunTracker.on(DEBUG_ACTION.step, async () => {
@@ -191,7 +191,7 @@ export default class CompilerHost extends AsyncEventEmitter implements CompilerP
                 includeCommandLineAPI: true,
             });
 
-            await this.cdp.Debugger.resume();
+            await this.cdp.Debugger.resume({ terminateOnResume: false });
         });
 
         // NOTE: need to step out from the source code until breakpoint is set in the code of test
@@ -202,7 +202,7 @@ export default class CompilerHost extends AsyncEventEmitter implements CompilerP
 
             if (this.cdp) {
                 if (args.reason === INITIAL_DEBUGGER_BREAK_ON_START)
-                    return this.cdp.Debugger.resume();
+                    return this.cdp.Debugger.resume({ terminateOnResume: false });
 
                 if (callFrames[0].url.includes(INTERNAL_FILES_URL))
                     return this.cdp.Debugger.stepOut();
@@ -246,14 +246,14 @@ export default class CompilerHost extends AsyncEventEmitter implements CompilerP
             args = this.v8Flags.filter(flag => !INSPECT_RE.test(flag));
 
         // TODO: debugging: refactor to a separate debug info parsing unit
-        const inspectBrkFlag = `--inspect-brk=127.0.0.1:${port}`;
+        const inspectBrkFlag = `--inspect-brk=127.0.0.1:${ port }`;
 
         args.push(inspectBrkFlag, SERVICE_PATH);
 
         return args;
     }
 
-    private async _init (runtime: Promise<RuntimeResources|undefined>): Promise<RuntimeResources|undefined> {
+    private async _init (runtime: Promise<RuntimeResources | undefined>): Promise<RuntimeResources | undefined> {
         const resolvedRuntime = await runtime;
 
         if (resolvedRuntime)

test/functional/fixtures/regression/gh-5961/testcafe-fixtures/index.js

@@ -1,4 +1,4 @@
-import {Selector} from "testcafe";
+import { Selector } from 'testcafe';
 
 fixture`Getting Started`
     .page`../pages/index.html`;
@@ -8,15 +8,16 @@ const getBrowserName = (alias) => alias.split(':').join('_');
 test('Take a full page screenshot', async t => {
     const path = `gh-5961/${ getBrowserName(t.browser.alias) }_full-page.png`;
 
-    await t.resizeWindow(2024, 768);
+    await t.resizeWindow(1024, 768);
     await t.takeScreenshot({
         path,
-        fullPage: true
+        fullPage: true,
     });
 });
 
 test.page('https://advancedinstaller.com/blog/page-1.html')('Take a full page screenshot2', async t => {
     const path = `gh-5961/${ getBrowserName(t.browser.alias) }1_full-page.png`;
+
     await t
         .resizeWindow(768, 800)
         .click(Selector('#cookies button'))