Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to take screenshots on chrome:headless

See original GitHub issue

What is your Scenario?

I’ve noticed that screenshot is not taken when running test in chrome or chrome:headless. I receive the following error:

 Warnings (1):
 --
  Was unable to take a screenshot due to an error.

  Error: Unable to locate the page area in the browser window screenshot at
  /Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/log/2022-02-20_20-33-31/test-1/run-1/Chrome_98.0.4758.102_macOS_10.15.7/1.png, because the page
  area mark with ID 2538690424 is not found in the screenshot.
      at calculateClipInfo (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/crop.js:119:19)
      at Object.cropScreenshot (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/crop.js:136:18)
      at /Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:148:40
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at Capturer._capture (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:129:9)
      at Capturer.captureAction (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:181:16)
      at BrowserManipulationQueue._takeScreenshot
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/browser-manipulation-queue.js:54:20)
      at BrowserManipulationQueue.executePendingManipulation
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/browser-manipulation-queue.js:71:24)
      at TestRun.ServiceMessages.<computed> [as ready-for-browser-manipulation]
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/index.js:1080:18)
      at TestRun.handleServiceMessage (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe-hammerhead/lib/session/index.js:70:20)

The problem appears only on Chrome browser. I have checked both Firefox and Safari and it works fine there. Maybe the problem concerns macOS, but I am not able to confirm this assumption.

Environment:

Chrome 98.0.4758.102
macOS 10.15.7
TestCafe version 1.14.2 (I cannot update due to issue https://github.com/DevExpress/testcafe/issues/6681)

What is the Current behavior?

The screenshot is not taken when using takeScreenshot() function or when test fails.

I receive following error when running test with takeScreenshot() function:

 Running tests in:
 - Chrome 98.0.4758.102 / macOS 10.15.7

 Google
 ✓ Take screenshot


 1 passed (3s)

 Warnings (1):
 --
  Was unable to take a screenshot due to an error.

  Error: Unable to locate the page area in the browser window screenshot at
  /Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/log/2022-02-20_20-33-31/test-1/run-1/Chrome_98.0.4758.102_macOS_10.15.7/1.png, because the page
  area mark with ID 2538690424 is not found in the screenshot.
      at calculateClipInfo (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/crop.js:119:19)
      at Object.cropScreenshot (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/crop.js:136:18)
      at /Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:148:40
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at Capturer._capture (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:129:9)
      at Capturer.captureAction (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/screenshots/capturer.js:181:16)
      at BrowserManipulationQueue._takeScreenshot
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/browser-manipulation-queue.js:54:20)
      at BrowserManipulationQueue.executePendingManipulation
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/browser-manipulation-queue.js:71:24)
      at TestRun.ServiceMessages.<computed> [as ready-for-browser-manipulation]
  (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe/src/test-run/index.js:1080:18)
      at TestRun.handleServiceMessage (/Users/agatagrzelczak/Deviniti/DEV/Bitbucket/apps-automated-tests/node_modules/testcafe-hammerhead/lib/session/index.js:70:20)

What is the Expected behavior?

The screenshot should be taken.

What is your public website URL? (or attach your complete example)

I can reproduce the problem using the test provided below.

What is your TestCafe test code?

fixture(Google).page(https://www.google.com);

test(‘Take screenshot’, async (t) => { await t.takeScreenshot(); });

Your complete configuration file

{
    "src": "tests/**/*.test.ts",
    "browsers": [
        "chrome:headless --cast-initial-screen-height=1080 --cast-initial-screen-width=1920",
        "chrome:emulation --cast-initial-screen-height=1080 --cast-initial-screen-width=1920",
        "chrome --cast-initial-screen-height=1080 --cast-initial-screen-width=1920"
    ],
    "disableMultipleWindows": false,
    "screenshots": {
        "path": "log",
        "takeOnFails": true
    },
    "reporter": [
        {
            "name": "spec"
        },
        {
            "name": "xunit",
            "output": "log/test-report.xml"
        }
    ]
}