Puppeteer wait until Cloudfare redirect is done

I would like to login on a site, which is using Cloudfare DDOS protection like this:

The code is simple:

const puppeteer = require('puppeteer');
const C = require('./constants');
const USERNAME_SELECTOR = 'input[name="username"]';
const PASSWORD_SELECTOR = 'input[name="password"]';
const CTA_SELECTOR = '.button';
var cloudscraper = require('cloudscraper');

async function startBrowser() {
  const browser = await puppeteer.launch({
  headless: true,
  slowMo: 10000,
  });
  const page = await browser.newPage();
  return {browser, page};
}

async function closeBrowser(browser) {
  return browser.close();
}

async function playTest(url) {

  const {browser, page} = await startBrowser();
  page.setViewport({width: 1366, height: 768});
  await page.goto(url, {waituntil: 'domcontentloaded'});

  await page.screenshot({path: 'debug.png'});

  await page.click(USERNAME_SELECTOR);
  await page.keyboard.type(C.username);
  await page.click(PASSWORD_SELECTOR);
  await page.keyboard.type(C.password);
  await page.click(CTA_SELECTOR);
  await page.waitForNavigation();
  await page.screenshot({path: 'ipt.png'});
}

(async () => {
  await playTest("https://xy.com/login.php");
  process.exit(1);
})();

When I check debug.png, I see Cloudfare DDOS protection page only. I don't really understand why, I added slowMo 10sec to wait with the execution.