Automatic login issue with selenium/chrome headless mode

Question

I am trying to automate the login process to https://login.upstox.com using headless mode with selenium and chrome in python Chrome Browser Version: 123.0.6312.58 chromedriver Version:123.0.6312.58 Selenium Version: 4.14.0

In headless mode it is not sending an OTP to my mobile and not moving to next page. But it is working fine without headless mode. Can someone please help me to make it work in headless mode? Thank you for your help in advance.

FYI: In firefox it is working fine with headless mode in windows but not working on linux. I have tried with edge but no luck.

Here is my python code

import os
from selenium import webdriver
from selenium.webdriver.common.by import By
import time
from datetime import datetime
import requests


def init_chrome_webdriver():
    from selenium.webdriver.chrome.service import Service
    driver_path = os.path.join(os.getcwd(),'chromedriver.exe')
    service = Service(executable_path=driver_path,log_output="chromedriver.log")
    options = webdriver.ChromeOptions()
    options.add_argument("--headless=new")
    options.add_argument("--no-sandbox")
    options.add_argument("--disable-dev-shm-usage")
                         
    return webdriver.Chrome(service=service, options=options)

def automatic_login(config):

    url='https://login.upstox.com'
    driver = init_chrome_webdriver()
    driver.get(url)
    time.sleep(5)
    
    phone = driver.find_element(By.TAG_NAME,"input")
    phone.send_keys(config['phone'])
    page = driver.find_element(By.TAG_NAME,"body")
    page.screenshot("before.png")
    time.sleep(5)
    next = driver.find_element(By.ID,"getOtp")
    next.click()
    time.sleep(5)
    page = driver.find_element(By.TAG_NAME,"body")
    page.screenshot("after.png")
    driver.quit()

if __name__=='__main__':

    creds = {}
    creds['pass'] = ''
    creds['phone'] = 'xxxxxxxx'  #Replace with phone number

    automatic_login(creds)

Answer 1

When I run into this problem, I set the screen size...especially when going headless...as such:

options.add_argument("--window-size=1920,1080")

(Use a dimension that will work out for you.)

One thing that will greatly help is taking a screenshot of the page you want to access in headless mode. I'm willing to bet that headful and headless modes produce a different layout.