Testcafe: Element screenshots are blank/empty after a big page scroll

[ParachuteCat]

What is your Test Scenario?

Take a screenshots from multiple elemets from a list of elements inside a testcase.

(I also tryed to seperate each screenshot taken to a single testcase and disabled the 'Use hardware acceleration' of chrome, doesn't work anyway)

Just fyi:
In general I use TestCafé in combination with looksSame(compare images) to provide screenshot/visual regression - tests with advanced user actions (provided by TestCafé)

What is the Current behavior?

Nearly half of the screenshots taken with the testcase below are empty/blank (see screenshots)

_It look's like the runner hides the viewport before taking the screenshot, you can reproduce this by running the testcase below in a real browser instead of headless._

What is the Expected behavior?

All screenshots should display their corresponding element.

What is your web application and your TestCafe test code?

This page provides a matching example case:
www.lottohelden.de/gewinnwahrscheinlichkeiten/lotterien/

Test code:

const baseUrl = 'www.lottohelden.de'

fixture(`Run Screenshots for VR-Tests: ${baseUrl}`)
  .page(`${baseUrl}`)
  .beforeEach( async t => {
    await t
      .wait(2500)
      .resizeWindow(1920, 1080)
  })

 test.page(`${baseUrl}/gewinnwahrscheinlichkeiten/lotterien/`)
  ('screenshot desktop tabels', async t => {
  const oddsPanelList = Selector('.current-odds-chance');
  const count = await oddsPanelList.count
  for(let counter = 0; counter < count; counter++) {
    await t
      .wait(3000)
      .takeElementScreenshot(oddsPanelList.nth(counter), `desktop-table${counter}.png`)
  }
})

Generated screenshots from the testcase above:

how it should be:

where it all starts:

the issue:

Steps to Reproduce:

1. Setup testcafé
2. Execute given testcode ( generate the screenshots )
3. Open image number 9 or higher to see the problem

Your Environment details:

• testcafe version: 0.23.3
• node.js version: v10.11.0
• command-line arguments: testcafe chrome -s "src/screenshots"
• browser name and version: Chrome Version 71
• platform and version: macOS 10.14

[Farfurix]

@ParachuteCat,
Thank you for your detailed description. I've reproduced this issue. Our team will research it and find a suitable solution, if any.

[neekfenwick]

I believe I'm seeing the same problem, running [email protected] latest release.. I don't think this fix has been included in a new release yet.. can you please explain how to run with this new version to see if it fixes my problem or if I need to raise a new bug? I currently install testcafe by having "testcafe": "^0.23.0", in my 'dependencies' section of package.json.

[AndreyBelym]

@neekfenwick, the fix is included in the 1.1.0 release. You can update the dependency in your package.json by running

npm i --save testcafe@latest

You can check that you have the latest TestCafe version by running the following command:

npm ls testcafe

If you have any problem with the latest TestCafe version, please create a new bug report.