Help with login a page using puppeteer

Hi all,

I posted a thread about three months ago, inquiring about an idea I had to create a web scraping script for tracking specific information. The purpose is to notify me if someone puts their ticket up for sale, allowing me to either purchase it for myself or buy extras for friends when I plan to attend a match at the stadium

I began implementing this script but encountered an issue initially—I am unable to log in with my credentials, especially when using headless mode. Removing the headless property poses a challenge as it prevents the script from locating the #Username indicator.

I understand that this may not be the most proficient approach, but initially, I wanted to test the script to determine its feasibility. So, technically, my steps would be:

1-Call Login Page of FC Bayern website and fill username and password fields and click the login button
2-navigate to home screen URL
3-navigate to tickets page
4-navigate to Online Tickets page (which there exists the selector from which I will get the text data I need)

Below is a sample code; however, I have commented out the remaining code (Steps 3+4+5) as I am already experiencing issues in Step 1.

const puppeteer = require('puppeteer');
const fs = require('fs/promises')

async function loginAndNavigate() {
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true/*,args: ['--proxy-server=${proxy}']*/}) // Open browser in non-headless mode for visibility
    const page = await browser.newPage();

    try {
      // Step 1: Navigate to the login page
      const loginUrl = '';
      await page.goto(loginUrl, { waitUntil: 'domcontentloaded' });
      // Step 2: Fill in the login form
      await page.type('#username', '');
      await page.type('#password', '************');
     // await'.mdc-button primary-button span #kc-login'); // Replace '#loginButton' with the actual selector for the login button
      // Step 3: Wait for navigation after login
      //await page.waitForNavigation({ waitUntil: 'domcontentloaded' });
      // Step 4: Navigate to the home page after successful login
      //const homePageUrl = '';
      //await page.goto(homePageUrl, { waitUntil: 'domcontentloaded' });
      // Step 4: Navigate to the Tickets Page
      //const mainTicketsPageUrl = '';
      //await page.goto(mainTicketsPageUrl, { waitUntil: 'domcontentloaded' });

      // Step 5: Navigate to the Online Tickets Page
      //const onlineTicketsPageUrl = '';
      //await page.goto(onlineTicketsPageUrl, { waitUntil: 'domcontentloaded' });
      //const selector = '[class="width-limiter__WidthLimiter-sc-cmigic-0 carousel-v1__ContentContainer-sc-1qr18n7-3 cXRQmb dFkUHA"]';
      //await; // Replace with the actual selector for the "Anmelden" button

      /*const availableMatches = await page.evaluate(() => {
        const selector = '.fcb-gr-8 .fcb-row strong';
        const elements = Array.from(document.querySelectorAll(selector));
        const matches = => elem.textContent.trim());
        return matches;
    } catch (error) {
      console.error('Error:', error);
    } finally {
      // Close the browser
      //await browser.close();

The problem persists even if I manually navigate to the login page. I encounter this error on the website. However, if I try the same process using the standard Chrome browser, I am able to log in normally.

I read on Google that I can obtain additional information in Google Chrome using the Network tab, but I am unsure about the specific steps to take.

I hope someone can assist me in this matter. Primarily, I am facing two issues: how to address the current problem and, more broadly, how to handle automatic website redirections in web scraping.

Thank you, and I wish you a good start to this new year.