page.waitForFunction() Evaluation failed: EvalError: Refused to evaluate a string as JavaScript

[uliss3s]

Calling the code bellow:
page.waitForFunction("selector => document.querySelectorAll(selector).length === 0", "div[aria-label='Loading timeline']");

results in the error:

Exception in thread "main" com.microsoft.playwright.PlaywrightException: Error {
  message='Evaluation failed: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://*.twimg.com   https://www.google-analytics.com https://twitter.com https://app.link https://apis.google.com/js/platform.js https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js  'nonce-OTFjOTIzODItM2ViZi00NDQ0LWFhYWYtMTZhZjUwN2FjNjA5'".

    at eval (<anonymous>)
    at predicate (eval at evaluate (:303:29), <anonymous>:3:35)
    at eval (eval at evaluate (:303:29), <anonymous>:18:78)
    at onRaf (<anonymous>:1667:37)

Alternatively, i can code the logic like this and it works:

Object pageLoaded = Boolean.FALSE;
while (pageLoaded == Boolean.FALSE) {
    pageLoaded = page.evaluate("selector => (document.querySelectorAll(selector).length === 0)",
            "div[aria-label='Loading timeline']");
    customWait(500);
}

but i still need to know why the first function does not work.

[mxschmitt]

Is your site publicly available? We would be happy to take a look then. It seems like like they have CSP headers set which prevent you from executing JavaScript functions using evaluate.

You can set bypassCSP when creating the context to fix it: https://playwright.dev/docs/api/class-browser#browser-new-context-option-bypass-csp

[mxschmitt]

Closing for now since the issue seemed stale. Please reopen with a minimum reproducible.

[mnmkng]

Repro for failure @mxschmitt

Playwright: 1.14.1
OS: Mac OS 11.5.2

const playwright = require('playwright');

const browser = playwright.chromium.launch()
    .then(async (browser) => {
        const page = await browser.newPage();
        await page.goto('https://github.com/topics/javascript');
        const bool = await page.waitForFunction(() => {
            const repoCards = document.querySelectorAll('article.border');
            return repoCards.length > 30;
        })
        console.log(bool);
        await browser.close();
    })

Interestingly, this works (replaced waitForFunction with evaluate, no other changes):

const playwright = require('playwright');

const browser = playwright.chromium.launch()
    .then(async (browser) => {
        const page = await browser.newPage();
        await page.goto('https://github.com/topics/javascript');
        const bool = await page.evaluate(() => {
            const repoCards = document.querySelectorAll('article.border');
            return repoCards.length > 30;
        })
        console.log(bool);
        await browser.close();
    })

[mnmkng]

@mxschmitt Resurfacing this issue, as I ran into it again today. The reproduction above still works.

[remyoucef]

@mxschmitt I have this issue too.
@mnmkng Did you find a way around it?

[mnmkng]

I used evaluate and implemented the waiting logic separately.

[remyoucef]

Thank you. I've done the same, and it's working.