[BUG] page.screenshot: Evaluation failed: Error: Please keep customCSSNames in sync with evaluator engines

[jsjoeio]

System:

• OS: macOS 11.3
• CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
• Memory: 1.19 GB / 16.00 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 12.20.2 - ~/.nvm/versions/node/v12.20.2/bin/node
• Yarn: 1.22.10 - /usr/local/bin/yarn
• npm: 6.14.11 - ~/.nvm/versions/node/v12.20.2/bin/npm

Managers:

• Cargo: 1.48.0 - ~/.cargo/bin/cargo
• Homebrew: 3.1.3 - /usr/local/bin/brew
• pip3: 21.0.1 - /usr/bin/pip3
• RubyGems: 3.0.3 - /usr/bin/gem

Utilities:

• Make: 3.81 - /usr/bin/make
• GCC: 4.2.1 - /usr/bin/gcc
• Git: 2.31.1 - /usr/local/bin/git
• Clang: 12.0.0 - /usr/bin/clang

Servers:

• Apache: 2.4.46 - /usr/sbin/apachectl

Virtualization:

• Docker: 20.10.6 - /usr/local/bin/docker
• Parallels: 16.1.3 - /usr/local/bin/prlctl
• VirtualBox: 6.1.18 - /usr/local/bin/vboxmanage

IDEs:

• Nano: 2.0.6 - /usr/bin/nano
• VSCode: 1.55.2 - /usr/local/bin/code
• Vim: 8.2 - /usr/bin/vim
• Xcode: /undefined - /usr/bin/xcodebuild

Languages:

• Bash: 5.1.4 - /usr/local/bin/bash
• Go: 1.15.6 - /usr/local/go/bin/go
• Perl: 5.30.2 - /usr/bin/perl
• PHP: 7.3.24 - /usr/bin/php
• Python: 2.7.16 - /usr/bin/python
• Python3: 3.8.2 - /usr/bin/python3
• Ruby: 2.6.3 - /usr/bin/ruby
• Rust: 1.48.0 - /Users/jp/.cargo/bin/rustc

Databases:

• SQLite: 3.32.3 - /usr/bin/sqlite3

Browsers:

• Chrome: 90.0.4430.93
• Firefox Developer Edition: 89.0
• Safari: 14.1

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and
that we can run and debug locally. For example:

const {chromium, webkit, firefox} = require('playwright');

const { chromium } = require("playwright")

;(async () => {
  const browser = await chromium.launch({ headless: false })
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto("https://fitbit.com")

  // Click .fi-nav-account
  await Promise.all([
    page.waitForNavigation(/*{ url: 'https://accounts.fitbit.com/login?targetUrl=https%3A%2F%2Fwww.fitbit.com%2Fglobal%2Fus%2Fhome' }*/),
    page.click(".fi-nav-account"),
  ])

  // Click [placeholder="Your email address"]
  await page.click('[placeholder="Your email address"]')

  // Fill [placeholder="Your email address"]
  await page.fill('[placeholder="Your email address"]', "redacted")

  // Click [placeholder="Enter your password"]
  await page.click('[placeholder="Enter your password"]')

  // Fill [placeholder="Enter your password"]
  await page.fill('[placeholder="Enter your password"]', "redacted")

  // Click text=Login
  await page.click("text=Login")

  await page.waitForNavigation()

  // Click .fi-nav-account.profileCloseIcon
  await page.click(".fi-nav-account.profileCloseIcon")

  // // Click :nth-match(:text("My Dashboard"), 2)
  await page.click(':nth-match(:text("My Dashboard"), 2)')
  // // assert.equal(page.url(), 'https://www.fitbit.com/login/transferpage');

  // Click .nav li:nth-child(2) a
  await page.click(".nav li:nth-child(2) a")
  // assert.equal(page.url(), 'https://www.fitbit.com/foods/log');

  // Click #trackerNav ul li:nth-child(2) a span
  await page.click("#trackerNav ul li:nth-child(2) a span")
  // assert.equal(page.url(), 'https://www.fitbit.com/activities');

  // Click .fitbit-date-month
  await page.click(".fitbit-date-month")

  // Click .date
  await page.click(".date")
  await page.waitForLoadState("domcontentloaded")

  // Fill .startDate
  await page.fill(".startDate", "21-04-01")

  // Click .endDate
  await page.fill(".endDate", "21-04-28")

  // Click .fitbit-date-go
  await page.click(".fitbit-date-go")

  // Click .load-more
  const loadMoreSelector = ".load-more"
  let loadMore = await page.$(loadMoreSelector)

  // We need to load all the logs for the month
  for (let i = 0; i < 5; i++) {
    await page.waitForSelector(loadMoreSelector)
    loadMore = await page.$(loadMoreSelector)
    await loadMore.scrollIntoViewIfNeeded()
    await page.click(loadMoreSelector)
    await page.waitForLoadState("load")
  }

  await page.screenshot({ path: "fitbit-month-stats.png", fullPage: true })

  await browser.close()
})()

Describe the bug

Can't take screenshot of page. It sometimes works if I run in debug mode PWDEBUG=1 node index.js

(node:62421) UnhandledPromiseRejectionWarning: page.screenshot: Evaluation failed: Error: Please keep customCSSNames in sync with evaluator engines
    at new SelectorEvaluatorImpl (<anonymous>:2264:19)
    at new InjectedScript (<anonymous>:1521:27)
    at <anonymous>:2904:16
    at <anonymous>:2909:11
Error
    at Object.captureStackTrace (/Users/jp/Dev/playwright-repro/node_modules/playwright/lib/utils/stackTrace.js:48:19)
    at Connection.sendMessageToServer (/Users/jp/Dev/playwright-repro/node_modules/playwright/lib/client/connection.js:65:48)
    at Proxy.<anonymous> (/Users/jp/Dev/playwright-repro/node_modules/playwright/lib/client/channelOwner.js:64:61)
    at /Users/jp/Dev/playwright-repro/node_modules/playwright/lib/client/page.js:422:42
    at Page._wrapApiCall (/Users/jp/Dev/playwright-repro/node_modules/playwright/lib/client/channelOwner.js:77:34)
    at Page.screenshot (/Users/jp/Dev/playwright-repro/node_modules/playwright/lib/client/page.js:418:21)
    at /Users/jp/Dev/playwright-repro/index.js:88:14
(node:62421) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:62421) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Current workaround is to use page.pdf instead

[dgozman]

I was able to reproduce locally, and #6364 fixes it for me.